[생활코딩] WEB1(HTML_05) 부모 자식과 목록

* Windows 운영체제 기준으로 작성되었습니다.

 

§ 부모 자식과 목록 → Click!

 

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

이렇게 parent 태그에 포함된 child 태그를 자식 태그라고 하며, child 태그를 포함하는 parent태그를 부모 태그라고 합니다. (실제론 <parent>와 <child>라는 이름의 태그는 없으며 태그 사이의 관계를 표현하기 위해 저렇게 표현해보았습니다.)

<p>
	<a href="https://opentutorials.org">opentutorials</a>
</p>

위의 태그를 보면 p 태그가 a 태그의 부모, a 태그가 p 태그의 자식임을 알 수 있습니다. 하지만 항상 a 태그가 p 태그의 자식이다, p 태그가 a 태그의 부모이다라고 정해져 있는 것은 아님에 유의합시다. 몇 몇 태그의 경우에는 부모, 자식 관계처럼 고정 관계의 태그들도 있습니다. 아래에서 공부할 태그들인 <li></li>, <ul></ul> 태그들도 부모 자식 관계가 고정인 태그들입니다.

 

이번에는 목차를 만들어 볼 예정입니다. 지난번에 만들어놓았던 html 위 쪽에 간단한 목차를 써주고, 목차답게 줄바꿈 처리도 해주며 숫자도 붙여보았습니다.

웹 페이지에서 목차(목록)를 쓸 때 사용하는 태그 리스트 <li>를 사용해봅시다. 아까 사용했던 <br>태그를 지우고 목차의 숫자 앞에 <li>, 현재 <br>태그의 위치에 닫는 태그 </li>를 써줍니다.

<li>"1. 목차1"</li>
<li>"2. 목차2"</li>
<li>"3. 목차3"</li>

<li> 태그의 부모 태그인 <ul>을 사용하면 어디서부터 어디까지가 서로 연관된 항목인지를 경계(grouping) 지어 줄 수 있습니다.

<ul>
  <li>"1. grouping할 목차1"</li>
  <li>"2. grouping할 목차2"</li>
  <li>"3. grouping할 목차3"</li>
</ul>

<ul>
  <li>"grouping할 새로운 목차1"</li>
  <li>"grouping할 새로운 목차2"</li>
  <li>"grouping할 새로운 목차3"</li>
</ul>

이번엔 <ul> 태그를 지우고, <ol>태그를 써보며, 앞서 적었던 index 번호 1, 2, 3을 지워봅시다. 아래쪽에 예시를 보기 위해 작성하였던 목차1, 목차2, 목차3 역시 지웁니다. <ol> 태그를 사용하면 자동으로 목차들에 indexing이 됨을 볼 수 있습니다. 이 <ol> 태그 역시 <li> 태그의 부모 태그입니다.

<ol>
  <li>"자동으로 넘버링 하고싶은 목차1"</li>
  <li>"자동으로 넘버링 하고싶은 목차2"</li>
  <li>"자동으로 넘버링 하고싶은 목차3"</li>
</ol>

<ul>과 <ol> 모두 "l"을 가지고 있습니다. 여기서 ol은 ordered list의 약자이고, ul은 unordered list의 약자입니다.