은둔형 공학자

1. 테이블 테두리 선의 두께 조절 

테이블 정렬과 외부 테두리 설정 

– Align 속성 

• align=“left/right” 

• 다른 태그의 정렬 방식과 마찬가지로 지정 

– Border 속성 

• boreder=픽셀 수 

• 픽셀의 수를 지정하여 테이블의 테두리선 지정 

• 테두리선의 두께는 두꺼워질 뿐 테이블의 내부에 영향을 주지 않는다. 

align                             테이블 정렬 방식 지정 

border = "n (픽셀단위)"      테이블 외부테두리의 두께, 기본 값 : 1 

2. 테이블의 크기 조절  

테이블에 여백 넣기 

• 테이블 여백 설정 

– cellpadding=픽셀 수 

• 셀과 셀 사이에 여백 지정, 셀의 두께가 변경되는 효과 

– cellspacing=픽셀 수 

• 테이블의 텍스트와 셀 사이의 여백 지정 

cellpadding  셀 테두리와 셀 내용 사이의 간격 

cellspacing  셀과 셀 사이의 경계선 굵기 

테이블 크기 조절 

– 테이블 크기 조절 width, height=“픽셀 수/비율” 

– 비율로 지정 시 브라우저 사이즈에 대한 비율로 지정된다. 

width      테이블의 너비 

height      테이블의 높이 

1. 1. 테이블 선언
   
2. 2. 셀 만들기
   • 행 생성, 열 생성
3. 3. 테이블에 테두리 표시와 빈 셀 작성
   • 태두리 표시 border 옵션(ex. Border=1 정수 값이 클 수록 선은 두껍다.)
   • 공백문자 -> &nbsp : 빈 셀을 만들기 위해 사용
4. 4. <td><img src=“이미지 파일명”></td>

1. 테이블로 웹 문서의 레이아웃 설정 

개요 

• 페이지를 만들기 전에 어느 부분에 어떤 내용을 넣을 것인지 설계하고 그런 내용들이 적당한 위치에 흐트러지지 않고 가

지런히 정돈되어서 배치되도록 표로 레이아웃을 설계합니다.  

테이블의 기본 구조

• 테이블 생성 

– 테이블 선언만 할 경우 테이블은 보이지 않는다. 

– 셀을 생성하지 않으면 테이블은 눈에 보이지 않는다. 

셀 만들기   

– <tr> “Table Row”의 약어 

• 테이블 내에 행을 정의하는 태그 

• 새로운 행이 생성 

– <td> “Table Data”의 약어 

• 각 행의 셀(cell)을 만들 때 사용 

• <tr>태그로 행을 정의한 후 <td> 태그로 셀을 만들어 내용 기술 

– 테이블 생성만 했을 경우와 다름 

– 셀(행과 열) 생성 시 테이블 외곽선이 나타남 

테이블에 테두리 표시와 빈 셀 작성 

– <table> 태그로 테이블 작성하면 테두리가 표시되지 않음 

– border 옵션 

• border=정수 (ex. Border=2) 

• 정수가 클 수록 선은 테두리는 두껍게 표시 

• 공백문자(&nbsp;) : 빈 셀을 만들기 위해 사용 

빈 셀 작성하기  

– 빈 셀을 작성하기 위해서는 공백 문자(&nbsp) 필요 

– 스페이스바는 문자로 인식하지 못함 

• <td>스페이스바</td> 셀 생성되지 않음 

• <td>&nbsp</td> 빈 셀 생성 

테이블 안에 이미지 삽입 (1행) 

– 셀 생성 후 셀 안에 이미지 삽입 

– <td><img src=“이미지 파일명”></td> 

– 실행 예 

<table> 

<tr> 

<td><img src=“image\image01.jpg></td> 

</tr> 

</table> 

1. 1. 웹 페이지에서 동영상 파일
   • 홈페이지에 간단한 링크로 삽입, 실시간 동영상 제공 가능
   • <a> 태그를 이용하여 음악, 동영상 파일도 재생 가능
   • <embed> 태그를 이용하여 동영상 파일 불러오기
