DIV를 통해 일반적인 헤더를 만들어 보자.

위 처럼 생긴 헤더를 만들어 다양하게 응용해보자.

일단 큰 DIV안에 3개의 자식 DIV(메뉴, 로고, 로그인)의 영역이 필요함을 알 수 있다.

<style>
.main_box {
    border: 1px solid red;
    width: 90%;
    height: 70px;
}
.common {
    display: inline-block;
    background-color: white;
    border: 1px solid blue;
    font-size: 20px;
    width: 100px;
    height:50px;
}
</style>
 
<div class="main_box">
    <div class="menu common">메뉴</div>
    <div class="logo common">로고</div>
    <div class="login common">로그인</div>
</div>

일단,위의 그림처럼 만들었다. 헤더의 전체 길이는 90%로 하여 화면에 좌우로 어느정도 채워지게 만들어 주었다.

자식 DIV의 컨텐츠를 수평/수직 정렬해보자.

<style>
*{
   margin: 0px;
   padding: 0px;
}
.main_box {
    border: 1px solid red;
    width: 90%;
    height: 70px;
}
.common {
    display: inline-table;
    background-color: white;
    border: 1px solid blue;
    font-size: 20px;
    width: 100px;
    height:50px;
}
.content {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}
</style>
  
<div class="main_box">
   <div class="menu common"><p class="content">메뉴</p></div>
   <div class="logo common"><p class="content">로고</p></div>
   <div class="login common"><p class="content">로그인</p></div>
</div>

컨텐츠를 수직정렬하기위해 table-cell을 사용해야 하므로 

   12번째 줄 - display: inline-table; 

   20번째 줄 - display: table-cell;

   콘텐츠 부분을 P태그로 지정

이 추가되었다.

컨텐츠의 내용이 수평/수직 정렬이 되었다. 이제 메뉴 부분을 왼쪽 끝으로, 로그인 부분을 오른쪽 끝으로 정렬해보자.

<style>
*{
    margin: 0px;
    padding: 0px;
}
.main_box {
    border: 1px solid red;
    width: 90%;
    height: 70px;
}
.common {
    display: inline-table;
    background-color: white;
    border: 1px solid blue;
    font-size: 20px;
    width: 100px;
    height:50px;
}
.content {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.menu {
    float: left;
}
.logo {

}
.login {
    float: right;
}
</style>
  
<div class="main_box">
    <div class="menu common"><p class="content">메뉴</p></div>
    <div class="logo common"><p class="content">로고</p></div>
    <div class="login common"><p class="content">로그인</p></div>
</div>

이제 헤더 메뉴 자체를 화면 중앙에 수평정렬해보자.

<style>
*{
    margin: 0px;
    padding: 0px;
}

.main_box {
    border: 1px solid red;
    width: 90%;
    height: 70px;
    margin: 0 auto;
}
.common {
    display: inline-table;
    background-color: white;
    border: 1px solid blue;
    font-size: 20px;
    width: 100px;
    height:50px;
}
.content {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.menu {
    float: left;
}
.logo {

}
.login {
    float: right;
}
</style>

<div class="main_box">
    <div class="menu common"><p class="content">메뉴</p></div>
    <div class="logo common"><p class="content">로고</p></div>
    <div class="login common"><p class="content">로그인</p></div>
</div>

부모 DIV가 화면에 수평 정렬이 되었다.

11번째 줄이 추가되었는 margin: 0 auto;는 해당 DIV가 백분율(%)로 길이가 세팅되어 있어서 position을 이용하지 않고 margin이 사용되었다.

이제 로고를 중앙 정렬 해보자.

<style>
*{
    margin: 0px;
    padding: 0px;
}

.main_box {
    border: 1px solid red;
    width: 90%;
    height: 70px;
    margin: 0 auto;
    text-align: center;
}
.common {
    display: inline-table;
    background-color: white;
    border: 1px solid blue;
    font-size: 20px;
    width: 100px;
    height:50px;
}
.content {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.menu {
    float: left;
}
.logo {
    clear: left;
}
.login {
    float: right;
}
</style>

<div class="main_box">
    <div class="menu common"><p class="content">메뉴</p></div>
    <div class="logo common"><p class="content">로고</p></div>
    <div class="login common"><p class="content">로그인</p></div>
</div>

로고 영역도 수평정렬을 완료 하였다. 여기서 중요한 점은 12번째 줄의 text-align: center로 정렬하였다는 것이다. text-aling은 inline요소에만 작용한다. common 클래스의 display속성이 inline-table; 이기에 가능한 정렬이다.

이제 메뉴, 로고, 로그인 DIV의 영역을 수직 정렬 해보자. 여기서 잊지 말아야 될것은 수직정렬은 공통적으로 줄 수 있지만,, 수평정렬은 줄 수 없다는 점이다. 수평정렬을 하면 모든 DIV요소가 가운데로 중앙정렬되기 때문이다. 여러개의 DIV에 공통적으로 줄 수 있는 정렬은 수직 정렬밖에 없다.

31번째 줄의 clear: left;도 눈여겨 봐두자. 여기에서는 선언 안해도 되지만 혹시 이후에 붙을 요소에 영향을 줄수 있으므로 선언해 주는 것이 좋다. 물론 헤더 이외의 것이 추가 된다면 로그인의 float: right;가 영향을 줄 수도 있다. 그러므로 새요소를 추가 할때에는 습관적으로 clear: both;를 사용하자.

아래의 코드를 확인 해 보자.

<style>
*{
    margin: 0px;
    padding: 0px;
}

.main_box {
    border: 1px solid red;
    width: 90%;
    height: 70px;
    margin: 0 auto;
text-align: center;
}
.common {
    display: inline-table;
    background-color: white;
    border: 1px solid blue;
    font-size: 20px;
    width: 100px;
    height:50px;
    position: relative;
    top: 10px;
}
.content {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.menu {
    float: left;
}
.logo {
    clear: left;
}
.login {
    float: right;
}
</style>

<div class="main_box">
    <div class="menu common"><p class="content">메뉴</p></div>
    <div class="logo common"><p class="content">로고</p></div>
    <div class="login common"><p class="content">로그인</p></div>
</div>

위의 예제에서 22번째 줄 top: 10px;에 주목하자. 부모 DIV의 main_box클래스 높이가 70px이다. 수직 중앙값은 35px이다. 표시될 자식 DIV의 common클래스가  50px이다. 그래서 35px에서 25px를 빼야 TOP에서 부터의 이동값인 10px이 나온 것이다.

이제 완벽히 정리된 헤더의 원형을 볼 수 있다.