드림코딩 by 엘리 의 <프론트엔드 개발자 되기 - 입문편> 14번째 강의!
반응형 헤더를 만들어보는 시간입니다. 강의를 보지않고 혼자만의 힘으로 먼저 만들어 보고, 추가 해야하는 사항과 미흡했던 부분을 위주로 공부해보겠습니다.
재밌게 봐주세요 🤓
오늘의 목표
반응형으로 일정 크기 이하로 떨어졌을 때 모바일 버전? 으로 바꿔주면 됩니다.
강의를 보지않고 30분동안 열심히 만든 결과는... 비참했습니다 😂
내 실력은 어디쯤
얼추 비슷하게는 나온거 같은데.. 뭔가 부족해 보입니다. 이미 알고있는 내용이어도 막상 시간안에 해보자!! 라고 하니 생각이 잘 안나고, 큰 그림이 그려지지 않았습니다. 디테일한 부분을 많이 놓친것 같습니다. 시간이 부족했던걸로 하자ㅎㅎ
추가해야하는 부분을 차례대로 살펴보겠습니다!
body
보통 시작할 때 css default 설정을 해놓고 하는데.. 왜 안했지?
nav 바 양쪽과 위로 흰색 여백이 있습니다. 바로 없애줍니다!
body {
margin: 0;
}padding
로고 이미지와 햄버거 바가 양쪽으로 딱 달라붙어 있습니다. 상하좌우로 패딩을 넣어줘 조금 널널하게? 해주겠습니다. ul 태그도 마찬가지로 기본 margin 과 padding 이 들어있었습니다. 같이 바꿔줍니다.
.nav_bar {
padding: 8px 12px;
}
.list {
margin: 10px;
padding: 0;
}media
@media screen and (min-width : 800px) 와 @media screen and (max-width : 800px) 로 2가지 경우로 나눠서 코드를 구현했는데, 생각해보니 하나만 정의해놔도 나머지는 자동으로 적용이 가능합니다. 태블릿 모드는 구현하지 않고 웹이랑 모바일 2가지 경우로 (2가지 case) 하는게 문제였기 때문에 굳이 그렇게 나눌 필요가 없는것 같습니다.
결론 - max-width : 800px 하나만 해주면 됩니다.
햄버거 위치
저는 nav 박스의 로고 컨테이너 안에다가 로고 이미지의 동등 위치에 선언해주었습니다. 모바일 버전에서는 display: block; 으로 보여지게하고, 웹에서는 display: none; 으로 안보이게 구현했습니다. 아쉽게도 display: none; 을 생각해낸것은 정확했지만, 선생님은 햄버거를 선언 해준 다음 position 속성을 이용해서 강제로, 상대적으로(?) - absolute 를 이용해서 위치 시켰습니다!!! ( 이 생각을 왜 못했을까 ) 이게 더 효과적인것 같습니다. 햄버거 객체만 독립적으로 다룰 수 있기 때문입니다.
이벤트 처리
javascript 를 이용합니다. Refri Bank에서 토글 버튼으로 구현해본적이 있으니 참고하면 좋을것 같습니다! 정답 코드는 제가 구현했던 리액트에서의 토글 버튼 구현이랑은 조금 다르지만 비슷한 느낌이어서 이해하기 쉬웠습니다.
CSS
.navbar_toogleBtn.active , .navbar_icons.active{
display: flex;
}JS
const toggleBtn = document.querySelector('.navbar _toogleBtn');
const menu = document.querySelector('.navbar menu');
const icons = document.querySelector('.navbar _icons');
toggleBtn.addEventListener('click', ()=> {
menu.classList.toggle('active');
icons.classList.toggle('active');
});시간 안에 하려고 하니 좀.. 버거운 감이 있지만!
그래도 지금까지 차근차근 이론부터 공부해왔던 개념들이 막힘없이 쓰여지고 적용도 잘 되는걸 보니 공부를 잘못했던건 아니구나 라는걸 깨닫는 좋은 시간이었습니다 ⭐️
