생활코딩 웹 제작 스터디 [WEB1 - HTML & Internet] - 태그간의 관계(Parent, Child)

생활코딩이라는 유용한 사이트를 통해 웹 만들기 스터디를 시작했다. 현재 정보처리기사 실기, 파이썬, 웹 이렇게 세 가지의 방향으로 공부를 진행하고 있다. 일상에서 언급했던 것과 같이 내 시간표는 그렇게 움직인다. 앞으로 이 카테고리에서는 공부했던 웹의 내용을 잊지 않고 기억하기 위해 기록할 것이다.

---

부모, 자식 태그는 부모, 자식의 관계처럼 고정된 관계를 나타낸 태그들이다. 

먼저, 목차를 나타내는 태그는 list(목차)를 따온 <li>이다. 

<li> 1. content </li>     결과값--->    1. content

<li> 2. content </li>     결과값--->    2. content

<li> 3. content </li>     결과값--->    3. content

 

하지만 또 다른 목차를 추가한다면 위 목차와는 구분이 지어지질 않는다. (쭉 이어져서 목록이 작성이 된다는 뜻)

각 목록은 다른 목록과 구분할 수 있도록 경계가 필요하다. 따라서 이 때 사용하는 태그가 <ul>이다.

 

<ul>

  <li>1. content</li>

  <li>2. content</li>

  <li>3. content</li>

</ul>

<ul>

  <li>1. different content</li>

  <li>2. different content</li>

  <li>3. different content</li>

</ul>

 

위 처럼 <ul>태그를 사용하면 각 목차의 특성에 맞게 구분이 되어 웹에 목차가 작성이 된다. ul이라는 태그는 unordered list(비정렬된 목차)의 약어이기 때문에 추가적으로 더 많은 양의 목차를 일일이 입력하는 것은 중노동이다. 이를 해결하기 위해 <ol>이라는 태그가 등장했다. ordered list(정렬된 목차)의 약어로써 자동적으로 순번이 매겨지기 때문에 유용하기 사용할 수 있다.