2018.12.06 nav,메뉴작성하기,반응형,Position 설정
2018. 12. 6. 16:45ㆍHTML5&CSS
#1 nav bar 만들기(메뉴 만들기),마우스 커서에 반응
㉠ 작업하는 폴더에서 css폴더를 만든이후 style.css작성
마우스 커서에 반응 할수 있도록 :hover 사용
*{margin: 0px; padding: 0px;}
nav{
text-align: center;
background-color: tomato;
}
nav ul{
display: inline-block;
list-style-type: none;
}
nav ul .list{
float: left;
}
nav ul .list a{
padding: 5px;
font-weight:700;
font-size: 20px;
color:white;
text-decoration: none;
}
.dropdown{
display:none;
width:100px;
background-color:tomato;
position: absolute;
top:31px;
}
nav ul li:hover {
background-color: rgb(207, 114, 98);
display:block;
}
nav ul li:hover .dropdown {
background-color: rgb(207, 114, 98);
display:block;
}
/* 800px까지 블럭으로 인식 →@meida(max-width:~px){ 주소{clear:both;}} */
@media(max-width:800px){
nav ul li{
clear: both;
}
.dropdown {
position:static;
}
}
㉡ 따로 스타일을 작성하지 않아도 style.css에서 작업된 내용을 불러옴
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav>
<ul>
<li class="list"><a href="#">HOME</a>
<div class="dropdown">
<a herf="#">Link 1</a>
<a herf="#">Link 2</a>
<a herf="#">Link 3</a>
</div>
</li>
<li class="list"><a href="#">HTML</a>
<div class="dropdown">
<a herf="#">Link 1</a>
<a herf="#">Link 2</a>
<a herf="#">Link 3</a>
</div>
</li>
<li class="list"><a href="#">CSS</a>
<div class="dropdown">
<a herf="#">Link 1</a>
<a herf="#">Link 2</a>
<a herf="#">Link 3</a>
</div>
</li>
<li class="list"><a href="#">JavaScript</a>
<div class="dropdown">
<a herf="#">Link 1</a>
<a herf="#">Link 2</a>
<a herf="#">Link 3</a>
</div>
</li>
<li class="list"><a href="#">React</a>
<div class="dropdown">
<a herf="#">Link 1</a>
<a herf="#">Link 2</a>
<a herf="#">Link 3</a>
</div>
</li>
</ul>
</nav>
</body>
</html>
#2 Position 설정하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
}
#static1 {
background-color: green;
width: 300px;
height: 300px;
position: relative;
top: 100px;
left: 100px;
}
#absoulte1 {
background-color: yellow;
position: absolute;
top: 0px;
left: 100px;
}
#absoulte2 {
background-color: red;
position: absolute;
top: 0px;
left: 200px;
}
</style>
</head>
<body>
<div id="static1">
1.static
<div id="absoulte1">
2.absoulte1
</div>
<div id="absoulte2">
3.absoulte2
</div>
</div>
</body>
</html>
'HTML5&CSS' 카테고리의 다른 글
| 회원가입 화면 만들기 (0) | 2018.12.05 |
|---|---|
| 2018.12.05 메뉴디자인하기 (0) | 2018.12.05 |
| 2018.12.05 달력&체크박스&라디오&외부 이미지 (0) | 2018.12.05 |
| 2018.12.04 로그인폼,텍스트 입력창,버튼 (0) | 2018.12.04 |
| .vscode 설정후 Ctrl + Shift + B 실행하기 (0) | 2018.12.04 |