HTML 태그 배우기 4탄 - 서식 관련, 글꼴 관련, 목록 관련 기본 태그 익히기 -

지난 강좌에서는 여러 가지 글자 모양을 지정하는 태그들을 공부했습니다. 어떻게 다들 기억나시나요?ㅎ
저도 기억이 가물가물 하네요ㅎ; 제가 쓰고도 말이죠...

뭐... 아무튼!! 이번강좌에서는 서식, 글꼴, 목록 관련 기본 태그들을 알아보고 간단한 예를들어 숙지하는 시간을 가져보도록 하겠습니다. 그럼 가볼까요?

지난 글 보기

초보도 만들 수 있는 블로그 스킨 제작 가이드!! 1탄, HTML이란 무엇인가?? - 웹 문서편 -

초보도 만들 수 있는 블로그 스킨 제작 가이드!! 2탄, HTML문서 만들기 - HTML 구조 분석 및 실전 예제 -

HTML 태그 배우기 3탄 - 글꼴, 글자 색깔, 글자 강조 태그 익히기 -

학습 목표

● 기본적인 태그의 사용법을 이해한다.
● 서식, 글꼴, 목록 관련 태그 사용하는 방법을 익힌다.
● 다양한 태그를 살펴보고, 직접 사용해 본다.

1. 서식 관련 태그 요약

태그	기능 및 속성
<BR>	기능 : 한 줄 바꿈
<P>	기능 : 문장의 단락 구분 속성 : ALIGN=LEFT ; RIGHT ; CENTER
<CENTER>..</CENTER>	기능 : 가운데 정렬
<DIV>......</DIV>	기능 : <P>태그와 거의 비슷한 역할을 하지만, 마지막에 줄을 띄어주지는 않음 속성 : ALIGN=LEFT ; RIGHT ; CENTER
<HR>	기능 : 줄 긋기 속성 : SIZE=n, WIDTH=n(%), CORLOR="#색깔코드", NOSHADE, ALIGN="LEFT ; RIGHT ; CENTER"

2. 글꼴 관련 태그 요약

태그	기능 및 속성
<B>......</B>	기능 : 굵은 글씨
<I>.......</I>	기능 : 이탤릭체
<U>......</U>	기능 : 밑줄
<TT>......</TT>	기능 : 타이프체
<SUB>......</SUB>	기능 : 아래 첨자
<SUP>......</SUP>	기능 : 위 첨자
<BLINK>.....</BLINK>	기능 : 깜빡이는 글자
<STRIKE>.....</STRIKE>	기능 : 텍스트 가운데 줄을 그음
<BLOCKQUOTE>......</BLOCKQUOTE>	기능 : 인용문 등에 사용. 자동으로 줄을 바꿔주고 들여쓰기 를 한채 나타남.
<!-- -->	기능 : 주석을 달 때 사용. 지정한 글자는 브라우저에 나타나 지 않음

3. 목록 관련 태그 요약

태그	기능 및 속성
<UL>......</UL>	기능 : 순서가 필요없는 목록을 적을 때 사용 <LI> 태그와 함께 사용. 속성 : TYPE=DISC ; CIRCLE ; SQUARE
<OL>.....</OL>	기능 : 순서가 필요한 목록을 적을 때 사용. <LI>태그와 함께. 옵션으로 'START='하고 시작번호를 지정할 수 있다. 1로 지정하면 1부터 시작하고, 3으로 지정하면 3부터 시작하는 목록이 작성된다. 속성 : A ; a ; I ; i ; 1
<LI>	기능 : 단일태그로 조그만 동그라미나 네모같은 아이콘을 보여준다. 속성 : DISC ; CIRCLE ; SQUARE <OL>태그와 쓰일 때는 TYPE=""하고 3가지 속성을 지정한다.
<DL>.....</DL> <DT>, <DD>	기능 : 제목과 내용을 표현하고 싶은 목록을 지정. <DT>, <DD>태그와 함께 쓰인다. <DT>태그에는 제목을 적고 <DD> 태그에는 내용을 적는다.

실전 예제

그럼, 위의 태그들 중에서 한가지만 예를 들어 설명해 보도록 하겠습니다. (너무 많으니까요...)

제가 사용할 태그는 <HR>태그 입니다. <HR>태그를 사용하여 수평선을 넣을 수 있는 데요,
주로 단락과 단락을 구분하기 위해 사용하게 됩니다.
<HR> 은 단독태그로 SIZE, WIDTH, ALIGN, NOSHADE 등의 속성을 가지고 있습니다.

속성을 사용하지 않으면 기본적으로 줄 길이가 화면크기에 맞추어 나오며 음각된 선이 그어집니다.
그러나 NOSHADE 속성을 주게되면 음각되지 않고 기본색으로 나오게 되지요...