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

 

 

 

 

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
이 게시물을
목록
목록
번호 제목 글쓴이 날짜 조회 수
31 [web개발] [jQuery] Select박스 option 값 선택하기 졸리운_곰 2021.10.20 652
30 [web개발][javascript][JQuery] textarea 값 설정및 값 가져오기 졸리운_곰 2021.10.19 441
29 [javascript][jQuery] 제이쿼리(jQuery) 선택자 - #1 file 졸리운_곰 2021.09.07 571
28 [HTML5, Javascript, Jquery] Add item from array to list when button is clicked in jQuery 졸리운_곰 2021.06.01 739
27 textarea 태그에 값을 넣고 뺄때 아니면 개행문자 '\n'이 혼란이 온다 졸리운_곰 2019.04.08 692
26 jQuery ready와 load의 차이 file 졸리운_곰 2019.03.29 733
25 How can I detect if a selector returns null? 졸리운_곰 2019.03.25 454
24 jQuery.isEmptyObject() 졸리운_곰 2019.03.24 793
23 [jQuery]요소를 추가하는 메소드(append, prepend, after, before) 졸리운_곰 2019.03.10 575
22 jQuery / Method / .text() - 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꾸는 메서드 file 졸리운_곰 2019.03.10 592
21 How do you convert a jQuery object into a string? 졸리운_곰 2019.03.10 454
20 JQuery 오브젝트 셀렉트한 select object의 내용 확인 졸리운_곰 2019.03.10 601
19 JQuery Object 선언 : jQuery creating objects [duplicate] 졸리운_곰 2019.03.06 542
18 [제이쿼리] 태그 및 요소 삭제, Remove() file 졸리운_곰 2019.03.06 848
17 jQuery .each문(for문) 사용시 break, continue를 하려면? file 졸리운_곰 2019.03.06 743
16 jQuery / Method / .removeClass() - 선택한 요소의 클래스 값을 제거하는 메서드 file 졸리운_곰 2019.03.06 543
15 [jQuery] 선택자에 변수 넣기 졸리운_곰 2019.03.04 642
14 JQuery로 radio 버튼의 값 가져오기 : How to get the value of selected radio button in a group using jQuery 졸리운_곰 2019.01.10 532
13 Ajax replace instead of append 그리고 jquery .append(Html). 에서 class 적용 적용 졸리운_곰 2019.01.07 625
12 [jQuery] Ajax 방법 졸리운_곰 2018.08.03 656
쓰기
태그
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED