본문 바로가기
○ WEB/19.03 FastCampus_CSS

[드림코딩] 반응형 헤더(Responsive Header) 만들기. 종합 정리

by 0ver-grow 2021. 3. 2.
반응형

간단하게 반응형 헤더를 만들어보자

이를 위해 사용할 파일 3가지

  • index.html
  • style.css
  • main.js

1 단계 : 기본적인 반응형 웹 형태 만들기

1. html

1-1. head

- 구글 폰트에서 사용할 폰트의 링크를 복사,붙여넣기

- 폰트 어썸의 CDN을 복붙한다. 우측 최상단 프로필이미지 클릭 > CDN 클릭

 

 

현재 index.html의 헤드태그는 다음과 같다.

<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">
    <link rel="stylesheet" href="css/style.css"> <!--css파일 위치-->
    <link rel="preconnect" href="https://fonts.gstatic.com">
	<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
    <title>Document</title>
    <script src="https://kit.fontawesome.com/---.js" crossorigin="anonymous"></script> <!--폰트어썸 src-->
    <script src="main.js" defer></script><!--defer을 통해 코드를 받을 때까지 화면에 표시되지 않는 것을 방지-->
</head>

 

1.2 body

참고로 Font Awesome에서 이미지의 Copy HTML은 다음 위치에 있으며 이를 body태그에 넣어준다.

 

 

현재 body 태그

<body>
    <nav class="navbar">
        <div class="navbar__logo">
            <i class="fab fa-amazon"></i> <!--아마존 로고-->
            <a href="">InformationCenter</a>
        </div>
        <div class="navbar__menu"></div>
        <div class="navbar__links"></div>
    </nav>
</body>

 

여기서 잠깐!

코드를 수정하는 즉시 새로고침없이 확인할 필요가 있다.

Live Server라는 Vscode 익스텐션을 활용하면 된다.

설치했다면 F1 > Live Server 익스텐션을 실행시켜서 바로 파악하자

 

 

이후 나머지 태그를 채워주면 전체 코드는 다음과 같다.

<!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">
    <link rel="stylesheet" href="css/style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
	<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
    <title>Document</title>
    <script src="https://kit.fontawesome.com/---.js" crossorigin="anonymous"></script>
    <script src="main.js" defer></script><!--defer을 통해 코드를 받을 때까지 화면에 표시되지 않는 것을 방지-->
</head>
<body>
    <nav class="navbar">
        <div class="navbar__logo">
            <i class="fab fa-amazon"></i> <!--아마존 로고-->
            <a href="">InformationCenter</a>
        </div>
        <!--일렬정렬위해 div태그보단 순서있는 ul태그 활용-->
        <ul class="navbar__menu">
                <li><a href="">home</a></li>
                <li><a href="">Gallery</a></li>
                <li><a href="">Service</a></li>
                <li><a href="">FAQ</a></li>
                <li><a href="">Contact</a></li>
        </ul>
        <ul class="navbar__icons">
            <li><i class="fab fa-facebook"></i></li>
            <li><i class="fab fa-google"></i></li>
        </ul>
    </nav>
</body>
</html>

현재 상태

 

 

2. CSS 스타일링

CSS를 진행할 때는 다음 순서대로 진행하는 것이 좋다.

1. body태그의 최상위 박스부터 레이아웃 배치

2. 나머지 박스를 세부적으로 꾸며줄 것

 

현재는 nav태그(클래스명 navbar)가 최상위이므로 nav를 먼저 꾸며주자.

.navbar{
    display : flex; 
    justify-content: space-between; /*중심축 배치 (현재는 중심축이 수평축)*/
    align-items: center; /*반대축(현재는 반대축이 수직축)의 속성값 활용 */
    background-color:olive;
    padding : 8px 12px; /*위아래 8px, 양옆 12px*/
}

 

body {
    margin : 0; /*바디태그 margin defalut값 때문에 흰선 발생. 이를 제거*/
    font-family: 'Source Sans Pro';
}
a {
    text-decoration: none;/*모든 ankor태그의 컨텐츠에는 defalut로 밑줄 존재. 이를 제거*/
    color :black;
}


.navbar__logo{
    font-size: 24px;
    color:white;
}

.navbar__logo i{
    color : black;
}

.navbar__menu {
    display: flex; /*메뉴를 일렬로 배치*/
    list-style: none; /*ul태그의 점을 제거*/
    padding-left: 0; /*패딩때문에 우측으로 치우쳐있는것을 되돌림*/
}

.navbar__menu li{
    padding : 8px 12px; /*마우스 클릭영역확보*/   
}

.navbar__menu li:hover {
    background-color: yellow;
    border-radius: 10px; /*테두리 둥글게*/
}

.navbar__icons{
    padding-left : 0px; /*가운데 정렬*/
    list-style: none;
    color : white;
    display: flex;
}

.navbar__icons li {
    padding : 8px 12px;
}

/*
레이아웃을 반응형으로 만들때는 media쿼리 사용
특정 사이즈 이하가 될 경우, 웹 사이트의 메뉴가 제대로 보이지 않음
이럴때 메뉴바를 아래로 내려가도록 만들자.
*/

