HTML CSS 리스트 작성하기 (메뉴 만들기) 예제

HTML에서 리스트를 작성하는 방법을 알아보겠습니다.

리스트는 문자를 열거하거나 하는 경우 많이 사용합니다.

사이드바나 메뉴등에서 많이 사용합니다.

그리고 작성한 리스트를 CSS로 디자인 하는 방법을 알아보겠습니다.

 

리스트 작성하기

다음으로는 리스트를 작성해 보도록 하겠습니다.

리스트를 자주 사용하는 것으로 내비게이션이나 사이드바 메뉴 부분입니다.

<!DOCTYPE html>
<html lang="kr">
  <head> 
    <meta charset="UTF-8"> 
    <title>테스트</title> 
    <link rel="stylesheet" href="style.css">
  </head> 
  <body>
    <h1>웹 사이트</h1> 
    <p>이 웹 사이트는 테스트를 위한 사이트입니다. <br>
      테스트 내용을 작성해주세요. 
      다음과 같이 작성 했습니다.
    </p> 
    <p><a href="http://naver.com/" target="_blank">Naver</a>에 이동합니다.</p> 
    <ul> 	
      <li>Google</li> 	
      <li>Daum</li> 	
      <li>Naver</li> 	
    </ul> 
  </body>
</html>

 

표시 예

 

리스트에는 2개의 종류가 있습니다.

<ul> 태그와 <ol> 태그입니다.

리스트 항목은 <li> 태그를 사용합니다.

 <ul> 태그는 순서가 정해져 있지 않은 리스트입니다.

<ul> 
  <li>Google</li> 
  <li>Daum</li> 
  <li>Naver</li>
</ul>

↓↓순서를 바꿈

<ul> 
  <li>Daum</li> 
  <li>Google</li> 
  <li>Naver</li> 
</ul>

 

로 바꾸어도 특별히 아무런 문제가 없습니다.

단순히 위치를 바꾼 것뿐입니다.

하지만 <ol> 태그는 순서가 부여된 리스트입니다.

예를 들어 다음과 같은 리스트를 작성하겠습니다.

<h2>맛집 랭킹</h2>
<ol>
  <li>마포구</li> 
  <li>서대문구</li> 
  <li>종로구</li>
</ol>

 

이경우 리스트 순서에 의미가 있습니다.

만약 2위 항목이 3번째에 표시되면 이상할 것입니다.

이러한 경우는 <ol> 태그를 사용합니다.

목차라든가 순서에 의미가 있는 리스트 등에 <ol> 태그가 사용되고 있습니다.

기본적으로 리스트는 메뉴에 사용되는 경우가 많고, <ul> 이 압도적으로 사용빈도가 높습니다.

 

 

부모 요소와 자식 요소

 부모 요소와 자식 요소에 대해 설명하도록 하겠습니다.

<ul> 
  <li>Google</li> 
  <li>Daum</li> 
  <li>Naver</li> 
</ul>

 

<ul>~</ul> 안에 li 요소가 들어가 있는 것을 알 수 있습니다.

이때, ul 요소는 li 요소의 부모 요소가 됩니다.

반대로 li 요소는 ul 요소의 자식 요소가 됩니다. 

그리고 밑에 3개의 요소는 형제 요소가 됩니다.

	<li>Google</li> 	<li>Daum</li> 	<li>Naver</li>

 

부자, 형제 관계에 대해 이해 가셨나요?

부모 요소와 자식 요소라는 용어는 다음에도 나오기 때문에 기억해 두시면 좋습니다.

그러면 조금 전에 작성한 코드로 돌아가서 설명하도록 하겠습니다.

<!DOCTYPE html>
<html lang="kr">
  <head> 
    <meta charset="UTF-8"> 
    <title>테스트</title> 
    <link rel="stylesheet" href="style.css"> 
  </head> 
  <body> 	
    <h1>웹 사이트</h1> 	
    <p>이 웹 사이트는 테스트를 위한 사이트입니다. <br>
      테스트 내용을 작성해주세요. 
      다음과 같이 작성 했습니다.
    </p> 
    <p><a href="http://naver.com/" target="_blank">Naver</a>에 이동합니다.</p> 
    <ul> 	
      <li>Google</li> 
      <li>Daum</li> 	
      <li>Naver</li> 
    </ul> 
  </body> 
</html>

 

다음과 같은 리스트가 표시되었을 거라 생각이 듭니다.

리스트 각 항목에 검은색 점이 붙어있습니다.

이 부분은 list-style-type에서 변경할 수 있습니다.

/* 생략 */
a:active { 	
  color : #993366; 
} 
ul { 	
  list-style-type : circle;
}

 

CSS에 속성값을 변경함으로써 흰색 동그라미로 바뀐 것을 볼 수 있습니다.

 

표시 예

 

그 외에도 검은 사각형(square)으로도 변경할 수 있습니다.

삭제를 하고 싶은 경우에는 CSS에 다음과 같이 설정합니다.

/* 생략 */ 
a:active { 
  color : #993366; 
}
ul { 	
  list-style-type : none; 
}

 

표시 예

 

다음으로는 메뉴에 링크를 연결해 보도록 하겠습니다.

<!DOCTYPE html>
<html lang="kr">
  <head> 
    <meta charset="UTF-8"> 
    <title>테스트</title> 
    <link rel="stylesheet" href="style.css"> 
  </head> 
  <body>
    <h1>웹 사이트</h1> 
    <p>이 웹 사이트는 테스트를 위한 사이트입니다. <br>
      테스트 내용을 작성해주세요. 
      다음과 같이 작성 했습니다.
    </p> 
    <p><a href="http://naver.com/" target="_blank">Naver</a>에 이동합니다.</p> 
    <ul> 	
      <li><a href="https://www.google.co.kr/">Google</a></li> 
      <li><a href="http://www.daum.net/">Daum</a></li> 	
      <li><a href="http://www.naver.com/">Naver</a></li> 
    </ul> 
  </body>
</html>

 

여기서 a 요소는 li 요소에 속하게 됩니다.

li 요소는 부모 요소, a 요소는 자식 요소라는 관계가 됩니다.

 

표시 예

댓글