반응형 헤더 만들기(드림코딩)

0. 레이아웃 구조 파악하기

1) 화면의 가로 크기가 넓은 경우

body
- header
  - logo
  - menu
  - sns

flex(row)와 justify-content: space-between을 사용할 예정

2) 화면의 가로 크기가 좁은 경우

body
- header
  - logo
  - menu
  - sns

flex(column)와 media query를 사용할 예정

1. 구조 만들기

[순서]

1. 전체적인 구조를 시맨틱 태그를 이용해서 만들어준다.

<!DOCTYPE html>
<html>

<head>
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/f8ad50bee4.js" crossorigin="anonymous"></script>
</head>

<body>
    <header>
        <nav>
            <div class="navbar_logo">
               
            </div>

            <div class="navbar_menu">
                
            </div>

            <div class="navbar_icons">
                
            </div>
        </nav>
    </header>
</body>

</html>

2. 아이템이 2개 이상인 것들은 div가 아닌 ul로 묶어서 만들어준다.

<!DOCTYPE html>
<html>

<head>
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/f8ad50bee4.js" crossorigin="anonymous"></script>
</head>

<body>
    <header>
        <nav>
            <div class="navbar_logo">

            </div>

            <ul class="navbar_menu">
                
            </ul>

            <ul class="navbar_icons">
                
            </ul>
        </nav>
    </header>
</body>

</html>

3. 태그 내부에 콘텐츠를 작성해준다.

<!DOCTYPE html>
<html>

<head>
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/f8ad50bee4.js" crossorigin="anonymous"></script> <!-- font awesome에서 이미지를 사용하기 위한 코드-->
</head>

<body>
    <header>
        <nav>
            <div class="navbar_logo">
                <i class="fa-brands fa-accusoft"></i>
                <a href="">DreamCoding</a>
            </div>

            <ul class="navbar_menu">
                <li><a href="">Home</a></li>
                <li><a href="">Gallery</a></li>
                <li><a href="">Weddings</a></li>
                <li><a href="">FAQ</a></li>
                <li><a href="">Bookings</a></li>
            </ul>

            <ul class="navbar_icons">
                <li><i class="fa-brands fa-twitter"></i></li>
                <li><i class="fa-brands fa-facebook-f"></i></li>
            </ul>
        </nav>
    </header>
</body>

</html>

2. CSS 작성하기(넓이가 큰 경우)

✨ style을 작성할 떄는 최상위 레이아웃부터 꾸며주고 그 후에 레이아웃에 내용 부분을 꾸며주는 것이 중요하다. ✨

1. nav 스타일링하기

세로 정렬된 것을 flex로 가로 정렬로 변경
space-between을 사용해서 item들끼리 동일한 간격 부여
세로 가운데 정렬하기 위해서 align-items를 이용
콘텐츠 역역과 웹사이트의 여백을 주기위해서 padding 사용

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #263343;
   	padding: 8px 12px;
}

2. 마진 없애기

1번 결과물 사진을 보면 nav 상하좌우에 여백이 생겼다. 이건 body에 마진이 0이 아니기때문에 생기는 문제이다.

body{
    margin: 0;
}

3. a 태그 스타일 변경하기, logo 텍스트 사이즈 변경

a태그의 밑줄을 없애기위해서 text-decoration: none을 사용

a {
    text-decoration: none;
    color:white;
}

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

4. 로고 이미지 색상 변경

.navbar_logo i {
    color: #d49466
}

5. menu 스타일 변경하기

navbar_menu
- flex(row)를 통해서 가로로 정렬
- list-style을 통해서 dot 없애기
- list는 좌측에 자동으로 padding이 잡히기 때문에 padding-left: 0으로 완전히 중앙 정렬 시켜준다.

navbar_menu li
- 위아래로 8px, 좌우로 12px의 padding을 만들어준다.

navbar_menu li:hover
- 커서를 올리면 색상이 변경되도록 설정
- border-radius로 둥근 각 만들기

.navbar_menu {
    display: flex;
    list-style: none;
    padding-left: 0;
}

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

6. icon 스타일 변경하기

navbar_icons
- flex(row)를 통해서 가로로 정렬
- list-style을 통해서 dot 없애기
- list는 좌측에 자동으로 padding이 잡히기 때문에 padding-left: 0으로 완전히 중앙 정렬 시켜준다.

navbar_icons li
- 위아래로 8px, 좌우로 12px의 padding을 만들어준다.

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

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

3. CSS 작성하기(넓이가 큰 경우)

1. 미디어 쿼리 작성

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

2. nav 스타일 변경하기

flex-dirction을 column으로 변경해서 세로로 정렬
align-items: flex-start를 사용해서 좌측으로 정렬

nav{
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 24px;
   }

3. menu 스타일 변경하기

navbar_menu
- flex-dirction을 column으로 변경해서 세로로 정렬
- align-items: center로 사용해서 중앙으로 정렬
- menu의 width 내부에서만 중앙 정렬을 하기 때문에 menu 자체의 width를 100%로 해주어 웹사이트 자체에서 중앙정렬로

navbar_menu li
- li의 백그라운드 색상을 전체에 적용하기 위해서 width를 100%로 해준다,
- 너비가 넓어졌을 떄 텍스트는 자동으로 좌측으로 정렬되기 때문에 text-align: center로 중앙정렬 해준다.

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

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

4. icon 스타일 변경하기

justify-content: center로 중앙으로 icons을 정렬한다.
icons의 width 내부에서만 중앙 정렬을 하기 때문에 icons자체의 width를 100%로 해주어 웹사이트 자체에서 중앙정렬로

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

저작자표시 비영리

kim.zip