태그및 css
UL 태그, OL태그, DL태그, LI태그 사용법
컴박사컴수리
2019. 2. 15. 10:48
HTML의 각종 목록 태그에 대해서 알아보도록 하겠습니다. 목록태그를 잘 활용하신다면 웹사이트에서 보기 좋은 목록을 쉽게 만들 수 있습니다. 메뉴를 만들때, 안내표를 만들때 주로 사용합니다.
UI 태그, 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태그가 UI와OL태그의 실질적인 내용 역할을 합니다.
UI태그
UL는 순서가 필요없는 목록을 만들때 사용합니다.
<body>
<UL>
<LI>다음중 동물이 아닌것은?</LI>
<UL>
<LI>사자</LI>
<LI>호랑이</LI>
<LI>코끼리</LI>
<LI>메뚜기</LI>
<LI>원숭이</LI>
</UL>
</UL>
</body>
OL태그
OL태그는 순서가 있는 목록을 만들때 사용합니다.
<body>
<OL type="I">
<LI><HEAD>태그에서 사용하는 태그가 아닌것은?</Li>
<OL>
<LI>META</LI>
<LI>TITLE</LI>
<LI>DIV</LI>
<LI>SCRIPT</LI>
</OL><br>
<LI><FONT>태그의 특성이 아닌것은?</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>
DL태그
DI태그는 기호가 붙지않는 목록으로 문단만으로 목록을 만드는 방식입니다.
<body>
<DL>
<DT>다음중 꽃이 아닌것은?
<DD>벚꽃</DD>
<DD>소나무</DD>
<DD>진달래</DD>
<DD>철쭉</DD>
<DD>코스모스</DD>
</DT>
</DL>
</body>
