무룩 공부방

[HTML] EX19) dropdown과 css (Notepad++/Java Script) 본문

IT/HTML

[HTML] EX19) dropdown과 css (Notepad++/Java Script)

moo_look 2023. 8. 29. 13:42

ex18과 같이 scc파일을 만들고 이를 호출하여 사용하는 방법으로 스타일을 바꿔보고

dropdown 메뉴를 만들어 보았습니다.

 

<Source code>

<!doctype html>
<html>
	<head>
		<title>PORTFOLIO</title>
		<meta charset="utf=8">
		<link href="css/portfolio.css" rel="stylesheet">
	</head>
	<body>
		<div class="main">
			<div class="dropdown"> 
				<button class="dropbtn">내소개</button>
				<div class="dropdown-content">
					<a href="#">about me</a>
					<a href="#">portpolio</a>
					<a href="#">My story</a>
					<a href="ex20.html" target="_blank">Q&A</a>
				</div>
			</div>
		</div>
		<div class="box">
			<div class="box1">
			</div>
		</div>
	</body>
	
</html>

 

<css>

@charset "utf=8";

* {margin:0; padding:0;}

.dropbtn {
	background:#00f;
	color:#fff;
	padding:16px;
	font-size:16px;
	border:none;
}
.dropdown {
	position:relative;
	display:inline-block;
}
.dropdown-content {
	display:none;
	position:absolute;
	background:#f1f1f1;
	min-width:160px;
	z-index:10;
}
.dropdown-content a {
	color:#000;
	padding:12px 16px;
	text-decoration:none;
	display:block;
}
.dropdown:hover .dropdown-content {
	display:block;
}
.dropdown:hover .dropbtn{
	background:#393B0B;
}
.dropdown-content a:hover {
	background:#ddd;
}
.box {
	background:#00f;
	width:600px;
	height:300px;
	position:relative;
}
.box1 {
	background:#0f0;
	width:100px;
	height:100px;
	position:absolute;
	left:100px;
	top:100px;
}

dropdown class를 마우스가 오버됨(hover)에 따라 inline, block으로 상태를 변화시켜주고

hover되면 dropdown-content가 block으로 나오게 끔 되어있습니다.

마우스 오버 시 배경색이 변화되면 a링크의 클릭범위나 마우스의 위치를 인지함에 있어 좋습니다.

 

 

<마우스 오버하지 않음>

 

 

<마우스 오버>

'IT > HTML' 카테고리의 다른 글

[HTML] EX20) 홈페이지 메인화면(Notepad++/Java Script)  (2) 2023.08.29
[HTML] EX18) css 예제 (Notepad++/Java Script)  (0) 2023.08.29
[HTML] EX17) 객체 (Notepad++/Java Script)  (0) 2023.08.26
[HTML] EX16) 총점과 평균 (Notepad++/Java Script)  (0) 2023.08.26
[HTML] EX15) 배열 (Notepad++/Java Script)  (0) 2023.08.26
'IT/HTML' Related Articles more