[CSS]flex만으로 menu bar 만들기_2

flex 만으로 menu bar 만들기

• flex 에 대해 간단하게 알아봤으니 이번에는 flex 만으로 header menu bar 를 만들어보겠습니다. 먼저 아래의 코드와 같이 5개의 1차 메뉴를 가지고 있는 가정하에 진행하겠습니다. 먼저 메누를 감싸고 있는 nav앨리먼트의 넓이를 100% 로 지정합니다.
  그 후 컨텐츠 영역과 구분을 주기위헤 border-bottom 을 사용합니다.

<style>
    body,nav,ul,ol,li,p,strong,h1,h2,h3,h4,h5,h6 { margin:0; padding:0; list-style:none;}
    a { color:inherit; text-decoration:none;}
    nav {width:100%; border-bottom:1px solid #dcdcdc;}
</style>
<nav>
    <ul class="menu_box">
        <li><span>Home</span></li>
        <li><span>About</span></li>
        <li><span>What's do</span></li>
        <li><span>Board</span></li>
        <li><span>Contact</span></li>
    </ul>
</nav>

See the Pen Untitled by 김기태 (@kkt9102) on CodePen.

• 기본적인 코드를 작성하면 위의 화면처럼 나옵니다. 다음으로 flex를 사용하여 1차 메뉴들을 한줄로 나열 해줍니다. display:flex를 nav > ul 에 선언합니다. 그다음으로 각 메뉴들의 간격을 일정하게 지정해주기 위해 justify-content:space-around 를 지정해줍니다.
  그리고 ul에 height:60px 을 지정해준 후 텍스트들을 가운데로 정렬하기 위헤 align-items:center 를 선언해줍니다

    .menu_box {display:flex; height:60px;align-items:center; justify-content:space-around;}

See the Pen Untitled by 김기태 (@kkt9102) on CodePen.

• 이제 조금은 메뉴처럼 보이게 됬습니다! 여기에서 조금 더 그럴듯 하게 보이기 위해 font-size 와 mouse:hover 를 헀을 때 구분을 주기위한 css도 추가합니다

    .menu_box li {font-size:20px;}
    .menu_box > li:hover > span {background:#222222; color:#ffffff; border:1px solid #222222;}

• 해당 css까지 작성하고 메뉴에 마우스를 올려보면 뭔가 이상합니다. 아래의 사진처럼 붉은 색 영역 전체를 다 바꾸고싶은데 hover 효과는 텍스트의 크기만큼만 효과가 적용되어있습니다. ul > li 에 display:flex 를 지정할 차례입니다.

    .menu_box {display:flex; height:60px; align-items:center;}
    /* .menu_box 에서  justify-content:space-around; 삭제*/
    .menu_box li {font-size:20px; display:flex; flex-basis:calc(100%/5); height:inherit; cursor:pointer; transition:background 0.3s, color 0.2s;} 
    .menu_box li > span {display:flex; align-items:center; justify-content:center; height:inherit; flex-basis:100%;}

• 처음에 .menu_box 에 justify-content:space-around 를 주어 li 요소들을 동일한 넓이로 간격을 조정했다가 속성을 다시 삭제하고 li 요소에 직접 flex-basis:calc(100%/5) 를 주어 각 li 들을 동일한 넓이로 지정을 해줬습니다. 그 후 height:inherit 를 주어 부모인 ul 의 높이값을 그대로 이어 받게합니다.
  마지막으로 ul > li > span 에도 동일하게 display:flex 를 선언한 후 height:inherit 을 사용하여 부모인 li 의 높이를 그대로 받아온 후 justify-content:center 와 align-items:cetner 를 사용하여 텍스트드를 가운데로 맞춰준 후 flex-basis:100% 을 사용하여 부모의 넓이를 다 차지하게 선언합니다.

완성화면

See the Pen flex_menu_bar by 김기태 (@kkt9102) on CodePen.

• 누군가에게 혹은 불특정 다수에게 아는 것을 설명하는건 정말 힘든일이란걸 다시한번 느끼게되네요… 두서없는 글 읽어주셔서 감사합니다….