✨[HTML] 리스트(ul, ol 태그) / 네비게이션(navigation) 메뉴

ul : Unordered List

말 그대로 순서가 없는 리스트. <ul> 태그로 시작하고 각 아이템들은 <li> 태그로 시작한다.

 

Unordered List

 

ul : list-style-type 속성

각 리스트 아이템들의 앞에 나타나는 마크를 결정하는 CSS 속성.

Value : disc(Default) / circle / square / none

html에서 ul태그에 스타일을 주려면 <ul style="list-style-type : Value">와 같이 입력하면 된다. 

 

차례대로 circle, square, none

ol : Ordered List

말 그대로 순서가 있는 리스트. <ol> 태그로 시작하고 각 아이템들은 <li> 태그로 시작한다.

 

Ordered List

Nested HTML Lists

 

 

위와 같이 리스트 안에서도 리스트를 만들 수 있다.

Horizontal List

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
view raw navigation.html hosted with ❤ by GitHub

 

이런 식으로 옆으로 해서 네비게이션 메뉴도 만들 수 있다.

 

navigation menu

 

 

 

저작자표시

'HTML' 카테고리의 다른 글

[HTML] 시맨틱(Semantic) 태그를 사용하자  (0) 2020.06.17
[HTML] 폼(form 태그)  (0) 2020.04.19
[HTML] 블록과 인라인 요소(div, span 태그)  (2) 2020.04.16
[HTML] 테이블 (table 태그)  (0) 2020.04.16
생강강
,