[깃허브 예제] header에 왼쪽 menu부분 만들기

 <header class="section"> 
        <div class="inner">
            <div class="menu-group">
                <div class="logo">
                    <a href="#">GitHub</a>
                </div>
                <ul class="main-menu">
                    <li><a href="#">Personal</a></li>
                    <li><a href="#">Open source</a></li>
                    <li><a href="#">Business</a></li>
                    <li><a href="#">Explore</a></li>
                </ul>
            </div>

        </div>
    </header>

먼저 header부분에 왼쪽에 있는 표시된 부분부터 만들어보자

header태그로 만들어 주고 그 안에 inner이라는 div태그를 만든다음

그 안에 menu-group이라는 div태그로 감싼다음!!

로고와 main-menu가 있다. 

모두들 누를 수 있는 항목이기에 a태그를 사용하여 만들었다.

 

 

---

/* header */
  header{
    border-bottom: 1px solid rgba(0,0,0,0.075);
    box-shadow: 0 0 5px rgba(0,0,0,0.75);
    background: #fff;

  }
  header .inner{
    max-width: 980px;
    height: 78px;
    margin: 0 auto;
    background-color: red;
  }

 

header에 inner에 왜 height 을 78px로 하는가 (header에 안하고?)

inner의 height를 정해주면 header가 저절로 정해주기 때문이다. 

header의 height는 auto이기 때문

 

가로 가운데 정렬 margin: 0 auto;

이것은 가로 길이가 정해져있어야 사용할 수 있음

inner의 역할은 header 안의 모든 컨텐츠들을 가로너비를 가지고 중앙정렬을 해주도록 하는 것이므로

매번 선택자를 css에 안적어도 된다

 

---

  /* header */
  header{
    border-bottom: 1px solid rgba(0,0,0,0.075);
    box-shadow: 0 0 5px rgba(0,0,0,0.75);
    background: #fff;

  }
  header .inner{
    max-width: 980px;
    height: 78px;
    margin: 0 auto;

  }
 header .menu-group{
     display: flex;
 }
 header .logo{

 }
 header .main-menu{
     display: flex;
 }

 

수평으로 정렬해주기 위해서 display: flex;를 추가했다.