HTML DIV안에 DIV 넣어 정렬하기

2019.02.06 19:32

졸리운_곰 조회 수:639

DIV안에 DIV 넣어 정렬하기

DIV를 이용해 아래와 같은 DIV 구조체를 만들어 보자

 

 

TEST1

 

 TEST2 TEST3

 

 

우선 큰 DIV로 감싸진 작은 DIV를 3개 생성하였다.

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
.main{
    background-color: yellow;
}
 
.main_common{
    width: 100px;
    height: 100px;
    border: 1px solid blue;
}
</style>
 
<div class="main">
    <div class="main_1 main_common">test1</div>
    <div class="main_2 main_common">test2</div>
    <div class="main_3 main_common">test3</div>
</div>

 

4-1.png

 

이제 작은 박스를 수평정렬해야한다. DIV는 기본적으로 Block요소이다. 즉 다음줄에 새 DIV를 표시한다. 이를 없애기 위해 inline선언을 해주어야한다.

이처럼 요소의 성질을 바꿀때 사용하는 속성이 display이다. display의 속성 값과 함께 알아보자.

 

   display 속성값

   ---------------나열----------------

 

아래의 예제는 display: inline; 의 경우의 처리결과이다.

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
.main{
    background-color: yellow;
}
 
.main_common{
    display: inline;
    width: 100px;
    height: 100px;
    border: 1px solid blue;
}
</style>
 
<div class="main">
    <div class="main_1 main_common">test1</div>
    <div class="main_2 main_common">test2</div>
    <div class="main_3 main_common">test3</div>
</div>

 

4-2.png

 

위의 결과처럼 display: inline;의 경우 Block속성 자체가 없어지고 inline요소로 바뀌어 DIV에서 선언된 크기값들이 적용되지 않음을 알 수 있다.

그럼 어떻게 Block요소의 속성을 가지며 inline처럼 붙여 쓸 수 있을까? display: inline-block;을 사용하면 된다. 아래의 예제를 확인하자.

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
.main{
    background-color: yellow;
}
 
.main_common{
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid blue;
}
</style>
 
<div class="main">
    <div class="main_1 main_common">test1</div>
    <div class="main_2 main_common">test2</div>
    <div class="main_3 main_common">test3</div>
</div>

 

4-3.png

 

Block요소의 속성은 유지하며 inline처럼 옆으로 나열되었다. 이 결과를 통해 우리는 display속성값의 block, inline, inline-block의 정확한 차이점을 알 수 있다.

 

또한, float:left 없이 요소가 왼쪽으로 붙은 것도 확인 할 수 있다. 

 

    float속성값

    --------------------- 나열 ----------------------

 

그럼, float: left;가 필요없는 것인가? 확인하기 위해 float: left;를 붙여보겠다. 전체를 감싼 DIV의 모양을 확인하기 위해 border를 추가하였다.

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
.main{
     background-color: yellow;
     border: 1px solid red;
}
 
.main_common{
    display: inline-block;
    float: left;
    width: 100px;
    height: 100px;
    border: 1px solid blue;
}
</style>
 
<div class="main">
    <div class="main_1 main_common">test1</div>
    <div class="main_2 main_common">test2</div>
    <div class="main_3 main_common">test3</div>
</div>

 

4-4.png

 

위의 그림처럼 전체를 감싼 DIV의 영역이 실선처럼 보이고 자식 DIV들이 나열됨을 알 수 있다. 감싼 DIV의 크기가 없어서 나타나는 문제이다.

이 때 주의해야 할 점은 부모 DIV에 크기를 지정하더라도 자식 DIV의 크기가 크면 부모영역 밖으로 표시가 된다는 점이다. 많은 사람들이 자식요소는 부모요소 크기를 넘지 못할 것이라는 막연한 생각을 가지고 있다. 이런 생각은 웹디자인시 Layout을 구성중 많은 어려움을주는 요소이다.

 

특히 저런 상태에서 부모 DIV에 어떤 속성을 주어봤자 아무런 소용이 없다. 왜냐하면 위의 예에서는 모양을 보기위해 부모 요소에 실선이라도 주었지만 실제로는 크기가 0인 것이다. 속성을 주어봤자 나타나지를 않는다.

 

float를 주기전의 모습과 비교하면 더욱 잘 알 수 있다. float를 주기전에는 바탕색에 노란색이 표시되고 있다는 것을 상기하자. 그 때에는 노란 영역이 살아 있었던 것이다. 즉, 부모 영역의 크기가 존재함을 알 수 있다. 또한, 작은 칸들사이의 간격도 존재한다. 그러나 float를 사용한 후에는 해당간격이 사라짐을 알 수 있다.

 

정리하면 float를 주기전 잘 되던 DIV가 float를 사용한 후 속성은 물론 디자인까지 변경될 수 있음을 의미한다.

 

부모 DIV의 크기가 자식보다 작은 경우의 예를 확인해 보자.

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
.main{
    background-color: yellow;
    border: 1px solid red;
    width: 50px;
    height: 50px;
}
 
.main_common{
    display: inline-block;
    float: left;
    width: 100px;
    height: 100px;
    border: 1px solid blue;
}
</style>
 
<div class="main">
    <div class="main_1 main_common">test1</div>
    <div class="main_2 main_common">test2</div>
    <div class="main_3 main_common">test3</div>
</div>

 

4-5.png

 

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

위의 그림처럼 부모영역의 크기가 작으니 자식요소를 포함하지 못하는 것을 알 수 있다. inline-block을 했음에도 마치 block처럼 표시되는 것을 알 수 있다.

 

