HTML 부모자식과 목록

이렇게 태그가 서로 포함관계로 연관되어 있을 때

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

포함된 태그를 자식태그

라고 부른다.

어떤 태그들은 부모 태그에 항상 특정한 자식 태그가 있는 태그들이 몇개가 있습니다.

이번 글에서는 그런 태그들을 알아볼 것입니다.

그리고 목차를 만드는 법도 알아볼 것입니다.

목차를 만들기 위해 우선 Atom에 이런식으로 코드를 작성해준다.

html에서는 목차를 만들기 위해 사용하라고 있는 태그가 있다.

그것을 사용해줘야 그 태그가 의미에 맞게 사용이 되는 것이다.

<br>이라고 되어이쓴 부분을 다 지워주고 <li>의 열린 태그와 닫힌 태그를 써주자.

그리고 1. 2. 3. 앞에 <li> 태그를 다 작성을 해줘야 하는데

이때는 ctrl을 눌러서 줄을 클릭하면 커서가 여러 곳에 생기게 된다.

이 상태에서 작성을 하면 선택한 커서에 모두 작성이 된다.

위의 1.2.3은 목록 밑에 J,K,W는 참가자 명이다.

이렇게 작성을 하면 아래 사진처럼 나와서 구분이 잘 안된다.

<br>태그를 작성해서 여백을 만들어도 괜찮지만

이럴 때 사용하라고 만들어져 있는 태그가 있다.

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

이런식으로 작성을 하게되면 밑에 사진처럼 보이게 된다.

어디서부터 어디까지 관련이 있는지 눈에 잘 띄게 된다.

<ul> 부모 태그는 반드시 <li> 자식 태그를 가지고 있고

<li> 자식 태그는 반드시 <ul> 부모 태그를 가지고 있다.

 

목록이 3개면 이렇게 숫자를 작성해도 괜찮지만

1억개라고 가정했을 때는 하나하나 작성 및 수정을 하기가 힘들다.

이럴 때 사용하는 태그가 있다. 바로 <ul>이라는 태그 대신에 <ol>이라는 태그를 사용을 하면된다.

ol의 약자는 Ordered List

ul의 약자는 Unordered List 이다.

표를 작성할 때는 이렇게 3대가 같이 다녀서 조금은 복잡해진다.