<li>
가 <ul>
의 자식 태그여야 하는 이유HTML에서 정해놓은 기준이기 때문이다. <li>
태그는 리스트 항목을 나타내는 용도로 사용하며 <ul>
태그나 <ol>
태그의 자식 요소로 사용한다. 만약 <li>
태그를 단독으로 사용시 브라우저의 디폴트 스타일링이 적용되어 <li>
태그 밖에 <ul>
태그를 자동으로 생성한다.
<ul>
vs<ol>
- ul ol 정의 Unordered List Ordered List 용도 순서가 중요하지 않은 리스트 생성 순서가 중요한 리스트 생성 display block block
display | inline | block |
---|---|---|
가로폭 | 내용물에 맞게 설정 | 전체를 차지(브라우저창이나 부모 요소의 크기에 따라 가로폭 자동 조절) |
세로폭 | 설정 불가능(내용물이 텍스트라면 line-height로 설정 가능) | 내부 요소의 높이에 맞게 자동으로 설정되나, height 속성으로 직접 조절 가능 |
한 줄에 나란히 위치할 수 있는 요소 | 다른 인라인 요소 및 텍스트 | 다른 요소와 같이 위치할 수 없음(내부에 위치하는 건 가능) |
해당 태그 | span, a, img, input, button | div, h1~h6, p, form, ul, ol, li |
block
<div>
<h1>제목</h1>
<p>내용</p>
</div>
inline
<p>인라인 요소는 <span>필요한 만큼의 공간만 차지</span>합니다.</p>