1. <a></a> 페이지 전환[하이퍼 링크]
  2. 속성 : href = “링크 경로”
    1. <a href = "../index.html">[상대 경로] 프론트엔드 공부방</a>
    2. <a href = "C:\Users\504\git\Ga0_WebStudy\frontend\public\index.html">[절대 경로]프론트엔드 공부방</a>
  3. 선택자:hover : 해당 요소에 마우스를 올렸을 때
  4. 선택자:focus : 해당 요소에 마우스 커서[포커스]들어왔을 때
<!DOCTYPE html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title>Insert title here</title>
			
			<link href = "15.css_a.css" rel = "stylesheet">
		</head>
		<body>
			<h3>a : 하이퍼링크[페이지이동]</h3>
			
			<a href = "<https://www.naver.com>">[절대 경로]네이버</a>
			<a href = "<https://www.instagram.com/>">[절대 경로]인스타그램</a>
			<a href = "../index.html">[상대 경로]프론트엔드공부방</a>
			<!-- 컴퓨터 환경이 바뀌면 안열림. -> 환경이 다르기 때문 -->
			<a href = "C:\\Users\\504\\git\\Ga0_WebStudy\\frontend\\public\\index.html">[절대 경로]프론트엔드공부방</a>
			<a href = "<https://www.daum.net>">[상대 경로]클릭한 적 없는 웹 페이지(a)</a>
			
			<div id = "header">
				<ul>
					<li class = "drop_down"> menu1</li>
					<li class = "drop_down">
						 <a href = "#">menu2</a>
						 <ul class = "sub_menu">
						 	<li><a href = "#">sub_menu1</a></li>
						 	<li><a href = "#">sub_menu2</a></li>
						 	<li><a href = "#">sub_menu3</a></li>
						 </ul>
					 </li>
					<li class = "drop_down"> 
						<a href = "#">menu3</a>
						<ul class = "sub_menu">
							<li><a href = "#">sub_menu4</a></li>
						 	<li><a href = "#">sub_menu5</a></li>
					 		<li><a href = "#">sub_menu6</a></li>
				 		 </ul>
					</li>
					<li class = "drop_down"> menu4</li>
					<li class = "drop_down"> menu5</li>
				</ul>
			</div>
		</body>
	</html>

@charset "UTF-8";

a{
	color : black;
	text-decoration: none; /*밑줄 제거*/
}

a:hover{ /*hover이라는 것은 마우스를 올렸을 때에 대한 css 적용*/
	color : orange;
	font-size: 14px;
}

a:active{ /*마우스를 클릭할때의 -> 클릭을 하는 동안의 css 적용*/
	color : green;
	font-size: 25px;
}

a:visited{ /*클릭한 적이 있을 떄 [활성화 한 적이 있을 때]*/
	color : red;
	font-size: 10px;
}

#header .drop_down{
	display: inline-block;
	margin-right: 50px;
}
#header{
	background-color: #eeeeee;
	display: flex;
	justify-content: center;
}

.drop_down{
	position: relative; /* 상위 요소에 relative -> 메뉴들이 drop_down 밖에 안나가도록*/
}

.sub_menu{ /*서브 메뉴는 배경색과 동일하게 가는 것이 좋다.*/
	position: absolute;  /*하위 요소에 absolute -> 부모 밖에 안나가도록 absolute*/
	/*상위 요소와 하위 요소의 접점이 있어야 hover 유지 */
	top : 20px; left : -40px; /*상단 요소랑 하위 요소가 띄어져 있으면 hover가 풀림. 겹치는 부분이 있어야함*/

	/*위의 hover풀림을 해결하기 위해 padding 값을 준다.*/
	padding-top : 30px; /*상위 요소와 하위 요소 사이에 여백을 준다. -> margin은 안됨. 풀림!*/
	
	display: none; /*숨기기, 화면에 표시 X*/
	font-size: 12px;
	
	/* border-top은 main_menu와 경계선이 진하지 않도록 빼준다.*/
	border-left : solid 2px #eeeeee;
	border-bottom : solid 2px #eeeeee;
	border-right : solid 2px #eeeeee;
	
	
	width: 100px;
}

.drop_down a{
	width: 200px;
}

.sub_menu a{ width: 200px; }

.drop_down:hover .sub_menu{
	display: block; /*숨겼던 sub_menu를 다시 보여줌*/
}

Untitled