반응형
html태그 중 리스트 혹은 목록을 나타내는 태그가 있다.
ol태그와 ul태그가 그 태그이다.
이 태그들을 상황에 맞게 알맞게 사용하는 것이 중요하다.
ol과 ul 각 태그는 반드시 li태그와 함께 사용이 된다.
ol, ul태그의 안에는 li태그 외에는 다른 태그는 바로 자식 선택자로 위치할 수 없다.
<ul>
<li>순서가 의미가 없다.</li> (o)
<div></div> (x)
<li>
<div></div> (o)
</li>
</ul>div를 사용하고 싶다면 li태그를 먼저 만든 후에 그 안쪽으로 div태그를 작성해야한다.
1. ol 태그 (순서 있는 목록)
ol태그는 1번 2번 등 순서가 있는 목록을 만들 때 사용된다.
예를 들면, 1등부터 5등까지 순서를 나열하는 경우에서 사용이 된다.
<h1>체육대회 순위</h1>
<ol>
<li>철수</li>
<li>새미</li>
<li>철수세미</li>
<li>영수</li>
<li>박수</li>
</ol>위의 소스와 같이 출력을 하면 아래와 같이 노출이 된다.
ol태그 안 li태그에 1, 2, ~ 5번 등 숫자를 따로 표시하지 않아도
브라우저는 ol태그의 사용에 맞춰 스스로 순서를 부여한다.
2. ul 태그 (순서 없는 목록)
ul태그는 앞서 소개한 ol태그와는 다르게
순서가 정해져있지 않은 목록을 나타낼 때 쓰인다.
단순한 리스트의 나열이나 상품의 나열 등에서 쓰인다.
<h1>운동회 식사</h1>
<ul>
<li>오리훈제</li>
<li>쇠고기 무국</li>
<li>김치</li>
<li>치즈 등갈비</li>
<li>양장피</li>
</ul>위의 소스와 같이 출력을 하면 아래와 같이 노출이 된다.
왼편에 숫자가 아닌 원형의 점이 찍히면서
따로 순서에 의미가 없는 일반적인 리스트가 노출된다.
위와 같이 ol과 ul은 각각의 의미에 맞게 사용을 해야한다.
3. 리스트 기본 스타일 제거
ol은 왼편에 숫자, ul은 왼편에 점을 제거하기 위해선
css에 list-style 속성으로 조정을 해야한다.
<style>
ol, ul{list-style:none;}
</style>
<body>
<h1>체육대회 순위</h1>
<ol>
<li>철수</li>
<li>새미</li>
<li>철수세미</li>
<li>영수</li>
<li>박수</li>
</ol>
<h1>운동회 식사</h1>
<ul>
<li>오리훈제</li>
<li>쇠고기 무국</li>
<li>김치</li>
<li>치즈 등갈비</li>
<li>양장피</li>
</ul>
</body>
위와 같이 li태그에 기본적으로 들어가던 숫자나 동그란 점이 사라질 것이다.
반응형
'Frontend > HTML' 카테고리의 다른 글
| [html 태그] dl, dt, dd 태그 (정의형 목록) (0) | 2020.03.28 |
|---|---|
| [html 태그] p태그 (0) | 2020.03.25 |
| [html 태그] a태그 (0) | 2020.03.06 |
| Meta tag (메타 태그) (0) | 2020.02.13 |
| HTML5 - Content Model (콘텐츠 모델) (0) | 2020.02.12 |