2. 2. 플래시 애니메이션 보여 주기
   • 플래시 프로그램을 웹 페이지에서 보여주기
   • 음악이나 동영상처럼 <embed>태그를 사용
   • <embed>태그 속성 모두 사용 가능

1. 동영상 파일 포함하기 

<embed> 태그를 이용하여 동영상 파일 불러오기 

속성                          설명 

src              동영상 파일의 경로 지정 

width           화면에 동영상을 나타내기 위해 가로 길이 지정 

height          화면에 동영상을 나타내기 위해 세로 길이 지정 

type             읽어올 파일의 타입 지정 

hidden         미디어를 화면에 나타낼지의 유무 지정 (기본값 true : 안나타남) 

loop            연속적으로 반복해서 나타낼지를 지정 

autostart       웹 페이지를 열자마자 재생되게 지정 

showstatusbar 컨트롤바 밑에 상태바를 보여줌 

플래시 애니메이션 보여주기 

– 플래시 프로그램을 웹 페이지에서 보여주기 

– 음악이나 동영상처럼 <embed>태그를 사용 

– <embed>태그 속성 모두 사용 가능 

동영상 파일 웹 페이지에서 보여주기 

– 홈페이지에 간단한 링크로 삽입 

– 실시간 동영상 제공 가능 

– 관련 표준 

• QuickTime, MPEG, AVI, VODLive, RM 등 

동영상 파일 연결하기 

– 하이퍼링크 기능과 마찬가지로 링크 설정 

– <a> 태그를 이용하여 음악, 동영상 파일도 재생 가능 

– 링크를 설정하여 동영상 파일 재생 

인생을 산다는 것.

매번 같은 일을 하며 하루를 보내며

매일 같은 곳에서 생활을 하면서

매달 반복적인 규칙으로

매년 하나 하나 나이를 먹지.

하지만 그 반복되는 일상에서 잠깐의 안식은  기분이 좋아.

다들 조금만 더 힘내고 바쁘지 않다면 연속의 굴레에서 잠시 벗어나는게 어떨까?

일탈이라는 단어는 두렵기도 하지만 때론 기분 전환에 도움되는 단어라고 생각해.

새로운 것에 도전하고 부딪혀보고 좌절을 맛보고...

그래도 그로 인해 얻는 것들이 보람차지 않니?

즐거운 일상이 되길바래!

어떄? 음악들으면서 기분 전환이 됬으면 좋겠다!

출처: http://bjh0925.tistory.com/entry/매일-하루-그리고-일상 [은둔형 공학자]

1. 1. 음악 파일 삽입하기
   • 소리에 관련된 파일로 MIDI, WAV, RA, MP3 등 브라우저에 삽입
2. 2. 음악 파일 연결
   • 응용 프로그램 실행
   • <a href="음악 파일명">텍스트</a>
3. 3. 음악파일 포함
   • 음악 파일을 연결하면 링크를 클릭해야 음악 듣기
   • 웹 브라우저에서 바로 실행
   • <embed src="음악 파일명">
4. 4. <embed> 태그 속성 알아보기
   • Hidden 속성
     • hidden=true or false
   • autostart, loop 속성
     • autostart=true
     • loop=true

1. 음악파일 연결하기 

음악 파일 연결하기 

• 음악 파일 삽입하기 

– 소리에 관련된 파일로 MIDI, WAV, RA, MP3 등 브라우저에 삽입 

– 윈도우 미디어 플레이어, 리얼 플레이어, 윈앰프, 알송 등 

• 음악 파일 연결 

– 응용 프로그램 실행 

– <a href="음악 파일명">텍스트</a> 

• 음악파일 포함 

– 음악 파일을 연결하면 링크를 클릭해야 음악 듣기 

– 웹 브라우저에서 바로 실행 

– <embed src="음악 파일명"> 

