다연이네

[days02] 메뉴바 만들기 test 본문

Web/CSS

[days02] 메뉴바 만들기 test

　다연　 2020. 12. 4. 13:12
반응형

해당 사진을 보고 똑같이 만드시오

 

1. 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
body{
margin:0;
}

.topnav{

	background-color: #555;
	/* overflow: hidden; */
	overflow: auto; /* 지금 히든이나 오토나 똑같은 결과 */
	/* float:left 주는 순간 패딩 먹으니까 hidden이나 auto 똑같음 */

}
.topnav a{

	color: #f2f2f2;
	font-size: 17px;
	text-decoration: none;
	padding: 14px 16px; 
	text-align: center;
	float: left; /* 얘를 주니까 그제야 패딩이 먹고 메뉴 간격이 붙음(원래는 메뉴 사이사이 벌어져 있었음)*/
	
}

.topnav a:hover{
	background-color:#ddd;
	color: black;
	}
	
.topnav a.active{
	background-color:#4CAF50;
	color: white;
	}



</style>

</head>
<body>




<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>

<div style="padding-left:16px">
  <h2>Top Navigation Example</h2>
  <p>Lorem ipsum dolor sit amet.</p>
</div>

</body>
</html>

 

 

2.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
body{
	margin:0;
	}

	.active{
		background: #4CAF50;
	}
	.icon-bar{
	/* border: 1px solid red;  *//* div는 길이가 페이지 끝까지다  */
	background: #555;
	width: 90px;
	}
	
	.icon-bar a{
		
		color: white;
		font-size: 36px;
		padding: 16px; /* a태그의 패딩 속성 */
		/* a태그는 기본이 인라인 모드이기 때문에 블락모드로 바꿔야 밑으로 떨어짐 */
		display: block;
		/*블럭모드가 전체로 잡힘(페이지 끝까지) => width  */
		/* width: 100px; */ /*  안먹음 => bar을 줄이자, bar가서 width:90px 주기 */
		/* 한쪽으로 쏠린거같아 => center 주자 */
		text-align: center;
		
		/* 안배웠는데 추가하기 */
		transition: all 0.3s ease /* 어떤 상태가 바뀌더라도 0.3초 효과를 유지해라 */
		/* => 색깔이 스르르 바뀜 */
		/* 상태가 바뀌는 것 */
		
	}
	.icon-bar a:hover:not(.active){
	background: #000;
	}

</style>


</head>
<body>

<div class="icon-bar">
  <a class="active" href="#"><i class="fa fa-home"></i></a> 
  <a href="#"><i class="fa fa-search"></i></a> 
  <a href="#"><i class="fa fa-envelope"></i></a> 
  <a href="#"><i class="fa fa-globe"></i></a>
  <a href="#"><i class="fa fa-trash"></i></a> 
</div>
</body>
</html>

transition: all 0.3s ease /* 어떤 상태가 바뀌더라도 0.3초 효과를 유지해라 */
 => 마우스를 옮기면 색깔이 스르르 바뀐다.

반응형
저작자표시 비영리

'Web > CSS' 카테고리의 다른 글

[days02] 1. CSS 목록 속성 2. 마우스 롤오버 (+href, src, url 차이)  (0) 2020.12.04
[days02] 페이징 처리  (0) 2020.12.04
[days01] 구글 글씨체 사용하기, 외부 아이콘 사용하기  (0) 2020.12.03
[days01] CSS 텍스트: 색상, 정렬, 장식, 변환 등 + 글씨체  (0) 2020.12.03
[days01] max-width(height)와 오버플로우(스크롤바 외)  (0) 2020.12.03
'Web/CSS' Related Articles more
Comments