@media screen and (max-width:768px) {
    /*로고,메뉴바가 수직으로 나오도록*/
    .navbar {
        flex-direction: column;
        align-items : flex-start; /*로고,메뉴바 모두 왼쪽 정렬*/
        padding : 8px 24px; /*hover시 한줄 가득 색상표시 안되도록 */
    }
    /*메뉴바가 한줄에 하나씩*/
    .navbar__menu{
        flex-direction: column;
        align-items: center; /*메뉴바만 가운데 정렬 */
        width : 100%; /*메뉴바의 가운데 정렬을 위해 너비를 늘림*/
    }

    /*메뉴바 hover시 컨텐츠박스가 아닌 한 줄에 색상표시 */
    .navbar__menu li{
        width: 100%;
        text-align: center; /*text는 왼쪽 정렬이 기본값이므로 center로 수정*/
    }

    /*로고를 가운데로*/
    .navbar__icons {
        justify-content: center; /*로고는 현재 반대축이므로 justify-content 사용*/
        width : 100%;
    }
}

 

현재 화면

1. 기존 사이즈

 

 

 

2. 화면 크기 줄였을 때

 

2 단계 : 햄버거 메뉴바안에 메뉴들이 들어가도록 만들어보자

햄버거 메뉴바 이미지 가져와서

html문서의 nav태그안에 붙여넣자

        <!--햄버거 메뉴-->
        <!--href="#"을 하면 클릭시 새로고침안됨-->
        <a href="#" class="navbar__toogleBtn">
            <i class="fas fa-bars"></i>
        </a>

현재위치

 

 

좌측 최하단에 있는 햄버거 메뉴바를 우측 최상단에 배치해보자

 

이를 위해선 기존 문서에서 나와야한다.

position : absolute를 쓰면 가능!

 

style.css

.navbar__toogleBtn {
    position: absolute; /*소속된 배치와 무관하게 위치 설정*/
    right : 15px; /*우측에서 32px 거리둠*/
    font-size: 24px;
    color : black;
}

 

현재 화면

 

문제 발생, 화면을 크게하면 겹쳐서 나옴

 

 

햄버거 메뉴는 화면이 작을 때만 나오도록 만들자

display: none; 를 추가한다.

style.css

.navbar__toogleBtn {
    display: none; /*일반 사이즈에선 나타나지 않음*/
    position: absolute; /*소속된 배치와 무관하게 위치 설정*/
    right : 15px; /*우측에서 32px 거리둠*/
    font-size: 24px;
    color : black;
}

width:768이하에서 나오도록 @media에 다음 코드를 추가한다.

style.css

@media screen and (max-width:768px) {
/*토글,햄버거 버튼*/
    .navbar__toogleBtn{
        display: block;
    }
}

 

3 단계 : 특정 사이즈 이하일 때는 메뉴들이 토글 버튼, 햄버거 버튼안으로 들어가도록 만들자

숨길 항목들에 display: none; 추가하자.

style.css

@media screen and (max-width:768px) {
	/*메뉴바가 한줄에 하나씩*/
    .navbar__menu{
        display: none; /*현 사이즈에선 메뉴가 나타나지 않음*/
        flex-direction: column;
        align-items: center; /*메뉴바만 가운데 정렬 */
        width : 100%; /*메뉴바의 가운데 정렬을 위해 너비를 늘림*/
    }
        /*로고를 가운데로*/
    .navbar__icons {
        display: none; /*현 사이즈에선 아이콘이 나타나지 않음*/
        justify-content: center; /*로고는 현재 반대축이므로 justify-content 사용*/
        width : 100%;
    }
}

 

현재 화면

 

JS 활용하기

이제 Javascript로 이벤트 처리하자

main.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'); // 클릭시 active없으면 active추가
    icons.classList.toggle('active');
});

그 후 active를 추가하자

style.css

@media screen and (max-width:768px) {
    /*active요소 추가*/
    .navbar__menu.active,
    .navbar__icons.active {
        display :flex;
    }
}

결과화면

 

 

텍스트 색상, 배경 색상을 한번에 쉽게 바꾸고 싶다면?

:root를 쓰면 된다.

현재 활용하고자 하는 텍스트, 배경, 엑센트 컬러를 추가하면 다음과 같다.

style.css

:root {
    --text-color : #f0f4f5;
    --background-color: olive;
    --accent-color : #d49466;
}

그리고 이 컬러를 적용시킬 요소에는 다음과 같이 작성한다.

예를 들어 a태그의 text색상을 --text-color와 동일한 색상으로 바꾸고 싶다면

style.css

a {
    text-decoration: none;/*모든 ankor태그의 컨텐츠에는 defalut로 밑줄 존재. 이를 제거*/
    color :var(--text-color);
}

위와 같이 공통되는 텍스트, 배경, 로고 등에 반영하면 된다.

폰트 어썸 : 다양한 로고, 아이콘을 제공해주는 사이트

 

구글 폰트 : 다양한 폰트 다운로드

 

반응형
저작자표시 비영리

'○ WEB > 19.03 FastCampus_CSS' 카테고리의 다른 글

[드림코딩] 무료 폰트, 무료 로고 이미지 사이트  (0) 2021.03.03
[드림코딩] CSS : em, rem / Responsive CSS Units  (0) 2021.03.02
[드림코딩] CSS 기초 : padding, display, position, flexbox, justify, align  (0) 2021.03.01
font-family  (0) 2019.07.27
input, button 태그의 외부, 내부링크 걸기 / href / onClick  (0) 2019.07.26

관련글

티스토리툴바