부모-자식 관계: 목록 태그

✅ 부모-자식 관계

태그 간의 부모(parent)와 자식(child) 관계는 웹 페이지의 구조를 표현하는 핵심 개념 중 하나입니다. 이러한 관계를 이해하는 것은 웹 개발 및 웹 페이지 디자인에 있어서 중요한 역할을 합니다.

<parent>
    <child></child>
</parent>

 

💡 부모 태그 (Parent Tag)

부모 태그란 다른 태그(자식 태그)를 포함하고 있는 태그를 가리킵니다. 이것은 웹 페이지의 구조를 계층적으로 표현하는 데 도움이 됩니다. 부모 태그의 역할은 자식 태그를 그룹화하고 정리하는 것입니다. 이러한 부모-자식 관계는 웹 페이지의 레이아웃 및 디자인을 지정하는 데 필수적입니다.

 

💡 자식 태그 (Child Tag)

자식 태그는 다른 태그(부모 태그) 내에 포함된 태그를 가리킵니다. 이러한 구조는 웹 페이지의 세부 요소를 정의하고 각 요소 간의 관계를 명확하게 표현합니다. 예를 들어, 웹 페이지의 헤더, 본문, 사이드바 및 푸터는 부모-자식 관계로 나타낼 수 있으며, 이를 통해 페이지의 구조를 구체화할 수 있습니다.

 

---

이 관계는 직장의 상하 관계와 유사하게 필요에 따라 변경될 수 있습니다. 그러나 몇몇 태그는 부모와 자식 사이의 고정된 관계를 가집니다.

 

✅ 고정된 관계인 태그

💡 목차 태그

목차를 표현하기 위해 사용되는 태그입니다. 목차 항목은 영어로 "list"라는 용어로 표현되며, 목차 항목의 첫 두 글자는 "li"입니다. 목차는 웹 페이지에서 정보를 구조화하고 사용자에게 제공하는 중요한 방법 중 하나입니다. 예를 들어, 블로그 게시물의 목차, 제품 목록, 또는 메뉴 항목은 목차를 사용하여 구현할 수 있습니다.

---

목차를 둘러싸기 위해 사용되는 태그입니다. 이 경계를 설정하는 데 주로 <ul> (Unordered List) 태그가 활용됩니다. <ul> 태그와 <li> 태그는 서로 밀접한 관계를 가지며 함께 사용됩니다. 목차는 주로 순서 없는 목록(<ul>) 또는 순서 있는 목록(<ol>)으로 나타낼 수 있습니다.

---

 

순서 있는 목록은 항목 간의 순서가 중요한 경우 사용됩니다. 예를 들어, 웹 사이트의 사용자 가이드나 절차서를 나열할 때 순서 있는 목록이 필요합니다. 

<ol>
    <li>작업 1: 회원 가입</li>
    <li>작업 2: 로그인</li>
    <li>작업 3: 프로필 편집</li>
</ol>

위의 코드에서 <ol> 태그는 각 작업의 순서를 나타내며, <li> 태그들은 각 작업을 나열합니다.