애플 사이트 클론 코딩을 하다가... css 기본부터 다시 잡아야겠다는 생각이 들어 드림코딩 엘라님의 프론트엔드 기본 강의들을 정주행이다. 계속 듣다보니까 어렵다고 생각했던 css도 확실히 예전에는 보이지 않았던 것들이 보이고, 예전에는 미처 생각하지 못했던 부분들을 생각하게 되는 것 같다 ^_^
유튜브 드림코딩 - 웹사이트 따라 만들기, 반응형 헤더만들기
결과물
[HTML - index.html]
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;900&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/914499d568.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="navbar">
<div class="navbar__logo">
<i class="fab fa-accusoft"></i>
<a href="#">Dream Coding</a>
</div>
<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>
<ul class="navbar__icons">
<li><i class="fa-brands fa-twitter"></i></li>
<li><i class="fa-brands fa-facebook-f"></i></li>
</ul>
<a href="#" class="navbar__tooglebtn">
<i class="fa-solid fa-bars"></i>
</a>
</div>
</body>
<script src="js/main.js"></script>
</html>
|
cs |
[CSS - css/main.css]
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
body {
font-family: 'Noto Sans KR';
margin: 0;
}
a {
text-decoration: none;
color: white;
}
ul {
list-style:none;
padding-left:0px;
}
.fab {
color: orange;
}
.navbar {
display: flex;
background-color: black;
justify-content: space-between;
align-items: center;
padding: 8px 24px;
}
.navbar__logo {
font-size: 18px;
}
.navbar__menu {
display: flex;
font-size: 14px;
}
.navbar__menu li {
padding: 8px 12px;
}
.navbar__icons {
color: white;
display: flex;
}
.navbar__icons li {
padding: 8px 12px;
}
.navbar__tooglebtn {
display: none;
position: absolute;
right: 32px;
}
@media screen and (max-width: 768px) {
.navbar {
flex-direction: column;
align-items: flex-start;
}
.navbar__logo {
}
.navbar__menu {
display: none;
flex-direction: column;
align-items: center;
width: 100%;
}
.navbar__menu.active,
.navbar__icons.active {
display: flex;
}
.navbar__icons {
/* flex-direction: column; */
display: none;
width: 100%;
justify-content: center;
}
.navbar__tooglebtn {
display: block;
}
}
|
cs |
[Javascript - js/main.js]
|
1
2
3
4
5
6
7
8
9
10
11
12
|
const toggleBtn = document.querySelector('.navbar__tooglebtn');
const menu = document.querySelector('.navbar__menu');
const icons = document.querySelector('.navbar__icons');
toggleBtn.addEventListener('click', () => {
clickToggleBtn();
});
const clickToggleBtn = () => {
menu.classList.toggle('active');
icons.classList.toggle('active');
}
|
cs |
이번 클론코딩하고 배운점
- toggle 버튼의 경우 classList.toggle을 통해 css를 추가/제거 하는구나
- flexbox의 중요성. 자유자재로 쓸 줄 알아야 한다
- 의미없는 div태그의 반복을 줄이고, 최대한 의미 있는 태그를 넣어야 한다 (ex. ul, nav 태그처럼)
- 화면 작게 만들땐 media query의 max-width 사용하기
- font awesome icon
반응형
'Front-end > CSS' 카테고리의 다른 글
| [CSS/Tailwind] Tailwind 연습하기 (0) | 2022.06.22 |
|---|---|
| [CSS] 애플 웹사이트 인터랙션 클론! (인프런 강의 추천 및 후기) (0) | 2022.06.15 |