이번엔 전체를 감싼 DIV의 width값을 210px에 맞추어 보았다. 아래의 예제를 참고하자.

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
.main{
    background-color: yellow;
    border: 1px solid red;
    width: 210px;
    height: 100px;
}
  
.main_common{
    display: inline-block;
    float: left;
    width: 100px;
    height: 100px;
    border: 1px solid blue;
}
</style>
  
<div class="main">
    <div class="main_1 main_common">test1</div>
    <div class="main_2 main_common">test2</div>
    <div class="main_3 main_common">test3</div>
</div>

 

4-6.png

 

위의 그림처럼 자식 DIV의 개별크기가 100px이므로 2칸이면 200px이다. 부모 DIV의 크기를 210px으로 하였더니 2칸이 들어가고 1칸은 아래로 떨어졌다.

 

이번엔 부모의 width를 300px으로 맞추어 보겠다.

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
.main{
    background-color: yellow;
    border: 1px solid red;
    width: 300px;
    height: 100px;
}
   
.main_common{
    display:inline-block;
    float: left;
    width: 100px;
    height: 100px;
    border: 1px solid blue;
}
</style>
   
<div class="main">
    <div class="main_1 main_common">test1</div>
    <div class="main_2 main_common">test2</div>
    <div class="main_3 main_common">test3</div>
</div>

 

4-7.png

 

부모의 크기가 300px이면 자식요소를 포함 할 것이란 예측이 빗나갔다. 이유는 보더값 1px를 선언하였기 때문이다. 전체 크기는 아래와 같다.

 

Border 1px + Content 100px + Border 1px + Border1px + Content 100px + Border 1px + Border 1px + Content 100px + Border 1px

 

즉, 전체 크기는 306px이므로 부모요소의 최소 크기는 306px이상이여야 한다.

 

다시 부모요소의 크기를 306px로 변경한 아래의 예제를 살펴보자.

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
.main{
    background-color: yellow;
    border: 1px solid red;
    width: 306px;
    height: 100px;
}
   
.main_common{
    display: inline-block;
    float: left;
    width: 100px;
    height: 100px;
    border: 1px solid blue;
}
</style>
   
<div class="main">
    <div class="main_1 main_common">test1</div>
    <div class="main_2 main_common">test2</div>
    <div class="main_3 main_common">test3</div>
</div>

 

4-8.png

 

정확히 정렬되었는가? 아니다. 상하의 Border도 계산하여야 한다. 아래 예제부터는 상하 보더의 합 2px도 반영하겠다.

 

여기서는 보더만 사용되었지만 마진이나 패딩의 사용에도 주의하여야 할 것이다. 당연히 계산에 포함하여야 한다.

 

이제 콘텐츠 문자열을 수평/수직 중앙정렬을 해보자. 이 방법은 전 단원에서 배웠다.

 

?
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
<style>
.main{
    background-color: yellow;
    border: 1px solid red;
    width: 306px;
    height: 102px;
}
   
.main_common{
    display:inline-table;
    float: left;
    width: 100px;
    height: 100px;
    border: 1px solid blue;
}
 
.content {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
</style>
 
<div class="main">
    <div class="main_1 main_common"><p class="content">test1</p></div>
    <div class="main_2 main_common"><p class="content">test2</p></div>
    <div class="main_3 main_common"><p class="content">test3</p></div>
</div>


4-9.png

 

콘텐츠를 감싼 P태그에 수직정렬을 하기위한 display: table-cell;을 설정해야 한다.

그러기 위해서 위의 코드에서 10번째 줄이 원래 display: inline-block; 이였는데 display: inline-table;로 변경되었다는 것에 주목하자.

 

혹시 컨텐츠의 크기가 변동되도 아무 문제가 없을까? 

 

?
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
<style>
.main{
    background-color: yellow;
    border: 1px solid red;
    width: 306px;
    height: 102px;
}
   
.main_common{
    display:inline-table;
    float: left;
    width: 100px;
    height: 100px;
    border: 1px solid blue;
}
 
.content {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
 
.main_1, .main_3 { font-size: 30px; }
.main_2 { font-size: 40px; }
</style>
 
<div class="main">
    <div class="main_1 main_common"><p class="content">test1</p></div>
    <div class="main_2 main_common"><p class="content">test2</p></div>
    <div class="main_3 main_common"><p class="content">test3</p></div>
</div>

 

4-10.png

 

위의 예제처럼 아무 문제가 없음을 확인 할 수 있다.

 

추가적으로 전체요소를 수평/수직 중앙정렬을 해보자.

 

?
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
<style>
.main{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -51px;
    margin-left: -153px;
    background-color: yellow;
    border: 1px solid red;
    width: 306px;
    height: 102px;
}
   
.main_common{
    display:inline-table;
    float: left;
    width: 100px;
    height: 100px;
    border: 1px solid blue;
}
 
.content {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
 
.main_1, .main_3 { font-size: 30px; }
.main_2 { font-size: 40px; }
</style>
 
<div class="main">
    <div class="main_1 main_common"><p class="content">test1</p></div>
    <div class="main_2 main_common"><p class="content">test2</p></div>
    <div class="main_3 main_common"><p class="content">test3</p></div>
</div>

 

4-11.png

 

위의 화면처럼 만족스러운 결과를 얻을 수 있다.

 

[출처] http://fact119.com/x/board_MBnO39/696

 

 

 

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