[HTML] Menu만들기_float:left_float:right
- list-style:none; 하면 리스트 점이 없어짐.
- *를 써주는 이유는 모든 element에 적용하는 것. ex) margin, padding, color 넣으면 모두 reset시켜 적용함.
- ul, li 메뉴를 쓸 때 만듬list-style:none; 하면 리스트 점이 없어짐.
- Style안에서 display: inline or block으로 해서 바꿔줌
- float:left => inline보다 빈칸없이 붙음 (아래내용이 오른쪽으로 붙을 준비가 되어 있음)
- float:right => 오른쪽으로 붙음
- Full monitor는 width1900px (우리 모니터 1200px)
- ul, li 쓸 때 div안에 써야 함
- navi>ul>li => navi 아래 ul 아래 li만 적용해라
- 네이버에서 F12누르면 html태그 확인 가능
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#logo{float:left;
}
#navi{float:right;
}
#header{width:1200px;
height:50px;
}
ul,li{
list-style:none;
}
#navi>ul>li{
float:left;
width:100px;
}
</style>
</head>
<body>
<div id="header">
<div id="logo">logo</div>
<div id="navi">
<ul>
<li><a href="http://naver.com">menu1</a></li>
<li><a href="http://google.com">menu2</a></li>
<li><a href="http://nate.com">menu3</a></li>
<li><a href="http://kakaocorp.com">menu4</a></li>
<li><a href="http://daum.com">menu5</a></li>
</ul>
</div>
</div>
</body>
</html>