안녕하세요
5월30일 11일차 - 반응형 화면 구현하기 본문
반응형화면으로 메뉴를 구성하는 방법을 배웠습니다.
큰 화면에서는 헤더에 메뉴들이 나열되어 있습니다.
화면의 크기가 지정된 크기 이하로 작아진 화면에서는 메뉴들이 사라지고, 버튼이 생깁니다.
버튼을 누르면 슬라이드로 메뉴창이 나옵니다.
주석 입력 방법입니다. 협업을 할 때에는 ~를 누가 ~를 언제 수정했다. 하고 기록을 남기는 것이 중요합니다.
<div class="Wrap">
<!-- { 2022.05.30 young -->
<header class="header"></header>
<!-- 2022.05.30 young } -->
/* 2022.05.30 young */
.header {}
// 2022.05.30 young
document.querySelector('.header').style.color = 'red'
html 기본 틀입니다.
<body>
<div class="Wrap">
<!-- { 2022.05.30 young -->
<header class="header">
</header>
<!-- 2022.05.30 young } -->
<main>
</main>
<footer>
</footer>
</div>
</body>
없애기 none의 대척점에 있는 나타내기 는block 입니다.
display: none; <-> display: block;
!important는 css가 js보다 우선하게 하는 방법입니다.
하지만 기억만 해 둘 뿐 실제로 이용할 일은 거의 없습니다. 작업이 미숙하다는 느낌을 받게 됩니다.
.header {
color: blue !important;
}
반응형으로 만드는 방법입니다. 768px 이하의 사이즈일 경우에 적용됩니다. 기준 768px는 아이패드 가로사이즈였습니다.
max-width:768px 는 화면의 크기가 768px보다 작을 경우 적용되도록 한다는 의미입니다.
@media (max-width:768px) {
.header {
color: red;
}
}
모바일버전과 pc버전 간 화면을 전환하는 버튼을 만들 때 이용하는 방법입니다.
<div class="mopen">open</div>
.mopen {
display: none;
}
@media (max-width:768px) {
.mopen {
display: block;
}
}
반응형 화면을 구현해봅니다.
작동원리는 만들어 둔 css 속성을 @media 안에 붙여 넣고 필요한 속성만을 골라서 바꾸면 됩니다.
@media (max-width:1000px) {
.header {
line-height: 100px;
}
.header .container {
display: flex;
justify-content: space-between;
width: auto; /* 1200px 고정이 아니라 화면 크기에 따라 변화하는 auto 로 설정합니다. */
margin: 0 auto;
}
.header .container ul {
display: flex;
gap: 40px;
}
.header .container ul {
display: flex;
flex-direction: column;
gap: 0;
line-height: 40px;
}
위와 같이 속성들을 바꿉니다.
메뉴 버튼을 누를 때 left: -100%; 값이 left: 0;이 되도록 하면 숨기고 나타나도록 할 수 있습니다.
nav {
position: fixed;
top: 0;
left: -100%;
width: calc(100% - 90px);
height: 100vh;
z-index: 999;
}
nav.on {
left: 0;
}
js에서 click 이벤트를 구현합니다.
document.querySelector('.mopen').addEventListener('click', function() {
document.querySelector('nav').classList.toggle('on')
})
부드럽게 만들기 위해 transition을 줍니다.
nav {
position: fixed;
top: 0;
left: -100%;
width: calc(100% - 90px);
height: 100vh;
background: #ff0;
z-index: 999;
transition: left 0.5s;
}
메뉴박스를 x로 바꿉니다.
document.querySelector(".mopen").addEventListener("click", function () {
document.querySelector("nav").classList.toggle("on");
this.classList.toggle("on");
});
.mopen.on span:nth-child(1) {
display: none;
}
.mopen.on span:nth-child(2) {
transform: rotate(45deg);
}
.mopen.on span:nth-child(3) {
transform: rotate(-45deg);
}
.mopen.on span:nth-child(4) {
display: none;
}
'프론트엔드 국비교육' 카테고리의 다른 글
| 06월02일 13일차 - 단일 메뉴, 다단메뉴 애니메이션 구현. 애니메이션은 중간단계가 필요합니다. (0) | 2022.06.02 |
|---|---|
| 5월31일 12일차 - slick 슬라이드 버튼 구현 [jquery] (0) | 2022.06.01 |
| 2주차 정리 (05/23 ~ 05/27) (0) | 2022.05.30 |
| 5월27일 10일차 - slick-slider, 가상요소선택자로 pattern 입히기 (0) | 2022.05.28 |
| 5월26일 9일차 - side menu, keyframes 구현 (0) | 2022.05.27 |
