HTML & CSS : Navigation_bar 만들기

항해99 사전준비기간에 공부한것을 가지고 웹사이트를 하나 만들어보려고 한다. 오늘은 일단 navigation bar만 만들었다. 원래는 부트스트랩에서 가져와도 되지만 flex box를 연습해보고 싶어서 직접 만들어 보았다. 생각보다 잘 만들어진것 같아서 기분이 좋다. 영상에는 나오지는 않지만 미디어쿼리를 사용해서 원래 화면이 클때는 메뉴가 위에 나열되게 만들어 놨다.

 

 

Flex box

 

nav_bar를 만들면서 CSS에서 flexbox를 제일 많이 사용한것 같다.  navigation bar를 만들기 전에 flex box를 이해하기 위해서 Flexbox Froggy라는 게임을 하면 여러 flexbox properties들을 이해하고 공부했다. 

 

flexbox는 기본적으로 display : flex를 설정하고 여러 flex properties들을 사용해서 필요에 맞게 elements들을 나열시킬 수 있다. Parent element에게 적용되는 properties가 있고 Child elements들에게 적용되는 속성들이 있다. nav_bar에서는 Parent element에 적용되는 속성들만 사용했다. 그 속성들에 대해 설명해보겠다.

 

 

Parent element에 적용되는 속성

 

• flex-direction : flex items이 수평하게 나열될지 수직되게 나열될지 그리고 정상 방향부터 나열될지 아니면 반대방향부터 나열될지 정한다. 

  • values : row(기본값), row-reverse, column, column-reverse

• flex-wrap: flex items이 한 라인안에 다 있을지 아니면 길이에 따라 여러 라인으로 내려갈지 정한다.

  • values: nowrap(기본값), wrap, wrap-reverse 

• flex-flow: flex-direction과 flex-wrap을 합친것이라고 보면 된다. 그래서 두 속성 value들을 적어주면 된다.

  • ex) flex-flow: row wrap

• justify-content: main 축을 기준으로 flex items을 여러 방법으로 나열시킨다. 

  • values: center, flex-start, flex-end, space-between, space-around, space-evenly

• align-items: main 축의 수직 축을 기준으로 flex items을 여러 방법으로 나열시킨다.

  • values: flex-start, flex-end, center

 

Nav_bar에서 사용한 flexbox 속성

 

 

위에 사진은 화면이 작아졌을 때 화면이고 밑에 사진이 보통 크기 화면의 nav_bar 모습이다. 먼저 nav_bar 전체에 flex값을 주었고 그안에 flex items이 3개가 있다. 로고, 메뉴, 글 버튼이 있다. flex items은 block들이기 때문에 수직으로 나열되어있었지만 flex값을 주게되면 저절로 flex-direction 값이 row가 되기때문에 수평으로 나열이 된다.

 

수평으로 나열은 되었지만 균등하게 퍼지기 위해서는 main 축에서 사용할 수 있는 justify-content 속성을 사용했다. value는 space-between을 사용했다. space-btween은 flex-items 양쪽 맨끝에 사이공간을 없애고 중간 공간들은 균등하게 분배한다.

 

수평적으로 균등하게 잘 배열이 됐다면 수직으로도 잘 배치되어야한다. 그래서 main 축에서 수직축으로 적용되는 align-items을 사용했다. value는 center를 사용했다. center는 flex-items을 수직으로 가운데에 배치되게 도와준다.

 

 

:root {
    --text-color: #f1e8e8;
    --background-color: #263343;
    --accent-color: #d49466;
}
body{
    margin: 0;
    font-family: 'Source Sans Pro', sans-serif;
}
a{
    text-decoration: none;
    color: var(--text-color);
}


.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--background-color);
    padding: 8px 16px;

}
.navbar_logo{
    font-size: 24px;
}
.navbar_logo i{
    color: var(--accent-color);
}
.navbar_menu{
    display: flex;
    list-style: none;
    padding-left:0;
}
.navbar_menu li:hover{
    background-color: var(--accent-color);
    border-radius: 4px;
}
.navbar_menu li{
    font-size: 20px;
    padding: 8px 12px;
}
.navbar_writeBtn{
    list-style: none;
    color: var(--text-color);
    display: flex;
    padding-left: 0;
}

.navbar_writeBtn button {
    padding: 5px 12px;
    border-radius: 30px;
    cursor: pointer;
    font-weight: bold;
    outline: none;
}
.navbar_writeBtn button:hover{
    color: var(--text-color);
}
.navbar_toogleBtn {
    position: absolute;
    right: 25px;
    top: 12px;
    font-size: 24px;
    color: var(--accent-color);
    display: none;

}

 

: root

코드 맨위에를 보면 컬러들을 변수값으로 지정을해놔서 색깔을 바꿔보고 싶을 때 모든 색깔을 다 바꾸는게 아니라 맨위에있는 변수값에 지장된 색깔만 바꾸면 된다. 

 

 

---

출처: MDN_Web_Docs [Flexbox], 드림코딩by엘리 [Flexbox]