16. HTML List

1. HTML List

 

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><li> 태그로 감싸줍니다.

그리고, 목록 전체를 <ol> 태그로 감싸줍니다.

 

<ol>은 ordered list라는 의미로, 결과 화면과 같이 목록에 숫자를 달아줍니다.

 

왼쪽 결과 화면을 보면, 우리는 숫자를 쓰지 않았는데 자동으로 numbering 되었네요.

 

숫자 말고 다른 것도 가능합니다.

<ul>
  <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>
</ul>

<ul> 태그는 unordered list라는 의미입니다. 숫자 없는 목록을 표현해줍니다.

 

이제는 목록 아이템 앞에 작은 원이 생겼습니다.

 

이렇게 브라우저는 태그에 따라 스타일을 부여합니다.

 

아무 스타일도 넣고 싶지 않다고 li태그만 사용하면 안 됩니다.

 

css를 이용해서 다른 방식으로도 가능합니다.

ul {
  list-style: none;
}

이번엔 앞의 원이 다 없어졌습니다.

 

이번엔 꾸며 볼까요?

 

저는 앞에 기다란 작대기를 하나 넣고 싶습니다.

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

앞쪽에 검은색 라인이 하나 생겼습니다.

 

그런데 선이 위에서 했던 숫자나 원과 달리 너무 멀리 있습니다. 

 

수정을 해보도록 합시다.

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

제가 원하는 거리만큼 선을 이동시켰습니다.

 

음.. 위, 아래로 나온 선이 맘에 안 드는군요.

 

다시 한번 수정을 해보도록 하겠습니다.

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

위아래 선을 적절하게 조정하였습니다.

 

li 태그도 수정이 가능합니다!

li {
  padding-bottom: 10px;
}

padding 간격을 줘서 list들의 간격이 넓어졌습니다.

 

그런데 혹시 padding이 아니라 margin을 생각하셨나요?

네, padding-bottom 대신 margin-bottom을 사용하여도 똑같은 결과가 나옵니다.

 

li는 테두리를 갖고 있지 않으니, 여백이 padding 쪽인지, margin 쪽인지 알기 어렵습니다.

그냥 <li>리스트 아이템 아래에 여백만 추가하면 됩니다.

앞으로 둘 중에 어떤 property를 쓰셔도 상관이 없습니다.

 

그런데 마지막 목록인 "Search" 밑에도 여백이 생겨서

목록 왼쪽 세로줄이 목록 밑으로 넘쳐버렸습니다.

 

목록 아이템의 마지막 것만 padding-bottom을 빼고 싶습니다.

CSS selector를 표기하는 방법 중에해당 태그의 첫 번째 순서인지, 마지막 순서인인지,

홀수/짝수 인지 알 수 있는 selector 표기법이 있습니다.

selector:first-child{
}

selector:last-child{
}

selector:nth-child(odd){
}

selector:nth-child(even){
}

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

 

다음 css를 추가해봅시다.

li:last-child {
   padding-bottom: 0;
}

Search의 padding-bottom값이 0이 되어 선이 줄어든 것을 확인이 가능합니다.

 

이제 마지막으로 list에 색깔일 입혀 볼까요?

li:nth-child(odd) {
  background: green;
}

li:nth-child(even) {
  background: yellow;
}