HTML

부모 자식과 목록

Crucifi 2019. 7. 8. 02:31

다음과 같이 <부모>와 <자식>이라는 두개의 태그가 있다고 봅시다.

그러면 

대충 이런식?

이런식으로 표현할 수 있습니다. 여기서 <부모>태그를 <ul>이라고 생각하고, <자식>태그를 <li>라고 생각하고

바꿔봅시다. 그 전에 먼저 (목록/목차)라는 개념을 먼저 설명하겠습니다.

 

(목록/목차)란

 

코드는 이렇다.
주관적인 순서임으로 태클사절

 

 

이런식으로 <body>사이에 넣은 List라고 생각하면 된다.

 

아까 앞서 설명했던 것처럼 부모와 자식의 태그를 구분해서 사용해 보자 1,2,3등을 한 부모에 속하게 하고

나머지 4,5,6등을 다른 부모에 속하게 한 번 해보자.

 

<ul>태그안에 <li>태그가 들어간 모습

 

결과

훨씬 더 깔끔해진 모습을 볼 수 있다.

 

여기서 잠깐!!! 이런식으로 갯수가 얼마되지 않는 것들은 이런식으로 하면 되는데 만약 그 수가 수십,수백가지가 된다면?

이때 사용하는 태그가 <ol>태그이다.

 

<li>태그앞에 적도록 하자.

 

 

항목 앞에 자동으로 숫자가 매겨지는 것을 볼 수 있다.

이로써 우리는 부모와 자식태그까지 공부를 완료했음을 알 수 있다.