- 전체
- HTML
- Web Design (웹디자인)
- XE 응용 개발
- wordpress plugin dev
- Javascript & JavaScript Application
- MEAN Stack : full stack javascript
- angular js & ionic framework
- bootstrap
- WebGL, Three.js and Babylon.js
- restful api design
- mobile web
- node.js 응용
- Cloud Service 응용
- 웹 어셈블리 개발 [WASM, WebAssembly]
- 마이크로서비스, MSA (microservice architecture)
- WebGL / WebGPU
- next.js 개발
- micro frontend (마이크로프론트앤드)
- 전자상거래/쇼핑몰
- 서버 클라우드 (aws, azure, google)
HTML [HTML] DIV를 통해 일반적인 헤더를 만들어 보자.
2024.05.18 18:13
[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> |
일단,위의 그림처럼 만들었다. 헤더의 전체 길이는 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> |
컨텐츠를 수직정렬하기위해 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> |
이제 헤더 메뉴 자체를 화면 중앙에 수평정렬해보자.
|
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> |
부모 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> |
로고 영역도 수평정렬을 완료 하였다. 여기서 중요한 점은 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> |
위의 예제에서 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
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
