반응형
<!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>JavaScript</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/38203a6f84.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar">
<div class="navbar__logo">
<i class="fab fa-js"></i>
<a href="#">Hello JS</a>
</div>
<ul class="navbar__menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">TimeJS</a></li>
</ul>
<ul class="navbar__icon">
<li><a href="https://github.com/yohrran/pc"><i class="fab fa-github"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
</ul>
<div class="navbar__toggle">
<i class="fas fa-bars"></i>
</div>
</nav>
<script src="index.js"></script>
</body>
</html>body {
margin: 0;
}
a {
text-decoration: none;
color: #000000;
}
.navbar {
display: flex;
justify-content: space-between;
background-color: #ffff00;
align-items: center;
padding: 8px 12px;
}
.navbar__logo {
font-size: 26px;
}
.navbar__menu {
display: flex;
list-style: none;
padding-left: 0;
}
.navbar__menu li {
padding: 8px 12px;
font-size: 24px;
}
.navbar__menu li:hover {
background-color: #78909c;
border-radius: 4px;
}
.navbar__icon {
display: flex;
font-size: 24px;
list-style: none;
padding-left: 0;
}
.navbar__icon li {
padding: 5px 5px;
}
.navbar__toggle {
position: absolute;
right: 5px;
padding: 15px 12px;
display: none;
}
@media screen and (max-width: 768px) {
.navbar {
flex-direction: column;
align-items: flex-start;
}
.navbar__logo {
padding: 8px 12px;
}
.navbar__menu {
display: none;
flex-direction: column;
align-items: center;
width: 100%;
}
.navbar__menu li {
text-align: center;
width: 100%;
}
.navbar__icon {
display: none;
justify-content: center;
/* 중간 정렬 */
width: 100%;
}
.navbar__toggle {
display: block;
}
.navbar__menu.watch,
.navbar__icon.watch{
display: flex;
}
}const toggle = document.querySelector(".navbar__toggle");
const menu = document.querySelector(".navbar__menu");
const icon = document.querySelector(".navbar__icon");
toggle.addEventListener("click", () => {
menu.classList.toggle("watch");
icon.classList.toggle("watch");
console.log("hello");
});
바닐라코딩을 시작하면서 첫 주차 과제를 하며 HTML, CSS 부분에 대해서 부족한 부분이 많았다. 늘 같이 이야기해주시는 N님께서 HTML과 CSS를 이용해 작은 웹사이트를 만들어보면 어떻게 돌아가고, 작은 명령어들을 알 수 있다고 했는데 이리 핑계 저리 핑계를 대다가 결국 탈이 났다.
그래서 주말동안 HTML 과 CSS를 다시 공부하고 작은것부터 다시 보았다. 이번에 만든 것은 예전에 한 번 만들었던건데, media쿼리를 이용해서 창의 상태가 작아지면 글씨가 flex-colum으로 보이게하고, 햄버거버튼을 누르면 사라졌다, 보였다 할 수 있게 만들었다.
그리고 창크기가 일정이상 커지면 길게 나오게 만들어주었다. a태그를 주어서 각 태그를 누르면 이동할 수 있게 다음에는 구현해봐야겠다. 예를 들면 각 부분을 누르면 그에 따른 내용 페이지가 나오게 하거나, 다음에는 여행을 테마로 각 버튼을 누르면 여행지에 대한 정보가 나오고 그 여행지를 찾아 갈 수 있는 정보들이 담기고 한 번 구현해봐야겠다.
반응형
'Frontend' 카테고리의 다른 글
| 객체지향프로그래밍이란? (0) | 2021.11.07 |
|---|---|
| 사이드작업 / 웹페이지 따라 만들기 (0) | 2021.08.18 |
| 30일 챌린지 1일차 (0) | 2021.07.01 |
| 계산기 만들기 (0) | 2021.06.28 |
| 바닐라코딩 마지막 과정_koans (0) | 2021.06.26 |