HTML
2015.12.23 17:21

4. DIV안에 DIV 넣어 정렬하기

조회 수 134703 추천 수 0 댓글 5
?

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

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

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

 

 

TEST1

 

TEST2 TEST3

 

 

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

 

<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; 의 경우의 처리결과이다.

 

<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;을 사용하면 된다. 아래의 예제를 확인하자.

 

<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를 추가하였다.

 

<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의 크기가 자식보다 작은 경우의 예를 확인해 보자.

 

<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

 

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

 

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

 

<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으로 맞추어 보겠다.

 

<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로 변경한 아래의 예제를 살펴보자.

 

<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도 반영하겠다.

 

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

 

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

 

<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;로 변경되었다는 것에 주목하자.

 

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

 

<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

 

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

 

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

 

<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

 

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

 

?
  • ?
    KKMS 2016.05.26 14:50

    <style>
    .main{ background-color: white;
        border: 1px solid gray;
        width: 360px; height: 360px;
        border-radius: 50px;}
    .main_common{ display:inline-block;
        float: left;
        width: 100px; height: 100px; margin: 10px; }
    .circle { border: 0px solid black;
        border-radius: 50px; background-color: black; }
    </style>
    <div class="main">
        <div class="main_common circle"></div>
        <div class="main_common"></div>
        <div class="main_common"></div>
        <div class="main_common"></div>
        <div class="main_common circle"></div>
        <div class="main_common"></div>
        <div class="main_common"></div>
        <div class="main_common"></div>
        <div class="main_common circle"></div>    
    </div>
     

  • ?
    KKMS 2016.05.27 15:19

    <!doctype html>
    <html lang="ko">
        <head>
            <meta charset="utf-8">
            <style>
                * {
                    margin: 0px;
                    padding: 0px;
                    text-align: center;
                }
                .buttonX {
                    width: 100px;
                    height: 100px;
                    border: 1px solid blue;
                    border-radius: 25px;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    margin-top: -51px;
                    margin-left: -51px;
                    line-height: 102px;
                    cursor: pointer;
                }
            </style>
        </head>
        <body>
            <p class="buttonX" onclick="printBox()">Box Size 입력</p>
            <script>
                function printBox() {
                    var boxSize = parseInt(prompt('박스 사이즈를 px단위로 입력하세요',0));
                    var printCss = '<div style="position: absolute; top: 50%; left: 50%; margin-top: -';
                    printCss = printCss + parseInt(boxSize/2) + 'px ; margin-left: -' + parseInt(boxSize/2) +'px' ;
                    printCss = printCss + '; width: ' + boxSize +'px;  height:' + boxSize +'px;';
                    printCss = printCss + ' border: 1px solid blue; background-color: blue; cursor: pointer;" onclick="location.reload()"></div>';
                    document.write(printCss);
                }
            </script>
        </body>
    </html>

  • ?
    kkms 2018.01.11 12:40

    <style>
    * { margin: 0px; padding: 0px; }
    .AAA { width: 100px; height: 100px; border: 1px solid red; }
    .BBB { width: 50px; height: 50px; border: 1px solid blue; float: right; }
    </style>
    <div class="AAA">
         <p class="BBB">하이</p>
         호호 히히 하하 코코 뿌뿌 뽀뽀 빠빠 삐삐
    </div>

  • ?
    리젤린 2018.08.21 11:20

    너무 친절한 설명 감사합니다!

  • ?
    div 정렬 2021.02.09 02:05
    감사합니다<br>도움이 많이 됐습니다

List of Articles
번호 분류 제목 날짜 조회 수
» HTML 4. DIV안에 DIV 넣어 정렬하기 5 file 2015.12.23 134703
40 HTML 5. DIV를 통한 헤더 만들기 1 file 2015.12.24 83946
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