💿 List

💾 li 태그

목록을 표현하는 태그 '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>

💾 ol 태그

ordered list 라는 뜻으로 아래 사진과 같이 list에 숫자를 달아줌.

💾 ul 태그

unordered list 라는 뜻으로 숫자없는 list를 표현해줌.

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

💾 li 태그 사용시 주의점

스타일을 적용하지 않는다고 ol 태그 또는 ul 태그를 사용하지 않으면 안됨.
항상 사용할 것!

💾 CSS로 스타일 적용하기

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

list-style 프로퍼티에 none을 적용하면 ul 태그 사용시 자동으로 붙는 동그라미를 지울 수 있음.

ul 태그의 border를 활용해 스타일을 바꿔줄 수 있음.

border 활용시 위치 조정은 padding과 margin을 이용함.

li:first-child{
	padding-top: 0px;
}
li:last-child{
	padding-bottom: 0px;
}
li:nth-child(odd){
	color: gray;
}
li:nth-child(even){
	color: blue;
}

리스트의 목록도 따로 지정해 각각 스타일을 지정해 줄 수 있음.