Strength & Honor

반응형 헤더 만들기

반응형 헤더를 만들어 보자.
유투버 드림코딩의 엘리님의 강의를 기초로 작성이 되었다.

우선 아래와 같은 헤더를 만들 예정이다.
만들면서 사용한 CSS 코드는 나의 메인 CSS 와 충돌나는 문장들이 있어 이 부분은 나에게 맞게 수정을 하였다.

여기에서 사용한 아이콘들은 "fontawesome.com" 이라는 사이트에서 가져와 사용했다.
우선 아래와 같이 html 파일에 입력 해 본다.

            
    <!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">
        <title>Practice</title>
        <link rel="stylesheet" href="practice.css">
        
    </head>

    <body>
        <script src="https://kit.fontawesome.com/ec520b0579.js" crossorigin="anonymous"></script>
        
        <nav class="navbar">
            <div class="navbar__logo">
                <i class="fab fa-old-republic"></i>
                <a href="">Strength & Honor</a>

            </div>

            <ul class="navbar__menu">
                <li><a href="">Home</a></li>
                <li><a href="">Macbook</a></li>
                <li><a href="">Html</a></li>
                <li><a href="">CSS</a></li>
                <li><a href="">JavaScript</a></li>
                <li><a href="">Python</a></li>

            </ul>

            <ul class="navbar__icons">
                <li><i class="fas fa-home"></i></li>
                <li><i class="fas fa-at"></i></li>
                <li><i class="fab fa-linkedin"></i></li>
                
            </ul>

            <a href="#" class="navbar__tooggleBtn">
                <i class="fas fa-bars"></i>
            </a>
        </nav>

    </body>
    </html>

head 태그란에 "practice.css" 파일을 링크 해 놓았다.
물론 지금부터 css 파일을 이용 해 꾸며 볼 것이다.
또한 이미지 및 아이콘을 가져오기 위해 "awesome.com" 사이트에서 자바스크립트 파일을 가져왔다.
엘리님은 head 태그에 넣으라고 했지만 난 body 태그에 넣었다.

head 태그에 넣으면 종종 에러가 발생할 수 있으니 body 태그에 자바스크립트를 넣는 것은 생활화 하자.
그리고 자바스크립트는 웹사이트 만들때 body 태그 안에서 필요할 때 언제든지 본인이 넣고자 하는 곳에 넣을 수 있으므로 위치에 대해서는 그리 크게 고민하지 않아도 된다.

위에서 i 태그가 있는데 이것은 "awesome" 페이지에서 이미지를 가지고 오기 위해서 복사 및 붙여넣기 한 값이다.

위에서 보면 기본적으로 네비게이션 바 를 위한 nav 태그 이외에는 ul 태그와 li 태그로 구성이 되어 있는 것을 기억 해 보자.

css 에서 꾸미지 않았기에 일단 아래와 같이 보일 것이다.

css 파일에 아래와 같이 입력 해 본다.


  .navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgb(9, 108, 173);
  padding: 0px 12px;
  }

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

그럼 아래와 같이 보일 것 인데, 여기서 css 파일을 해석 해 보면,
일반적으로 태그로 묶인 것들은 세로 배치가 된다.
display 를 flex 로 해 놓은 것은 가로로 정렬 해 보자 라는 것으로 쉽게 이해해 보자.
그 다음 문장인 justify-content: space-between 은 로고, 메뉴 그리고 아이콘 이미지와의 간격을 동일하게 주자는 명령이다.
align-items: center 는 위 3가지 부분들이 세로 기준, 중앙으로 배치하래는 명령어이다.

그런데 이렇게 하면 화면에서 좌우에 공백이 나타난다.
자 ~~~ 오늘은 여기까지 아다.

CSS

Wizzen2801

One Day, One New!

Strength & Honor

반응형 헤더 만들기

Categories

CSS

Wizzen2801