HTML
2015.12.24 11:44

5. DIV를 통한 헤더 만들기

조회 수 83944 추천 수 0 댓글 1
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

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>

 

5-1.png

 

일단,위의 그림처럼 만들었다. 헤더의 전체 길이는 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>

 

5-2.png

 

컨텐츠를 수직정렬하기위해 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>

 

5-3.png

 

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

 

<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>

 

5-4.png

 

부모 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>

 

5-5.png

 

로고 영역도 수평정렬을 완료 하였다. 여기서 중요한 점은 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>

 

5-7.png

 

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

 

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

 

?
  • ?
    KKMS 2016.03.08 19:37

    <style>
    .barCase {
        display:inline-block; 
        width:100%; 
        height:19px; 
        border:1px solid blue; 
        background: white;    
    }
    .barProgress{
        display:inline-block; 
        height:19px; 
        border:1px solid blue; 
        background: blue;
        margin:-1px;    
        font-size:15px;
        color: blue;
    }
    </style>


    <div class="barCase">
        <div class="barProgress" style="width: 45%"></div> 45%
    </div>
    <div class="barCase">
        <div class="barProgress" style="width: 85%"></div> 85%
    </div>
    <div class="barCase">
        <div class="barProgress" style="width: 33%"></div> 33%
    </div>


List of Articles
번호 분류 제목 날짜 조회 수
41 HTML 4. DIV안에 DIV 넣어 정렬하기 5 file 2015.12.23 134702
» HTML 5. DIV를 통한 헤더 만들기 1 file 2015.12.24 83944
39 HTML 6. DIV를 통한 전체 화면 사용하기 & 응용 2 file 2015.12.24 53803
38 HTML 3. DIV내의 문자컨텐츠 수평정렬과 수직정렬 1 file 2015.12.23 24261
37 HTML 8. PHP를 통한 index파일의 구성 1 file 2015.12.28 19804
36 HTML 10. position: absolute; 에 대해 알아보자 1 file 2015.12.30 19672
35 HTML JavaScript의 반복문을 알아보자. 2 file 2016.02.24 16534
34 HTML 2. DIV요소의 수평정렬과 수직정렬 file 2015.12.23 15482
33 HTML Transition에 대해 알아보자. 8 2016.06.22 13707
32 SASS Sass 소개 2019.09.19 13118
31 HTML Form 요소 설명 4 2016.06.01 12831
30 HTML DIV 제거와 CSS 코드 줄이기 file 2016.02.17 10580
29 HTML li 에 대해 알아보자. 2 file 2016.02.15 10342
28 HTML 요소의 수직정렬을 알아보자. 1 file 2016.03.01 10340
27 HTML 1. Inline 요소와 Block 요소에 대한 이해 file 2015.12.22 10127
26 HTML 11. viewport를 활용한 반응형 예제 file 2015.12.31 9208
25 HTML 9. position: relative; 에 대해 알아보자 file 2015.12.29 8553
24 HTML 7. position: static; 에 대해 알아보자. file 2015.12.28 7257
23 HTML class 에 대해 알아보자. 1 file 2016.02.16 6740
22 HTML 하나의 class = 하나의 디자인 ????? file 2016.02.23 6204
Board Pagination Prev 1 2 3 Next
/ 3