의미가 없는 컨테이너 요소
태그 중에는 태그 자체에 아무 의미가 없지만 무언가를 담거나 어떤 요소를 묶기 위한 용도로 사용되는 태그들이다. 스타일을 주거나 서버에 보내는 데이터를 담기 위한 용도로, 사용 빈도가 높다.
< div >
division 의 줄임말로, 블록 레벨 태그이다. 블록 레벨 요소는 한 라인을 다 채워서 표현이 된다. < p >태그가 블록 레벨 요소이다.
< span >
인라인 레벨 테그이다. 인라인 레벨 요소는 라인 위에 조금씩 표현이 되고, 블록 레벨 요소 안에 들어가게 된다. < b >,< i >,< u >,< s >태그가 인라인 레벨 태그이다.
리스트 < li >
일련된 항목들이 나열된 것을 리스트라고 한다. 요즘 웹 사이트에는 리스트로 표현될 만한 요소들이 많아서 자주 사용되는 태그들이다.
네이버 홈페이지에서 예시를 찾아보면 예전 실시간 검색어 순위나 뉴스 섹션, 쇼핑 상품들도 리스트라고 볼 수 있다. 내용이 많은 사이트일수록 리스트로 표현될 만한 요소들이 많이 있다.
리스트의 종류
- < ul >(unordered list)
나열된 항목들이 순서와 상관이 없을 때 쓰는 리스트
예) 음식의 재료
<body>
<ul><!--부모태그-->
<li>콩나물</li><!--자식태그-->
<li>간장</li>
</ul>
</body>- < ol >(ordered list)
ui와는 반대로 나열된 항목들이 순서와 관려닝 있을때 사용되는 리스트
브라우저에서 순서가 매겨져서 보인다.
예) 음식의 조리 순서
<body>
<ol>
<li>냄비에 멸치 육수를 넣는다</li>
<li>콩나물을 넣고 냄비 뚜껑을 닫는다.</li>
</ol>
</body>- < dl >(definition list)
용어와 그에 대한 정의를 설명할 때 사용되는 리스트.
ul과 ol은 항목들을 단순히 나열하는 것이고, dl 리스트는 용어와 설명이 하나의 세트를 이루고 하나 이상의 항목으로 리스트가 이루어지는 구조이다. dd태그는 한개만 쓸 수 있는 건 아니다.
<body>
<dl>
<dt>언더독 효과</dt> <!--용어-->
<dd>사람들이 약자라고 믿는 주체를 응원하게 되는 현상</dd><!--용어의 정의 또는 설명-->
<dt>피그말리온 효과</dt>
<dd>타인의 기대나 관심으로 인하여 능률이 오르거나 결과가 좋아지는 현상</dd>
</dl>
</body>리스트 태그의 중첩
위의 1번 태그에서 < ul >과 < li >태그는 중첩된 형태이다.
< ul >태그가 부모 태그이고 < li >태그가 자식 태그이다.
< ul >태그의 자식으로는 < li >태그만 올 수 있고 < div >태그나 < p >태그 등은 올 수 없다.
< li >태그는 < ul >태그나 < ol >태그만 부모로 가질 수 있고, 자식으로 < ul >, < ol >,< div >나 < p >가 올 수 있다.
이 때문에 중첩이 가능해진다.
리스트의 경우에는 아래와 같이 중첩이 가능하다.
<ol>
<li>
<ul>
<li>
</li>
</ul>
</li>
</ol>