프론트엔드 강의 (드림코딩 by 엘리)
https://github.com/dream-ellie
- 웹사이트 따라만들기, 반응형 헤더편 (HTML, CSS, Javascript)
- CSS Flexbox 완전 정리
웹사이트 따라만들기, 반응형 헤더편 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript
https://www.youtube.com/watch?v=X91jsJyZofw
https://dream-ellie.github.io/responsive-nav-bar/index.html
# index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap"
rel="stylesheet"
/>
<title>Nav bar</title>
<script
src="https://kit.fontawesome.com/2d323a629b.js"
crossorigin="anonymous"
></script>
<script src="main.js" defer></script>
</head>
<body>
<!-- Nav container -->
<nav class="navbar">
<!-- Logo with text -->
<div class="navbar__logo">
<i class="fab fa-accusoft"></i>
<a href="">DreamCoding</a>
</div>
<!-- Menu -->
<ul class="navbar__menu">
<li><a href="">Home</a></li>
<li><a href="">Gallery</a></li>
<li><a href="">Weddings</a></li>
<li><a href="">FAQ</a></li>
<li><a href="">Bookings</a></li>
</ul>
<!-- Icons -->
<ul class="navbar__icons">
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-facebook-f"></i></li>
</ul>
<!-- Toggle button -->
<a href="#" class="navbar__toggleBtn">
<i class="fas fa-bars"></i>
</a>
</nav>
</body>
</html>
# main.js
const toggleBtn = document.querySelector('.navbar__toggleBtn');
const menu = document.querySelector('.navbar__menu');
const icons = document.querySelector('.navbar__icons');
toggleBtn.addEventListener('click', () => {
menu.classList.toggle('active');
icons.classList.toggle('active');
});
# style.css
/* Global */
:root {
--text-color: #f0f4f5;
--background-color: #263343;
--accent-color: #d49466;
}
* {
/* Tells the browser to account for any border and
padding in the values you specify for an element's
width and height. */
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Source Sans Pro';
}
a {
text-decoration: none;
color: var(--text-color);
}
/* Nav container */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
background-color: var(--background-color);
}
/* Logo with text */
.navbar__logo {
font-size: 24px;
color: var(--text-color);
}
.navbar__logo i {
color: var(--accent-color);
}
/* Menu */
.navbar__menu {
display: flex;
padding-left: 0;
list-style: none;
}
.navbar__menu li {
padding: 8px 12px;
}
.navbar__menu li:hover {
background-color: var(--accent-color);
border-radius: 4px;
}
.navbar__icons {
list-style: none;
color: var(--text-color);
display: flex;
padding-left: 0;
}
/* Icons */
.navbar__icons li {
padding: 8px 12px;
}
/* Toggle button */
.navbar__toggleBtn {
display: none;
position: absolute;
right: 32px;
font-size: 24px;
color: var(--accent-color);
}
/* For small screen */
@media screen and (max-width: 768px) {
/* Nav container */
.navbar {
flex-direction: column;
align-items: flex-start;
padding: 8px 24px;
}
/* Menu */
.navbar__menu {
display: none;
flex-direction: column;
text-align: center;
width: 100%;
}
.navbar__menu a {
/* Fill in an entire line so that user can click on any space */
display: block;
}
/* Icons */
.navbar__icons {
display: none;
justify-content: center;
width: 100%;
}
/* Toggle button */
.navbar__toggleBtn {
display: block;
}
/* When toggle button is clicked - active state */
.navbar__menu.active,
.navbar__icons.active {
display: flex;
}
}
CSS Flexbox 완전 정리
https://www.youtube.com/watch?v=7neASrWEFEM
# container 에 들어가는 속성
display
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
# item 에 들어가는 속성
order
flex-grow
flex-shrink
flex
align-self
# 아이템을 화면의 크기로 맞추기 (vh 단위)
// .container 의 height 를 100vh 로 하게되면 body 와 html 을 100%로 안해줘도 화면에 꽉차게 된다.
body, html {
height: 100%;
}
.container {
background: beige;
height: 100%;
display: flex;
}
# emmet 사용해서 자동완성
div.container>div.item.item${$}*10
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
<div class="item item9">9</div>
<div class="item item10">10</div>
</div>