embed 태그의 hidden, autostart, loop 속성   

– Hidden 속성 

• hidden=true or false 

– autostart, loop 속성 

• autostart=true 

• loop=true 

1. 지정된 위치로 링크 설정

   • <a name=name> 와 <a href=#name> 링크로 이동 하고자 하는 위치
2. 다른 HTML 문서의 특정 위치로도 링크 가능
   • <a href=“링크될 문서의 경로 및 파일명#이름">…<a>
3. 절대경로
   • 파일명을 기술할 때 루트 디렉토리부터 일일이 경로를 지정
4. 상대경로
   • 현재 HTML 문서가 저장된 위치를 기준으로 경로를 지정
5. 음악, 동영상 파일 링크하기
6. 압축파일, 실행 파일 링크
7. 링크 결과를 다른 창에 열기
8. 내 홈페이지 홍보하기
9. 이미지 맵 만들기

1. 지정된 위치로 링크 설정 

현재 HTML 문서의 지정된 위치로 링크설정 

– HTML 문서가 길어질 때 원하는 위치로 이동하고자 하는 곳 이동 가능 

– <a name="name"></a>, <a href="#name"></a> 

• <a name=name> 태그를 사용 책갈피로 표시 

• <a href=#name> 링크로 이동 하고자 하는 위치의 이름 지정 

– 다른 HTML 문서의 특정 위치로도 링크 가능 

• <a href=“링크될 문서의 경로 및 파일명#이름”>…<a> 

– 절대 경로와 상대 경로 

• 절대경로 

– 파일명을 기술할 때 루트 디렉토리부터 일일이 경로를 지정 

• 상대경로 

– 현재 HTML 문서가 저장된 위치를 기준으로 경로를 지정 

– 음악, 동영상 파일 링크하기 

• 음악, 동영상 파일을 하이퍼링크로 지정 

2. 음악, 동영상 파일 링크하기 

압축파일, 실행파일 링크하기 

• 압축파일, 실행 파일 링크 

– 웹 브라우저에서 나타낼 수 없는 파일을 링크로 설정하여 다운로드 

– <a href=“game.zip>파일다운<a> 

• 링크 결과를 다른 창에 열기 

– 링크된 페이지를 새로운 웹 브라우저 창이 열리면서 나타남 

– 새로운 페이지를 열기 위해서 target 속성 사용 

• “target=_blank” 값을 지정 새로운 페이지 열고 거기에 링크 표시 

• 내 홈페이지 홍보하기 

– 게시판에 글을 올릴 때 자신의 홈페이지 홍보하기 위해서 링크 

설정 

• <a href=http://cafe.naver.com/studylist target=_blank”> 

Homepage </a> 

3. 이미지 맵 만들기 

이미지 맵을 만드는 태그 

<img src="이미지 파일명" usemap="#이름">  

        <map name="이름">  

                <area>  

                </area>  

        </map>  

속 성                                      설 명 

shape      영역의 모양을 지정. rect은 사각형, circle은 원, polygon은 다각형을 의미한다.  

coords     영역의 좌표값을 지정. 모양에 따라 나타나는 좌표값이 다르다. 

href         링크시킬 HTML 문서의 경로명과 파일명을 지정 

noref       링크시킬 문서가 없을 경우에 사용한다. 

alt           링크에 대한 간단한 설명을 입력한다. 

사각형/원형으로 이미지 맵 만들기 

• 사각형으로 이미지 맵 만들기 

– 두 곳(시작, 종료)의 좌표값(X,Y)을 알아내기 위해 포토샵을 이용 

– 기타 그림판도 가능 

• 상태 표시 줄에 x, y 좌표값 확인 

• 원형으로 이미지 맵 만들기 

– 원형은 사각형과 달리 중심점에 대한 좌표값과 반지름의 길이 필요 

– 원형은 그림판으로 중심점의 위치 파악이 어려움 

– Info 창에서 X, Y 좌표는 원의 중심, width가 원의 지름