[CSS] display: flex 으로 메뉴 만들기 (1/2/3)
by mini_min[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 : 첫번째 박스와 마지막 박스는 양쪽에 붙이고 나머지는 동일하게 간격을 띄운다.
'프로젝트 실습 > [Project] HTML' 카테고리의 다른 글
| [HTML/CSS] 메인 페이지(메뉴 펼치기) 만들기 👩💻 (1) | 2022.09.19 |
|---|---|
| [HTML] <ul> 태그로 게시판 만들기 - 연습 (0) | 2022.09.12 |
| [HTML] 게시글 (article) 작성 - 연습 (0) | 2022.09.11 |
| [HTML] 글쓰기 게시판 - 연습 (0) | 2022.09.09 |
| [HTML] 게시판 버튼 만들기 (button 태그) - 연습 (0) | 2022.09.09 |
블로그의 정보
개발자 미니민의 개발로그
mini_min