Wecode 첫번째 과제, "html & css를 사용한 나를 소개하는 페이지 만들기"위한 게시글입니다.
처음으로 만들어보는 웹페이지!

---

네비게이션 바 만들기

네비게이션 바를 만들기 위해서 아래 링크를 참조해서 만들어 봤습니다.

• dev.to
  
  

1. HTML

---

• 네비게이션 바를 만들기위한 HTML 구조

html

<header class="header">
        <nav class="navbar">
            <a href="#" class="nav-logo">WebDev.</a>
            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="#" class="nav-link">Services</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Blog</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">About</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Contact</a>
                </li>
            </ul>
            <div class="hamburger">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </div>
        </nav>
</header>

• 기본적으로 header, nav, a, ul, li를 사용
  • header는 회사명, 로고, 메뉴, 검색창등의 위치한다
    • div대신 header를 사용하여 검색엔진이 컨텐츠를 식별하기 쉽게 한다.
  • nav요소는 링크를 보여주는 구획(메뉴, 목차, 색인)이다.
    • 위와 마찬가지로 Semantic tag의 효과를 위해 사용한다.
  • a요소는 href 특성을 통해 URL로 연결하는 하이퍼링크를 만든다
  • ul요소는 순서가 상관없을 때 사용하면 후에 수정하기 편리하다
    
    
• hamburger는 navbar, 사이드메뉴를 만드는 버튼이다.
  • 이후 javascript와 media query를 적용하여 작동하게 한다.

1-2. CSS

---

• 네비게이션 바를 만들기위한 CSS 구조

CSS

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500;1,400&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    font-size: 62.5%;
    font-family: 'Roboto', sans-serif;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
}

• 기초 CSS 스타일을 리셋하고 폰트를 import한다
  • @import url(): @규칙은 다른 스타일 시트에서 스타일 규칙을 가져올때 사용
    • 구글폰트를 가져온 것!!
  • box-sizing: 해당 CSS속성은 요소(element)의 너비와 높이를 계산하는 방법을 지정
    • border-box: width/height 속성이 padding,border을 포함/margin을 포함하지 않는다
  • font-family: import해온 font-family를 html요소 전역에 적용
    • @import url() → html(다른 요소 가능)에 font-family를 적용해야 한다
  • list-style: list의 말머리표의 스타일을 지정한다
    • none: 해당 값을 주어 말머리표를 없앤다
  • text-decoration: 텍스트 밑줄의 스타일을 지정한다. 재밌는 기능 써보자

CSS

.header{
    border-bottom: 1px solid #E2E8F0;
}
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
}
.hamburger {
    display: none;
}
.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: #101010;
}

• header태그에 적용된 CSS

  • border-bottom: 1px solid #E2E840;
    • header의 아래 border에 1px 크기의 밝은 회색 solid줄을 적용(디자인적 요소!)

• nav태그에 적용된 css속성

  • display: flex;
    • Flex 컨테이너에 적용하는 속성으로 Flex 아이템들을 가로 방향 배치(inline처럼 작용)
      • 🤷🏻‍♂️블로그로 정리해보자(나중에 만들면 여기에 링크삽입하자)
  • justify-content: space-between;
    • Flex 컨테이너의 main-axis(가로)축의 간격을 동일하게 적용한다
  • align-items: center;
    • Flex 컨테이너의 cross-axis(세로)축의 위치를 중앙으로 한다.

• div.hamburger에 적용된 css속성

  • display: block;
    • 요소의 디스플레이를 끈다. 그러므로 레이아웃에 아무런 영향도 주지않는다.
      • 🤷🏻‍♂️블로그로 정리해보자(나중에 만들면 여기에 링크삽입하자)

• div.hamburger에 적용된 css속성

  • display: none;
    • 요소의 디스플레이를 끈다. 그러므로 레이아웃에 아무런 영향도 주지않는다.
      • 🤷🏻‍♂️블로그로 정리해보자(나중에 만들면 여기에 링크삽입하자)

• span.bar에 적용된 css속성

  • display: none;
    • 요소의 디스플레이를 끈다. 그러므로 레이아웃에 아무런 영향도 주지않는다.
      • 🤷🏻‍♂️블로그로 정리해보자(나중에 만들면 여기에 링크삽입하자)