[Web/HTML] 2. 중첩 태그

!!! NOTICE !!!
이 글은 Web의 이론을 다루고 있습니다!
학습한 정보를 제가 기억하고 추후에도 사용해두기 위해 기록해둔 내용입니다!

---

*공부하면서 참고한 사이트
https://opentutorials.org/course/2039/10933

태그의 중첩과 목록 - 생활코딩

---

태그의 중첩

지난 글에서는
태그안에 단순히 문자를 넣어 내용을 변형시켜주었다.

이번엔
태그 안에 태그를 넣어서 중첩을 시켜보자.

 

데이터를 리스트 형식으로 출력하려고 한다.
항목을 하나로 묶어서 하나하나 연속되게 출력된다는 말이다.

<li> 태그는 데이터를 항목별로 나누어서
시각적으로 분류를 해준다.

<li>기술소개</li>
<li>기본문법</li>
<li>하이퍼텍스트와 속성</li>
<li>리스트와 태그의 중첩</li>

<li> 태그를 이용해서 항목으로 나눴으나
문제는 아래에 <li>태그를 추가한다면
계속해서 항목이 추가되고 계속해서 나열이 될 것이다.

만약, 항목별로 태그를 나누려고 한다면
나누고자 하는 항목별로 묶어서
하나의 태그안에 묶어주어야 한다.

 

<ul> 태그는 <li> 태그를 한번에 묶어줄 수 있다.
unordered list 의 약자로 순서를 구분하지 않는 그룹핑을 해준다.

<ul>
    <li>기술소개</li>
    <li>기본문법</li>
    <li>하이퍼텍스트와 속성</li>
    <li>리스트와 태그의 중첩</li>
</ul>

<ul>
    <li>aaaa</li>
    <li>bbbb</li>
    <li>cccc</li>
    <li>dddd</li>
</ul>

이렇게 태그를 중첩시켜서
항목별로 구분해주었다.

 

추가적으로 <ol> 태그를 사용한다면
숫자로 구분해서 순서대로 나열하여 그룹핑을 해준다.
ordered list 의 약자이다.