리스트 사용하기

developsy·2022년 5월 8일
0
<body>
    <h1>My upcoming challenges!!!!</h1>
    <p><a href="index.html">View today's challenge</a></p>
    <p>Repeat what i learned about HTML & CSS</p>
    <p>Do the exercises on HTML & CSS</p>
    <p>Dive deeper into HTML & CSS and build more complex websites</p>
  </body>

에서

<p>Repeat what i learned about HTML & CSS</p>
<p>Do the exercises on HTML & CSS</p>
<p>Dive deeper into HTML & CSS and build more complex websites</p>

는 서로 관련된 정보들이다. 이 정보들을 단락으로 표시해도 되긴 하나 의미론적 관점에서 옳다고 할 수 없으므로 리스트 요소를 사용한다. 의미론적인 관점에서 리스트를 사용한다는 점이 중요하다고 한다.

리스트 요소는 두 종류가 있으며, 각각의 스타일은 서로 다르다. 이는 다른 개발자나 브라우저에 내가 입력한 내용의 의미 체계가 무엇인지 정확히 알리기 위해서이다.

  1. ol(ordered list): 특정 순서로 이루어진 항목이 있는 목록.
    Ex) 월 화 수 목…

  2. ul(unordered list): 순서가 중요하지 않다. 서로 관련된 정보가 들어있다. 각 항목을 리스트로 묶어 두는게 중요한 경우에 사용한다.
    Ex) 토마토 사과 바나나를 슈퍼에서 살 경우, (토마토, 사과, 바나나)와 (바나나, 토마토, 사과)는 차이가 없음.

리스트의 항목은 li태그를 이용하여 나타낼 수 있다. 순서를 유지해야 하므로 ol을 사용하여 리스트를 만들었다.

<ol>
      <li>Repeat what i learned about HTML & CSS</li>
      <li>Do the exercises on HTML & CSS</li>
      <li>Dive deeper into HTML & CSS and build more complex websites</li>
</ol>


페이지에 들어와보니 ol의 항목에 각각 번호가 붙어있는 것을 확인할 수 있다. ul이라면 글머리 기호가 붙는다고 한다.

profile
공부 정리용 블로그

0개의 댓글