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

2024.05.18 18:13

졸리운_곰 조회 수:369

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

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

 

메뉴   로고   로그인

 

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

 

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

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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의 컨텐츠를 수평/수직 정렬해보자.

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<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태그로 지정

 

이 추가되었다.

 

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

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<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

 

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

 

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<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이 사용되었다.

 

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

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<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;를 사용하자.

 

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

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<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이 나온 것이다.

 

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

 

[출처] http://kkms4001.iptime.org/x/index.php?mid=board_MBnO39&document_srl=722

 

 

 

 

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
이 게시물을
목록
목록
쓰기
태그
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED