[Html] UL 태그, OL태그, DL태그, LI태그 사용법

이번 포스팅에서는 HTML의 각종 목록 태그에 대해서 알아보도록 하겠습니다. 목록태그를 잘 활용하신다면 웹사이트에서 보기 좋은 목록을 쉽게 만들 수 있습니다. 메뉴를 만들때, 안내표를 만들때 주로 사용합니다.

 

UL태그, OL태그, DI태그, LI태그 사용법

태그  비고 
 목록 태그  UL 글머리 기호를 앞에 붙여 목록을 만드는 형식
 OL 번호를 앞에 붙여 목록을 만드는 형식
 DL 기호 없이 문단으로 목록을 만드는 형식
 LI  UI와 OL내부에서 활용되는 태그

1. UL태그는 글머리 기호를 붙여 목록을 만드는 방식으로서가 필요없는 목록만들때 주로 사용합니다. 

2. OL태그는 주로 순서가 필요한 목록을 만들때 사용하며 ol type="속성"을 줘 다양한 형태의 목록을 만들 수 있습니다

3. DL는 기호없이 문단의 여백으로 목록을 만드는 방식입니다.  <DL> 제목은 <DT> 내용은 <DD>태그로 설정합니다. 

4. LI태그는 UI와 OL태그의 안에 들어가는 태그입니다. 이 LI태그가 UL와 OL태그의 실질적인 내용 역할을 합니다.

 

UL태그

UL는 순서가 필요없는 목록을 만들때 사용합니다.

<body>
    <UL>
	<LI>다음중 동물이 아닌것은?</LI>
	<UL>
	  <LI>사자</LI>
	  <LI>호랑이</LI>
	  <LI>코끼리</LI>
	  <LI>메뚜기</LI>
	  <LI>원숭이</LI>
	</UL>
    </UL>
</body>

UL태그

 

OL태그

OL태그는 순서가 있는 목록을 만들때 사용합니다.

<body>
  <OL type="I">
  <LI>&lt;HEAD&gt;태그에서 사용하는 태그가 아닌것은?</Li>
	<OL>
	    <LI>META</LI>
	    <LI>TITLE</LI>
	    <LI>DIV</LI>
	    <LI>SCRIPT</LI>
	</OL><br>
  <LI>&lt;FONT&gt;태그의 특성이 아닌것은?</Li>
	<OL type = "A" start="5">
	    <Li>size</Li>
	    <Li>fontname</Li>
	    <Li>face</Li>
	    <Li>color</Li>
	</OL><br>
  <LI>다음중 HTML 편집기가 아닌것은? </Li>
	<OL type="square">
	    <Li>메모장</Li>
	    <Li>드림위버</Li>
	    <Li>나모 웹에디터</Li>
	    <Li>그림판</Li>
	</OL>
  </OL>
</body>

OL태그

 

DL태그

DL태그는 기호가 붙지않는 목록으로 문단만으로 목록을 만드는 방식입니다.

<body>
  <DL>
    <DT>다음중 꽃이 아닌것은?
	<DD>벚꽃</DD>
	<DD>소나무</DD>
	<DD>진달래</DD>
	<DD>철쭉</DD>
	<DD>코스모스</DD>
     </DT>
  </DL>
</body>

DL태그

 

 

[Html] 문단을 나누는 P태그 사용법

[Html] 테이블(Table) 사용법 총정리(만들기,테두리,병합,정렬,배경색 등등)

[Html] 테이블안에 테이블 충첩하기

[Html] Pre태그 사용법 & 예제

[Html] Margin, Padding 속성의 차이점과 사용법

 

댓글

Designed by JB FACTORY