- 제 3 강 -
일반적인 내용을 작성하고 글자를 강조하는 요령을 알아보았습니다.
일반적인 글자를 작성할 수 있는 요령을 알아보았으니, 이제 제목도 작성을 해 보아야겠지요???
제목은 일반적인 글자들 보다 눈에 잘 들어올 수 있도록 작성을 하게 되는데, 이럴 때 사용하는 태그
가 Header의 첫 글자를 지정하는 ∼라 할 수 있으며, 위에서 사용한 형
식과는 달리 태그는 "H"뒤에 크기를 지정합니다.
그래서 ∼으로 많이 사용됩니다.
여기서 "n"이란 바로 크기(size)가 되는 것이구요!!!
"n"으로 지정할 수 있는 크기는 에서 1∼7까지인 반면 태그는 1∼6까지 지정이 가능합
니다.
▶ Source 작성 ◀
제목을 표시하는 태그
외눈박이 물고기의 사랑
외눈박이 물고기의 사랑
외눈박이 물고기의 사랑
외눈박이 물고기의 사랑
외눈박이 물고기의 사랑
외눈박이 물고기의 사랑
결과를 보시면 알겠지만,
태그보다
가 더 작은 크기로 나타나지요?
은 첫 번째 제목이라서 큰 것이고,
는 두 번째 제목,
는 세 번째 제목....
이렇게 숫자는 하위로 포함되는 제목이라는 점을 감안하면 충분히 이해하실 수 있을 것입니다.
또한 이 태그는 와 비교하여 좀 더 많은 기능을 가지고 있습니다.
글자의 굵기도 굵게, 그리고 로 종료시켜 버리면 자동으로 줄 바꿈이 일어나면서 빈 줄 또한
삽입이 된다는 것입니다.
결국 ∼= + +
라 할 수 있습니다.
태그에 지정할 수 있는 속성으로는 Alignment, 즉 문서의 제목을 웹브라우저 화면의 좌, 우 또
는 중간에 배열할 수 있는 기능이 있으며 사용할 때에는 Align=" "이라고 지정합니다.
Align 속성은 right, center, left의 값을 가질 수 있으며 이 속성의 기본값은 left로 이 속성을 사용하
지 않은 경우 제목은 화면의 왼쪽에 나타나게 됩니다.
▶ Source 작성 ◀
제목을 표시하는 태그
외눈박이 물고기의 사랑
외눈박이 물고기의 사랑
외눈박이 물고기의 사랑
외눈박이 물고기의 사랑
쉽게 결과를 확인하실 수 있으시겠죠???
제목과 본문을 구별 지어 주기위해 여러 개의 빈 줄을 삽입하는 경우도 있겠지만, 내용이 달라지는
것을 확실히 알려 주는 방법은 수평선을 이용하는 것이 더 효과적일 것입니다.
즉 태그는 수평선(Horizonal Rule)을 그어주는 기능을 하게 되며 단순히 만 사용하여 표
현이 되나 Align, Size, Width, Noshade, Color, Title 여섯 개의 속성을 가질 수 있습니다.
Size속성은 수평선의 굵기를 표현해 주는 것으로 숫자는 픽셀 값이며 이 속성을 사용하지 않았을 경
우 기본선의 굵기는 2픽셀입니다.
개인적으로 다를 수 있으나 수평선으로서의 기능으로 사용하여 보기좋은 size는 "5"입니다.
Width속성은 수평선의 가로 크기를 지정할 때 사용하는 속성입니다.
값을 표현하는 방법에는 두 가지 방 법이 있는데 픽셀 값으로 나타내는 방법과 화면에 대한 비율(%)
로 나타내는 방법이 그것입니다.
픽셀을 지정할 경우 어떤 웹브라우저에서든 동일한 폭으로 수평선이 그어지지만 %값을 사용한 경우
는 웹브라우저 화면의 해상도에 따라 수평선의 크기가 변화될 수 있습니다.
▶ Source 작성 ◀
수평선 그리기
Align속성을 사용하여 원하는 위치에 배열할 수 있는데 값으로 left, right, center, justify 등을 가질
수 있습니다.
이들은 각각 수평선을 화면의 왼쪽, 오른쪽, 중앙 및 앞 의 배열방식에 따라 위치시키게 됩니다.
속성을 사용하지 않은 경우 수평선이 가운데 위치된 것을 볼 수 있습니다.
Align속성이 가운데 정렬되어 있기 때문에 가운데 정렬된 것으로 이 속성의 값으로 justify를 사용한
경우와 같은 효과입니다.
웹 브라우저 화면에 그어진 수평선이 음영을 이용한 그림자 효과를 부여하는 것으로 3차원의 효과를
갖는다면 Noshade속성은 그림자 효과를 지원 2차원적인 평면의 단색 효과를 갖게 해주는 것입니다.
Noshade속성을 지정하지 않으면 3차원의 효과로 그림자가 보여지지만, Noshade속성 자체를 써 넣
으면 단색의 수평선이 생겨나게 됩니다.
Color속성은 수평선의 색상을 지정해 주는 것인데 Color="색상"을 쓰게 되면 지정색으로 바뀌게 됩
니다. Color속성을 이용하면 Noshade속성을 부여하지 않아도 그림자 효과가 사라지는 것이 특징입
니다.
Title속성은 수평선에 설명을 쓰고자 할 때 사용하는 것으로 수평선 위에 마우스를 올려 놓으면 풍선
도움말효과가 나타납니다.
풍선 도움말을 여러 줄로 나열하고자 할 경우 "
"을 사용하면 Enter Key를 사용한 것처럼 다음
줄로 문장이 이동합니다.
▶ Source 작성 ◀
수평선 그리기
결과는 다음 페이지에서 확인하실 수 있습니다.
목록은 전달하고자 하는 내용을 일목 요연하게 전달하기위해 아주 중요한 수단이 됩니다.
웹 문서에서 자주 사용되는 목록에는 순서가 있는 목록, 순서가 없는 목록, 정의 목록 등이 있습니다.
Ordered List의 뜻처럼 순서가 나열되어지는 목록이 바로∼이며 각 항목을 나타낼 때
사용하는 태그는 LIst를 의미하는
태그를 사용하며
태그는 단독태그입니다.
결국 ∼은
와 함께 사용이 되어야만 모양을 나타내는 태그라 할 수 있으며, 구태여
태그를 사용하지 않아도 다음 줄에 표현됩니다.
:
:
태그에는 Type과 Start 두 개의 속성을 사용할 수 있습니다.
각 항목 앞에 표시할 부호의 종류를 지정할 때 사용하는 속성으로 "type"이 사용되며, 이 속성의 값
으로 "1", "A", "a", "I", "ⅰ"를 각각 선택할 수 있습니다.
type="1" : 아라비아 숫자 ( 1. 2. 3. 4. ……… )
type="A" : 영문 알파벳 대문자 ( A. B. C. D. ……… )
type="a" : 영문 알파벳 소문자 ( a. b. c. d. ……… )
type="I" : 그리스 로마 대문자 (Ⅰ. Ⅱ. Ⅲ. Ⅳ. ……… )
type="i" : 그리스 로마 소문자 (ⅰ. ⅱ. ⅲ. ⅳ. ……… )
▶ Source작성 ◀
내가 좋아하는 시
외눈박이 물고기의 사랑
보여줄 수 있는 사랑은 아주 작습니다.
그대가 곁에 있어도 나는 그대가 그립다.
소금인형
▶ 결과 보기 ◀
Start속성은 목록의 각 항목 앞에 붙여질 부호가 몇 번째부터 시작할 것인지를 지정할 때 사용하는데
START="5"와 같이 아라비아 숫자 로 나타냅니다.
이번엔 순서가 없는 목록을 만들어 볼까요?
순서가 없는 목록을 만들 때 사용하는 요소는
∼
태그는 Unordered List의 첫 글자들을
인용한 것으로 사용법은 ∼과 마찬가지로 항목표시를 위해
를 사용하게 됩니다.
태그와 함께 할 수 있는 속성으로는 Start를 제외한 Type만을 사용할 수 있으며, 목록의 각 항
목 앞에는 disc(뼰 ), circle(뽀 ), square(봎 ) 세가지 종류의 부호를 사용할 수 있습니다.
다만 이 type속성의 값으로 쓰이는 disc, circle, square는 반드시 소문자로 지정해 주어야 그 효과
를 보실 수 있으며 특별히 type속성을 쓰지 않으면 기본적으로 disc(뼰 )로 지정됩니다.
type="disk" : ●검은 원
type="circle" : ○흰 원
type="square" : ■사각 박스
▶ Source작성 ◀
★ 검 색 엔 진 ★
야후 코리아
심마니
라이코스
알타비스타
▶ 결과 보기 ◀
이제 단 하나 정의 목록(Definition List)이 남아 있군요!!!
정의 목록(Definition List)이란 용어를 정의할 때와 같이 용어와 용어를 설명 한 부분을 구분되게 표
현할 수 있는 방법입니다.
HTML웹 문서에서 정의목록을 만들 때 사용하는 요소는
∼
이며 항목을 나타내는 태그로
는 두 종류가 있습니다.
와
가 그것인데 용어를 설명한다고 할 경우 용어 부분에 사용하는 태그가
, 용어
를 설명하는데 사용할 태그가
입니다.
태그를 사용한 항목은 몇 자정도 안으로 들어가서 시작한다는 것이 특징이며,
와
는 종료태그를 생략할 수 있습니다.
따라서 정의 목록은 다음과 같은 구조를 갖습니다.
항목 1
항목 1의 설명
항목 2
항목 2의 설명 1
항목 2의 설명 2
::
▶ Source작성 ◀
순서가 있는 목록
Ordered List로 숫자나 알파벳, 그리스 로마문자를 이용하여 목차의 순서를
결정지어 주는 태그로 항상 "LI"라는 태그와 함께 쓰이며, 줄 바꿈 태그를 쓰지
않아도 자동 줄 바꿈이 일어납니다.
순서가 없는 목록
Unordered List로 특정한 순서없이 목차를 나열하고자 할 때 사용을 하며,
"OL" 태그와 마찬가지로 항목은 "LI"태그로 정리를 해줍니다. 항목으로 표시되
는 부호는 disc(뼰 ), circle(뽀 ), square(봎 ) 세가지 종류가 있습니다.
정의 목록
Definition List로 특정 단어에 대한 설명을 나열할 때 사용하며, "DT"태그는
특정 단어를 나열할 때, "DD"태그는 특정 단어에 대한 설명을 나열할 때 사용
됩니다. 다만 "DL"와는 달리 "DT", "DD"는 종료태그를 생략할 수 있습니다.
▶ 결과 보기 ◀
이렇게 목차를 나열할 수 있는 태그들에 대하여 알아보았습니다.
순서가 있는 목록∼과 순서가 없는 목록
∼
은 함께 사용할 수도 있으므로
예제를 이용하여 나열해 보도록 하겠습니다.
▶ Source작성 ◀
목차 이용하기
★ OL안에서 UL사용하기 ★
이번주의 개봉영화
에린 브로코비치 (Erin Brockovich)
심동
티거 무비 (The Tigger Movie)
미션 투 마스 (Mission to Mars)
사랑을 위하여 (For Love of the Game)
이번주의 베스트 셀러 북
영어공부 절대로 하지마라!
노자와 21세기(상)
새 먼나라 이웃나라
부자 아빠 가난한 아빠
해리포터와 마법사의 돌 제1권(상)
예제를 보면 "★"를 사용했는데 [메모장]에서 자주 사용되는 특수문자의 지정방법을 간단히 알아보겠
습니다.
지정문자 표현문자 비 고
ㄱ 부호 문자 ! ' " : ; ? _ / ^·.。………
ㄴ 괄호 문자 < > 〔〕〈〉《》「」『』【】………
ㄷ 수학기호 문자 ± × ÷ ≠ ≤ ≥ ∞ ∴ ………
ㄹ 단위 문자 ℃ Å ¢£¥≒ ㎠㎡㎢㎤………
ㅁ :::
도형 문자
:::
☆ ※ ★ ● ◎ ◀ ♠ ♡ ☎ ☞ ………
:::
지정문자를 누르면 검은 블록커서가 준비되어져 있을 것입니다.
그 상태를 그대로 유지하여 키보드 좌측 하단을 보면 [한자]라는 단추가 보이시지요?
그것을 눌러 보면 이번엔 모니터 우측하단에 특수문자들이 나열되어진 것을 확인 하실 수 있을 것입
니다.
무슨 숨은 그림찾기 하는 것 같죠?
▶ 결과 보기 ◀