HTML 스터디
Section 03 홈페이지 꾸미기
교재는 HTML JAVASCRIPT CSS책을 활용하였습니다
먼저 웹페이지등에 그림을 삽입하거나 배경음악을 넣는 등, 홈페이지를 보다 더 고급스럽게 꾸미기 위한 태그를 알아보도록 하겠습니다.
3.1 그림삽입
일반적으로 HTML에서 지원하는 파일 중에서 주로 많이 사용하는 그림 파일의 형식은 BMP, JPG, GIF등이 있습니다. 이것들은 그림파일의 확장자에 따라 분류한 것으로 특징은 다음과 같습니다
그림 파일 형식 | 특징 |
BMP 파일 | 압축이 되어있지 않아 파일의 크기가 크다. 전송속도가 느린 편이다 |
JPG 파일 | 다양한 색을 사용할 수 있고 압축률이 높으므로 빠르게 전송할 수 있다는 장점이 있어 주로 사진을 이미지로 만들 때 사용한다. |
GIF 파일 | JPG파일에 비해 다양한 색을 사용할 수는 없지만 배경색을 투명하게 설정할 수 있는 장점이 있다. |
- <img>태그
이 태그는 html문서에 그림 파일을 삽입하기 위해 사용합니다. 기본적인 형식은 다음과 같습니다
<ing src="그림파일" border="테두리" bordercolor="#색상값" align="정렬" width="너비" height="높이" hspace="좌,우 여백" vspace="위, 아래 여백" alt="그림 설명"> |
속성 | 설명 | |
Src | 그림 파일이 위치한 경로를 표시한다 상대경로나 절대 경로로 표시가능 | |
Border | 그림의 테두리 값을 지정해준다 border값을 설정하지 않거나 0으로 설정하면 테두리가 표시되지 않는다 | |
align | Left | 문장이 여러 줄인 경우 그림을 문장의 왼쪽에 정렬한다 |
Right | 문장이 여러 줄인 경우 그림을 문장의 오른쪽에 정렬한다 | |
Top | 문장의 첫 행을 그림의 상단에 정렬한다 | |
Middle | 문장의 첫 행을 중심부분에 정렬한다 | |
Bottom | 문장의 첫 행을 그림의 하단에 정렬한다 | |
Width | 그림의 너비를 지정한다 픽셀 값이나 %로 지정할 수 있다 | |
Height | 그림의 높이를 지정한다 픽셀 값이나 %로 지정할 수 있다 | |
Hspace | 그림의 좌,우 여백을 지정한다 | |
Vspace | 그림의 상,하 여백을 지정한다 | |
alt | 그림에 대한 설명을 부여할 때 사용한다 alt속성을 사용하면 웹 브라우저에서 사용자가 그림에 마우스 커서를 올려 놓으면 설명이 나타난다. 즉 풍선도움말(툴팁)과 같은 기능을 한다. | |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>HTML실습</title> </head>
<body> 그림의 가로 길이는 165픽셀, 세로 길이는 200픽셀<br /> <img src="../Pictures/htm_20101102183056c000c010-001.jpg" width="165" height="200" /><p> 그림의 가로 길이는 100픽셀, 세로 길이는 100픽셀, 테두리 굵기는 10픽셀<br /> <img src="../Pictures/htm_20101102183056c000c010-001.jpg" width="100" height="100" border="10"/><p> </body> </html> |
3.2 사운드 삽입
홈페이지에 배경 음악을 넣을 수 있는 방법을 알아보기 전에 먼저 파일의 종류에 대해서 알아보도록 하겠습니다
종류 | 특징 |
윈도우 미디어 파일(ASF/WMA) | ASF(Audio Streaming File)와 WMA(windows Media Audio)형식의 음악파일로 윈도우에 내장되어 있는 미디어 플레이어로 재생되는 파일입니다. MP3파일에 비해 압축률이 좋고 음질면에서 큰 차이가 없기에 근래에 홈페이지 배경 음악으로 많이 사용됩니다 |
미디 파일(MID) | MIDI(Musical Instrument Digital Interface)형식의 파일은 연주장치 정보만을 표현하기 대문에 파일의 크기가 아주 작다는 장점이 있는 반면에 사용자 컴퓨터의 사운드카드의 성능에 따라 그 음질이 결정된다는 단점이 있습니다 |
RA/RAM | 리얼 플레이어로만 실행되는 파일형식입니다. 압축률이 뛰어나지만 음질이 다소 떨어진다는 단점이 있습니다. |
WAV | 음질이 좋은 대신 용량이 매우 크기 때문에 웹상에서는 자주 사용되지 않습니다 |
AIFF | AIFF(Audio Interchange File Format) 파일은 맥킨토시용으로 개발된 파일형식입니다 |
- <Bgsound>태그
홈페이지에 배경음악으로 삽입할 때 주로 사용합니다
<bgsound src="사운드파일" loop="n"> |
속성 | 설명 |
Src | 사운드 파일이 위치한 경로를 표시합니다 상대경로나 절대 경로로 표시할 수 있습니다 |
loop | 사운드 파일을 실행할 반복 횟수를 지정합니다 N의 위치에 양수를 넣으면 그 숫자만큼 반복실행하며 -1 혹은 infinite를 지정하면 무한대로 실행합니다 |
- <Embed>태그
홈페이지에 음악파일이나, 플래시파일, 동영상파일 등을 삽입하는 태그입니다
<embed src="파일경로" align="정렬" width="너비" height="높이" hidden="n" autostart="n" showstatusbar="n" loop="반복횟수"> |
속성 | 설명 | |
Src | 삽일될 음악, 동영상, 플래시파일등이 위치한 경로를 적어줍니다. 상대주소나 절대주소를 이용할 수 있습니다 | |
Align | 정렬 위치를 정렬합니다 | |
Right | 실행되는 동영상이나 음악파일 플레이어를 브라우저의 우측에 정렬합니다 | |
Left | 실행되는 동영상이나 음악파일 플레이어를 브라우저의 좌측에 정렬합니다 | |
Width | 실행되는 동영상이나 음악파일 플레이어의 가로 너비를 지정 | |
Height | 실행되는 동영상이나 음악파일 플레이어의 세로 너비를 지정 | |
Hidden | 실행되는 동영상이나 음악파일 플레이어를 브라우저에서 보이게 할 것인지 아닌지를 결정합니다 | |
true혹은 1 | 플레이어를 감추고 보이지 않게 합니다 | |
true혹은 0 | 플레이어를 감추지 않습니다 | |
autostart | 사용자가 동영상이나 음악파일이 삽입된 페이지를 열면 자동으로 실행이 되도록 할 것인지의 여부를 결정합니다 | |
true혹은 1 | 자동으로 실행됩니다 | |
true혹은 0 | 자동으로 실행되지 않는다. 플레이어에서 재생 버튼을 클릭하면 파일이 실행됩니다 | |
showstatusbar | 플레이어의 상태표시줄을 보이도록 할 것인지 아닌지의 여부를 결정합니다 | |
true혹은 1 | 상태표시줄이 보이도록 합니다 | |
true혹은 0 | 상태표시줄이 보이지 않도록 합니다 | |
loop | 삽입된 파일의 반복실행 될 횟수를 지정한다. 특별히 지정하지 않으면 1회만 실횡되며 -1이라고 지정하면 무한대로 반복합니다 | |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>HTML실습</title> </head>
<body> <embed src="http://pds20.egloos.com/pds/201012/09/52/TW1.swf"/> </body> </html> |
3.3 화면 배경 바꾸기
(1) 배경색 바꾸기
웹브라우저는 흰색 바탕에 검정 글자가 기본으로 정해져 있다. 그러나 이것은 <body>태그의 속성을 이용해 html문서 작성자가 변경할 수 있습니다
<body bgcolor="색이름 또는 #색상값" text="색이름 또는 #색상값" |
속성 | 설명 |
Bgcolor | 브라우저의 바탕색을 지정합니다 |
Text | 브라우저에 인쇄될 글자의 색상을 지정합니다 |
- 배경 그림 삽입하기
Html을 이용하여 브라우저의 배경색 뿐만 아니라 이미지 파일을 이용해 배경으로 사용할 수 있습니다. 배경그림 역시 <body>태그의 속성을 이용한다.
<body background="그림파일경로" text="색이름 또는 #색상값"> |
속성 | 설명 |
Background | 그림 파일이 위치한 경로(URL)를 적어준다. 절대주소 혹은 상대주소 이용할 수 있다 |
text | 글자의 색을 지정한다 |
3.4 움직이는 태그
<marquee>태그를 사용하여 웹브라우저에서 자동으로 글자나 이미지를 상,하,좌,우의 방향으로 움직이도록 꾸며줄 수 있습니다
<marquee direction="방향" bgcolor="색이름 또는 #색번호" behavior="n" height="높이" width="너비" scrollamount="n" scrolldelay="n" loop="반복횟수"> ……… </marquee> |
속성 | 설명 | |
Direction | 글자나 이미지가 어느방향으로 움직일 것인지 결정합니다. | |
Left | 오른쪽에서 왼쪽으로 움직입니다 | |
Right | 왼쪽으로 오른쪽으로 움직입니다 | |
Up | 아래쪽으로 위쪽으로 움직입니다 | |
down | 위쪽에서 아래쪽으로 움직인다 | |
Bgcolor | 글자나 이미지가 움직이는 배경의 색을 지정합니다 | |
Behavior | 글자나 이미지가 어떤 방법으로 움직일 것인지 지정한다. 기본값은 scroll입니다 Direction="left"의 경우를 예로 설명하겠습니다 | |
Alternate | 좌,우로 반복해서 움직입니다 | |
Scroll | 오른쪽에서 왼쪽으로 움직이면서 사라진 뒤, 다시 반복합니다 | |
Slide | 오른쪽에서 왼쪽으로 움직인 후 멈춘다 | |
Height | 글자나 이미지가 움직이는 공간의 높이를 지정합니다 | |
Width | 글자나 이미지가 움직이는 공간의 너비를 지정합니다 | |
Scrollamount | 글자나 이미지가 움직일 때 한번에 얼마만큼의 거리를 움직일 것인지 지정합니다 숫자가 커질수록 한 번에 움직이는 거리가 커진다 | |
Scrolldelay | 글자가 이미지가 움직이는 속도를 지정합니다. 숫자가 커질수록 느리게 움직입니다 | |
Loop | 글자나 이미지가 움직이는 반복횟수를 지정합니다. 기본값은 infinite로 특별히 지정하지 않으면 무한으로 반복합니다 | |
4. 링크 태그
지금까지 내용은 홈페이지의 기본적인 제작에 있어 가장 기초적인 기능들이므로 내용이 빠지는게 없이 꼭꼭 숙지할 필요가 있습니다~
4.1 다른 문서와의 연결
(1) 다른 페이지로 이동
<a href> 태그를 사용하면 현재의 페이지에서 다른 페이지로 이동할 수 있습니다
<a href="홈페이지 주소" target="n" title="설명"> 출력될 문자열 </a> |
(2) E-mail 보내기
<a href=mailto:메일주소>출력될 문자열</a>를 사용하면 메일을 보낼 수 있습니다
여러 가지 기능들을 다 알 수는 없겟지만 적어도 어떤 기능이 있는지는 알고 있어야 나중에 자신이 필요한 기능이 있을 때 사용을 할 수 있겠죠? 힘들지만 꾸준히 공부합시다!!!
'프로그래밍언어 > HTML' 카테고리의 다른 글
| HTML5의 기본 형태 (0) | 2012.07.20 |
|---|---|
| HTML스터디 - 표만들기 (0) | 2011.01.18 |
| [HTML5이야기] 시맨틱 엘리먼트!? (1) | 2011.01.06 |
| [HTML5이야기] Video & Audio 태그 집중 분석 (0) | 2011.01.04 |
| [HTML5이야기] HTML5 지원여부 감지 (4) | 2011.01.04 |
