HTML/CSS - 13. List

1. List

목록을 표현하는 태그는 <li>이다. 

<ol>
  <li>List</li>
  <li>Set</li>
  <li>HashMap (Dictionary)</li>
  <li>Queue</li>
  <li>Stack</li>
  <li>Tree</li>
  <li>Sorting</li>
  <li>Search</li>
</ol>

목록에서 List, Set, HashMap, Search까지 목록 아이템 하나하나를 <li> 태그로 감싸주고 목록 전체를 <ol> 태그로 감싸준다.

<ol>은 ordered list라는 의미이다. <ol>을 쓸 경우 <ol>안에 있는 목록들 앞에 자동으로 numbering을 해준다.

그 반대인 <ul>태그도 있다. <ul> 태그는 unordered list라는 의미로, 숫자 없는 목록(굵은 점)을 표현해준다.

여기서 주의할 점은 아무 스타일도 넣고 싶지 않다고 <li> 태그만 사용해서는 안된다. 목록은 항상 <ul>이나 <ol> 태그로 감싸야한다.

ul의 굵은 점이 마음에 들지 않는다면 css를 적용하여 삭제할 수도 있다. 삭제하는 법은 아래 코드와 같다.

ul {
  list-style: none;
}

List와 css를 사용하면 위 그림과 같은 형태도 만들 수 있다. 이 방법은 아래 코드와 같다.

ul {
  list-style: none;
  border-left: 3px solid black;
}

그림을 보면 글자와 선 사이가 벌어져 있는 것을 볼 수 있다. 이것은 브라우저(크롬)에서 default로 margin, padding등을 추가해놔서 그렇다. 

ul {
  list-style: none;
  border-left: 3px solid black;
  padding: 0;
}

ul {
  list-style: none;
  border-left: 3px solid black;
  padding: 15px;
}

이렇게 padding값을 이용해서 간격을 조정해 줄 수 있다. padding이 아니라 margin을 사용해도 무관하다. li는 테두리를 갖고 있지 않아서, 여백이 padding 쪽인지, margin 쪽인지 알기 어렵다. 

 

CSS selector를 표기하는 방법중에 해당 태그의 첫 번째 순서인지, 마지막 순서인지, 홀수/짝수 인지 알 수 있는 selector 표기법이 있다.

selector는 tag, .class, #id 모두 가능하다.