100일만에 개발자 되기!

6일차(2) : 리스트 이해와 리스트 만들기

Sia Le Blanc 2022. 11. 29. 19:27

지금부터는 리스트라는 새로운 개념을 배워볼 것이다.

리스트는 크게 대단한 것이 아니다.

지금까지 우리가 작성한 코드를 보면 보통 이런 식이다.

 

    <p>Repeat what I learned about HTML & CSS</p>
    <p>DO the ecercises on HTML & CSS</p>
    <p>Dive deeper into HTML & CSS and build more complex websites</p>
 

위와 같이 한 줄에 한 태그를 사용한다.

이 표기법이 틀린 것은 아니지만 의미론적으로 따지면 조금 더 생각해볼 여지가 있다.

 

위의 예시를 가지고 리스트를 보여주기 전에 어떤 리스트들이 존재하는지 보여주겠다.

첫 번째는 순서가 있음을 알리는 리스트 태그 <ol>이다

ol은 ordered list의 줄임말이다.

한글로 하면 정돈된 리스트의 뜻이다.

이는 순서를 내포하는데 바로 예시를 보여주겠다.

 

<body>
    <h1>I am sick</h1>
    <a href="index.html">View Todays Challenge</a>
    <p>Repeat what I learned about HTML & CSS</p>
    <p>DO the ecercises on HTML & CSS</p>
    <p>Dive deeper into HTML & CSS and build more complex websites</p>

    <ol>
      <li>Monday</li>
      <li>Tuesday</li>
      <li>Wednesday</li>
    </ol>

  </body>

지금부터는 맥락상 필요 없는 부분의 코드는 생략할 것이다.

만약 코드에 변경을 하면 표기할 테니 걱정하지 말도록 하자!

 

위 코드를 보면 <ol>의 사용법이 바로 나와있다.

ordered list 아래에 3개의 list가 존재한다.

이는 부라우저에서 어떻게 나타날까?

 

위의 세 줄의 단락과 같이 한 줄다 한 단어가 있지만 왼쪽을 자세히 보면 숫자가 붙어있다.

각 리스트에 순서와 번호가 붙는것이 마로 <ol>의 역할이자 기능이다.

 

이와 비슷하게 <ul>이 존재하는데 이는 Unordered list의 준말이다.

정돈되지 않은 리스트를 뜻하는 게 쉽게 말하자면 <ol>같이 순서가 붙는 리스트가 아니라는 뜻이다.

이것도 예시와 함꼐 살펴보자.

 

  <body>
    <h1>I am sick</h1>
    <a href="index.html">View Todays Challenge</a>
    <p>Repeat what I learned about HTML & CSS</p>
    <p>DO the ecercises on HTML & CSS</p>
    <p>Dive deeper into HTML & CSS and build more complex websites</p>

    <ol>
      <li>Monday</li>
      <li>Tuesday</li>
      <li>Wednesday</li>
    </ol>

    <ul>
      <li>Apples</li>
      <li>Bananas</li>
      <li>Tomatoes</li>
    </ul>
  </body>

<ol>과 <ul>을 모두 작성해보았다.

그리고 브라우저에 어떻게 나타나는지 비교해보자.

 

 

확실히 두 태그는 차이가 있다는 것을 알 수 있다.

 

이렇게 각 단어 또는 문장을 한 뭉탱이로 묶어서 순번을 매기거나 또는 함께 정리하는 것을 리스트라고 한다.

 

 

그렇다면 포스팅을 마치기 전에 독자들에게 과제를 또 주겠다.

 

 <body>
    <h1>I am sick</h1>
    <a href="index.html">View Todays Challenge</a>
    <p>Repeat what I learned about HTML & CSS</p>
    <p>DO the ecercises on HTML & CSS</p>
    <p>Dive deeper into HTML & CSS and build more complex websites</p>
    </ul>
  </body>

<ol>과 <ul>을 우선 모두 지우고, 3개의 단락, <p> 태그 안에 있는 3개의 문장을 리스트로 나타내 보길 바란다.