위 메뉴바를 살펴보자.
메뉴바를 보면 로고, 검색창, 로그인 등 여러가지 영역으로 나뉘어져 있다.
메뉴바를 제작할때 div로 영역을 나눠서 제작을 하는데 이때 영역을 나눠보면
이런 식으로 나눌수 있다. (동일한 색은 서로 대등한 관계)
처음에는 메뉴가 들어갈 헤더.(빨간색)
두번째로는 메뉴바가 가운데에 있으므로 메뉴를 가운데에다가 정렬할 수 있게 container를 만들고,(갈색)
세번째로는 메뉴가 왼쪽과 오른쪽으로 나누어져 있는 것을 볼 수 있다. (초록색)
네번째로는 로고와 메뉴로 나뉜다.(하늘색)
마지막으로 각각의 메뉴 요소로 나뉜다.(보라색)
왼쪽 메뉴만 코드로 구현하면
<body>
<div class="header">
<div class="container">
<div class="container-left">
<div class="logo">
<img src="http://heropcode.github.io/GitHub-Responsive/img/logo.svg" alt="Github Logo">
</div>
<div class="menu">
<div class="menu-item">WhyGitHub?</div>
<div class="menu-item">Team</div>
<div class="menu-item">Enterprise</div>
<div class="menu-item">Explore</div>
<div class="menu-item">Marketplace</div>
<div class="menu-item">Pricina</div>
</div>
</div>
</div>
</div>
</body>위와 같이 구현 할 수 있다.
단 위 코드를 그냥 복붙하면
위와 같이 나오므로 CSS를 이용해서 꾸며줘야 한다.
'Web > HTML' 카테고리의 다른 글
| div, article, section의 차이점과 사용할 때 (0) | 2020.08.04 |
|---|