개발자 미니민의 개발스터디

[CSS] display: flex 으로 메뉴 만들기 (1/2/3)

by mini_min

프로젝트 실습/[Project] HTML

[CSS] display: flex 으로 메뉴 만들기 (1/2/3)

✔️ 메뉴 만들기 (1) - 메뉴가 고정되지 않음

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
 
<style type="text/css">
 
header {
	height: 55px;
	padding: 1rem;
	color: white;
	background: darkblue;
	font-weight: bold;
	
	display: flex;
	justify-content: space-between;
		/*시작 아이템은 시작점. 마지막 아이템은 사이에 고르게 배치*/
	align-items: center; /*수직 가운데*/
	
}
 
nav > span {
	cursor: pointer;
	padding: 10px;
}
 
main {
	min-height: 1100px;
}
 
footer {
	height: 50px;
	line-height: 50px;
	text-align: center;
}
 
 
 
 
</style>
 
</head>
<body>
 
<header>
  <h1>스터디</h1>
  <nav>
    <span>Menu1</span>
    <span>Menu2</span>
    <span>Menu3</span>
  </nav>
</header>
 
<main>
  <h3> 고정되지 않는 메뉴 </h3>
  <p>main 영역</p>
  <p>main 영역</p>
  <p>main 영역</p>
  <p>main 영역</p>
  <p>main 영역</p>
  <p>main 영역</p>
</main>
 
<footer>
  <p>footer 영역</p>
</footer>
 
</body>
</html>
💡 display: flex; 를 주면
justify-content: space-between; /*시작 아이템은 시작점. 마지막 아이템은 사이에 고르게 배치*/
align-items: center; /*수직 가운데*/
둘 다 적용 가능하다.

 

 

✔️ 메뉴 만들기 (2) - 메뉴를 고정시킴

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
 
<style type="text/css">
 
*{margin: 0; padding: 0}
 
body {
	font-family: 맑은 고딕;
	font-size: 14px;
}
 
 
/*픽스되니까 아래 main 부분이 가려짐*/
header {
	position:fixed;
	top: 0;
	left: 0;
	width: 100%;
	
	height: 55px;
	padding: 1rem;
	color: white;
	background: darkblue;
	font-weight: bold;
	
	display: flex;
	justify-content: space-between;
		/*시작 아이템은 시작점. 마지막 아이템은 사이에 고르게 배치*/
	align-items: center; /*수직 가운데*/
}
 
nav {
	padding-right: 15px;
}
 
nav > span {
	cursor: pointer;
	padding: 10px;
}
 
main {
	min-height: 1100px;
}
 
footer {
	height: 50px;
	line-height: 50px;
	text-align: center;
}
 
body {
	padding-top: 65px;
}
 
 
 
 
</style>
 
</head>
<body>
 
<header>
  <h1>스터디</h1>
  <nav>
    <span>Menu1</span>
    <span>Menu2</span>
    <span>Menu3</span>
  </nav>
</header>
 
<main>
  <h3> 메뉴바를 화면 상단에 고정 </h3>
  <p> 
      메인 영역의 윗 부분이 헤더 영역의 뒤로 들어가서 일부 컨텐츠가 보이지 않으므로
    body 엘리먼트의 상단에 메뉴바 높이 만큼 패딩(padding)을 준다.
  </p>
  <p>main 영역</p>
  <p>main 영역</p>
  <p>main 영역</p>
  <p>main 영역</p>
  <p>main 영역</p>
  <p>main 영역</p>
</main>
 
<footer>
  <p>footer 영역</p>
</footer>
 
</body>
</html>
💡 position:fixed; top: 0; left: 0; width: 100%;
포지션이 fixed 되니까 main 부분이 가려진다.
때문에 body 에 padding-top 값을 준다.

 

 

✔️ 메뉴 만들기 (3) - 메뉴바를 고정

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
 
<style type="text/css">
* {
	margin: 0; padding: 0;
}
 
body {
	font-family: 맑은 고딕, 굴림;
	font-size: 14px;
}
 
header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	
	color: white;
	background: darkblue;
}
 
header>nav>ul {
	list-style: none;
	display: flex;
	align-items: center;
	/* justify-content: center; */
}
 
header>nav>ul>li>a {
	display: block;
	text-decoration: none;
	padding: 10px 20px;
	color: white;
	font-weight: 700;
}
header>nav>ul>li>a:hover {
	background: #0033ff;
	font-weight: 700;
}
 
 
main{
	padding-top: 40px; /* 가려진 컨텐츠 보이게 하기 */
	min-height: 1500px;
}
 
footer {
	height: 50px;
	line-height: 50px;
	text-align: center;
}
</style>
 
</head>
<body>
 
<header>
	<nav>
		<ul>
			<li><a href="#">홈</a></li>
			<li><a href="#">Menu 1</a></li>
			<li><a href="#">Menu 2</a></li> 
		</ul>
	</nav>
</header>
 
<main>
	<h3> 메뉴바를 화면 상단에 고정 - display: flex  </h3>
	<p> main 영역 </p>
	<p> main 영역 </p>
	<p> main 영역 </p>
	<p> main 영역 </p>
	<p> main 영역 </p>
	<p> main 영역 </p>
	<p> main 영역 </p>
</main>
 
<footer>
	<p> footer 영역 </p>
</footer>
 
</body>
</html>
💡 헤더 부분에 포지션 fixed 를 줬다.
position: fixed;
top: 0; left: 0; right: 0;

<ul> 태그에는 
display: flex; align-items: center; /* justify-content: center; */
flex 를 주니까 메뉴들이 옆으로 붙어서 출력되었다.
💡 <a> 태그에 display: block; 준 이유
: 그래야 패딩 값이 먹히기 때문이다.
justify-content : space-between : 첫번째 박스와 마지막 박스는 양쪽에 붙이고 나머지는 동일하게 간격을 띄운다.

 

 

 

 

블로그의 프로필 사진

블로그의 정보

개발자 미니민의 개발로그

mini_min

활동하기

티스토리툴바