12 부모 자식과 목록

1.

다음과 같이 <parent>와 <child> 라는 두개의 태그가 있다고 가정 

 

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

 

위 와 같이, 태그가 서로 포함 관계에 있을 때,

포함하고 있는 태그를 부모 태그,

포함된 태그를 자식 태그라고 한다.

 

HTML에 있는 여러 태그는 부모 자식 관계가 유동적으로 변동 된다.

 

그런데, 자식이 있는 곳에 항상 부모가 있고,

부모가 있는 곳에 항상 어떤 특정한 자식 태그가 있는

사이 좋은 태그가 몇가지 있다.

 

2.

 

 

 

앞에서 배웠듯이, 코드상에는 줄바꿈이 되어있지만,

실제 웹 페이지 에서는 1번라인 2번라인 3번라인은 줄바꿈이 되어 있지 않는 모습을 확인할 수 있다.

 

목차답게 줄바꿈이 되면 좋으니, 앞에서 배운 태그를 사용해보자.

 

 

 

그럴듯 하게 변경된 모습이다.

 

그런데, HTML을 만든 사람들이 목차를 표현하고 싶을 때,

사용하려고 만든 태그가 있다.

 

이 태그를 사용해야, 다른 사람들이 해당 코드를 볼 때,

아 ~ 목차를 쓰려고 하는구나 라는 의미가 전달 될 수 있기에,

목차를 쓰고 싶다면 해당 태그를 사용해야 한다.

 

이렇게 목적에 맞게끔 웹 페이지를 구현해내는게 

더 가치있는 웹 페이지를 구현 한다 라고 말할 수 있다.

 

목차 / 목록

목록은 영어로 List 라고 한다.

List에서 앞의 두 글자는 ? li 이다.

 

즉, 목차를 구현하고 싶을 때 사용하는 태그는 <li> 태그 이다.

 

3.

 

<li> 태그를 사용한 이미지.

 

 

 

참고로, 반복되는 태그를 한번에 작성 하고 싶으면,

 

ctrl 키를 누른 상태로, 입력하고 싶은 라인에 마우스 왼쪽 클릭을 하면

클릭한 곳들은 모두 동시 입력이 된다.

 

 

이런식으로, 커서를 지정해줘서, 한번에 원하는 글을 작성할 수 있다.

 

 

4.

 

목차를 구성할 때, 맥락상, 의미상, .. 등등 맞는 목차들끼리

구성하고 싶은데,

<li> 를 그대로 사용하면, 모두 한줄만 줄바꿈 되듯이 나오게 되서

구분이 어려워 진다.

 

물론, <br> 태그를 사용해서 줄바꿈을 해도 되겠지만,

 

이럴때를 생각해서 만들어내진 태그가 있다.

 

바로 <li> 태그의 부모 태그인 <ul> 이라는 태그 이다.

 

 

 

각 목록들을 크게 <ul> 태그로 묶는 것이다.

 

5.

즉, <li> 같은 항목은 어디서부터 어디까지가 연관된 항목인지를

구분 하기 위해서 부모 태그가 필요 하다.

 

따라서, <li> 태그는 부모로 <ul> 태그를 가지고 있다고 생각 하자.

 

6.

 

만약에, 목록에 있는 숫자를 변경해야하는 일이 생겼다..

 

숫자를 하나하나 일일히 지울 수는 없다.

 

그래서, 이럴때를 생각해서 만들어진 태그가 있다.

 

바로 부모 태그인 <ul> 태그를 <ol> 태그로 변경하는 것이다.

 

 

 

 

그러면 위와 같이 숫자가 나오게 된다.

 

<ol> 태그는 <ul> 태그와 공통적으로 l이라는 알파벳을 가지고 있다.

 

l은 list의 약자 이다.

 

ol은 Ordered List의 약자 이고,

ul은 Unordered List의 약자 이다.

 

7.

정리

 

<ol> Ordered List

 

<ul> Unordered List

 

<li> List

 

8.

참고

 

테이블을 구성할 수 있는 태그가 있다.

 

<table> 이다.

 

해당 태그는

 

<tr>

<td>

 

태그를 함께 사용 한다.