드림코딩-반응형 헤더 정리(2, 작은 화면)

반응형 페이지

창이 작아지면 메뉴를 아래로 내려야한다.

 

CSS

@media screen and (max-width: 768px) {

}

우선 반응형을 만들어야해서 미디어쿼리를 사용한다.

 

-로고

    .navbar {
        flex-direction: column;
        align-items: flex-start;
        padding: 8px 24p;
    }

 

navbar의 중심축을 column으로 바꿔준다.

그리고 로고는 왼쪽으로 하고 싶어서 반대축인 flex-start를 flex-start로 바꿔준다.

화면에 여유를 주기 위해서 패딩을 넣는다.

 

-메뉴

.navbar__menu {
    flex-direction: column;
    align-items: center;
    width: 100%;
}

 

마찬가지로 중심축을 column으로 바꾼다. 하지만 메뉴는 가운데에 두고 싶어서 align-items를 center로 한다. 이렇게 하면 변화가 없다. 왜냐하면 너비가 충분하지 않기 때문이다. 그래서 width를 100%로 만들어준다.

 

메뉴의 하이라이트를 전체적으로 하기 위한 코드

.navbar__menu li {
    width: 100%;
    text-align: center;
}

width:100%만 하면 메뉴가 다시 왼쪽으로 가는데 이는 너비가 넓어지면 자동으로 왼쪽으로 정렬되기 때문이다. 그래서 text-align을 center로 바꾼다.

 

-아이콘

.navbar__icons {
    justify-content: center;
    width: 100%;
}

아이콘은 flex의 방향을 바꾸지 않고 중간으로 와야한다.

그래서 justify-content: center를 한다. 하지만 중간으로 오지 않는다.

이는 넓이가 좁아서이다. 그래서 width를 100%로 해준다.

하지만 리스트에 기본으로 적용된 패딩 때문에 정확히 중간이 아니다.

 

.navbar__icons {
    list-style: none;
    color: white;
    display: flex;
    padding-left: 0;
}

위 상황에서는 다시 아이콘으로 가서 패딩을 0으로 만들어주면된다.

 

메뉴 아이템 만들기

-html

<a href="" class="navbar__toogleBtn">
            <i class="fa-solid fa-bars"></i>
        </a>

햄버거 아이콘을 가져와서 넣어줬다.

 

-css

.navbar__toogleBtn {
    position: absolute;
    right: 32px;
    font-size: 24px;
    color: #d49466;
}

아이콘을 flex 박스 안에서 정의하는 것이 아니라 문서의 흐름에서 나와서 오른쪽 위에 배치하고 싶다. 그러면 position을 사용하면된다.

position: absolute;를 하면 왼쪽 위에 배치된다.

right: 32px;면 오른쪽에서 32px 떨어진 곳에 배치 시켜준다.

그리고 크기와 색도 바꿔줬다.

 

그리고 아이콘을 누르면 현재 페이지가 계속 눌린다. 

        <a href="#" class="navbar__toogleBtn">
            <i class="fa-solid fa-bars"></i>
        </a>

그래서 html에 #를 넣어줬다.

 

-출력

작은 화면에서는 잘 나오게 된다.

---

 

하지만 큰 화면에서는

 아이콘이 겹쳐서 나온다. 그래서 화면이 작아졌을 때만 나오도록 바꾼다.

 

-css

.navbar__toogleBtn {
    display: none;
    position: absolute;
    right: 32px;
    font-size: 24px;
    color: #d49466;
}

화면이 작을 때만 나오도록 하기 위해 display를 none로 바꾼다.

 

그리고 미디어쿼리 안에

    .navbar__toogleBtn {
        display: block;
    }

이 코드를 추가하여 화면이 작아졌을 때만 나오도록 한다.

---

이제 작은 화면에서 기본적으로 메뉴 바를 펼치지 않게 하고 버튼을 누르면 펼쳐지게 하고 싶다.

 

그래서 미디어쿼리 안에 있는

    .navbar__menu {
        display: none;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .navbar__icons {
        display: none;
        justify-content: center;
        width: 100%;
    }

.navbar__menu와 .navbar__icons에 display: none를 추가한다.

 

-결과

이렇게 나오게 된다. 이제 버튼을 클릭했을 때, 펼쳐지도록 해야한다. 이것은 JS로 구현한다.

 

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');
});

토글 함수를 사용하여 active를 넣었다가 빼면서 구현해줬다.

 

-css 미디어쿼리

    .navbar__menu.active,
    .navbar__icons.active {
        display: flex;
    }

이 코드를 미디어쿼리 안에 추가한다.

display: flex로 다시 보여준다.

 

색 지정 팁

-css

:root {
    --text-color: #0f4f5;
    --background-color: #263343;
    --accent-color: pink;
}

css에 이렇게 root로 색을 미리 지정해준다.

 

a {
	color: var(--text-color);
}

이렇게 var로 색을 지정할 수 있다.