HTML에서 리스트의 유용성

📚 HTML에서 리스트의 유용성

HTML에서 리스트는 매우 유용하다. 특히, 리스트는 웹 페이지에서 정보를 정리하고 표시하는 데 유용하다. 따라서 리스트를 잘 사용하면 논리정렬하고, 더욱 깔끔한 계층적 구조를 표현 가능하다.

HTML에서 리스트를 작성하고 스타일링하는 방법에 대해 알아보며 리스트를 통해 깔끔한 Styling을 하는 방법에 대해 학습해보자.

---

리스트(List)

📌 순서 있는 리스트(Ordered List)

순서가 중요한 목록을 작성할 때 <ol> 태그를 사용한다. 각 항목은 <li> 태그로 표시한다.

예를 들어, 인기 음식 순위는 다음과 같이 나열할 수 있다.

<h2>인기 음식 순위</h2>
<ol>
  <li>김치찌개</li>
  <li>삼겹살</li>
  <li>비빔밥</li>
  <li>불고기</li>
  <li>된장찌개</li>
</ol>

---

📌 순서 없는 리스트(Unordered List)

순서가 중요하지 않은 항목들을 나열할 때는 <ul> 태그를 사용한다. 각 항목은 <li> 태그로 표시한다.

예를 들어, 다양한 요리 종류를 다음과 같이 나열 가능하다.

<h2>요리 종류</h2>
<ul>
  <li>한식</li>
  <li>중식</li>
  <li>양식</li>
  <li>일식</li>
</ul>

---

📌 리스트 스타일링

1. 순서 있는 리스트 스타일 변경

순서 있는 리스트에서는 type 속성으로 기호를 바꿀 수 있다.

예를 들어, type='I' 속성을 통해 로마 숫자로 변경 가능하다.

<ol type="I">
  <li>김치찌개</li>
  <li>삼겹살</li>
  <li>비빔밥</li>
</ol>

2. CSS를 이용한 스타일링

CSS list-style 속성을 이용해 기호의 스타일 또한 변경 가능하다.

예를 들어, list-style: none; 을 통해 기호를 제거할 수 있다.

ul {
  list-style: none; /* 기호 제거 */  
}

3. 리스트 항목을 한 줄로 표시

리스트 항목을 한 줄로 표시하고 싶을 때는 display: inline-block을 활용할 수 있다.

li {
  display: inline-block;
}

cf> 리스트 스타일링 활용

위와 같은 방법들을 통해 HTML 코드상으로는 목록이라는 의미가 있지만, 겉모습은 내가 원하는 대로 꾸미고 싶을 때 위와 같은 방법을 많이 사용한다.

/* css */
ul > li {
    display: inline-block;
    border : 2px solid #000000;
    border-radius: 20px;
    padding: 10px;
}

 <!-- html -->
<h2>요리 종류</h2>
<ul>
    <li>한식</li>
    <li>중식</li>
    <li>양식</li>
    <li>일식</li>
</ul>

---

Outro

List는 계층이 있는 데이터를 일목요연하게 보여줄 수 있는 매우 유용한 UI 요소이다. 리스트에 대해 공부하고 다양한 자료를 찾아볼수록, 사용자에게 명확하고 직관적인 정보 제공을 위해 리스트를 효과적으로 스타일링하는 것이 중요하다는 것이 더더욱 느껴진다.

이러한 리스트의 목적을 항상 고려하며 스타일하여 사용자 접근성을 높일 수 있도록 항상 명심하자.