목록 List(#11)

html 에서 목록을 표현하고 싶을 때 list를 사용합니다

list에는 ul, ol 가 있고 자식요소인 li가 존재합니다

 

ul 은 단순히 나열하는 곳에 사용합니다

 

ol 은 태그는 실시간 검색어, 요리 레시피 등 순서가 중요한 곳에 사용합니다

 

그리고 그 안에 항목을 나열할 땐 li 태그를 사용합니다

 

ul과 ol의 자식요소는 되도록이면 li 태그만 사용하도록 합시다 div 태그라던지, a 태그 같은 것은 표준법에 어긋납니다

 

꿀팁을 드리자면 li 태그를 5개 일일이 만들 필요 없이 li*5 하게되면 5개의 li 클래스가 생성됩니다

li 내용 옆 점은 신경 쓰지 않아도됩니다 브라우저에서 제공하는 나름의 스타일이라고 보면 됩니다 css로 간단히 없앨 수 있으니 이 내용은 나중에 쓰도록 하겠습니다

1 2 3 4 5 6 7 8 9

<h1>개발은 처음이라</h1> <ul> <li>프론트엔드 개발자</li> <li>백엔드 개발자</li> <li>디자이너</li> <li>퍼블리셔</li> <li>기획자</li> </ul>

 

ol 태그는 순서가 중요한 태그이므로 브라우저에서 이렇게 표현을 해줍니다

1 2 3 4 5 6 7 8 9

<h1>급상승 검색어</h1> <ol> <li>1번</li> <li>2번</li> <li>3번</li> <li>4번</li> <li>5번</li> </ol>