[HTML] 리스트와 태그의 중첩

평소 웹사이트들을 보면 목록(메뉴)이라는게 존재합니다. 목록을 누르면 페이지가 이동합니다.

이러한 목록을 만들때 사용하는 태그가 <li>태그입니다.

기본적으로 HTML에서는 엔터(Enter)키를 눌러서 줄바꿈을 시도해도 웹페이지상에서 줄바꿈이 일어나지 않습니다.

아래와 같이 <br>태그를 사용하면 줄바꿈을 할 수 있습니다. <br>태그는 일반적인 태그와는 달리 종료태그없이 사용됩니다. 즉, </br>이란 표현은 사용하지 않습니다. 

 

 

<br>태그로 줄바꿈이 되어 '네이버로 이동하기' 링크가 한줄 내려간걸 볼 수 있습니다.

 

 

이제 <li>태그를 사용하여 목록을 만들어 보겠습니다.

 

 

<li>태그는 기본적으로 줄바꿈을 해주고, list형식으로 목록을 나열해 주는 기능을 합니다.

 

 

<ul>태그와 <ol>태그가 있습니다.

목록에 순서가 없다면 <ul>태그를 사용합니다.

목록에 순서가 있다면 <ol>태그로 묶어줍니다.

 

 

결과는 다음과 같습니다. <ol>태그는 숫자를 활용해서 출력하는 모습입니다.

 

 

<a>태그를 활용하여 목록에 링크를 걸어봅시다. 이처럼 태그안에 태그를 중첩으로 사용할 경우에는 코드를 보기쉽게 묶여져 감싸있는 태그안의 내용들은 간격을 띄어주어 보기편하게 작성해야 나중에 코드를 보더라도 보기가 좋습니다.

결과물은 직접 작성하여 해보시기 바랍니다.