조회 수 7504 추천 수 0 댓글 1
?

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

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

이번엔 요소의 수직 정렬을위한 다양한 방법을 알아보자.

 

1. line-height를 이용하는 방법

 

<style>
*{
margin: 0px; padding: 0px;
}
.mainBox {
width: 500px;
height: 100px;
border: 1px solid blue; 
background-color: blue;
text-align: center;
}
.contentBox{
color: white;
line-height: 100px;
}
</style>

<div class="mainBox">
<div class="contentBox">
     수직정렬 할 컨텐츠
</div>
</div>

 

위의 코드중 7번 라인과 14번 라인을 유심히 보자. 높이값이 100px인데 줄간격을 100px을 주어 높이와 줄의 높이를 강제로 1:1로 맞춘 방법이다. 

 

이 방법의 단점은 컨텐츠를 1줄만 표시 할 수 있다.  실행된 모습은 아래와 같다.

 

con-vertical-01.png

 

 

 

2. table속성을 이용한 방법

 

table속성은 display: table;과 display: table-cell;을 이용하여 요소를 수직정렬 하는 방법이다. 아래의 코드를 살펴보자.

 

<style>
*{
margin: 0px; padding: 0px;
}
.mainBox {
display: inline-table;
width: 500px;
height: 100px;
border: 1px solid blue; 
background-color: blue;
text-align: center;
}
.contentBox{
display: table-cell;
color: white;
vertical-align: middle;
}
</style>

<div class="mainBox">
<div class="contentBox">
     수직정렬 할 컨텐츠
</div>
</div>

 

코드에서 중요한 라인은 6, 14, 16라인이다.

 

6라인 - display: inline-table;  //  부모요소는 table속성을 가져야 한다.

14라인 - display: table-cell;  //  수직 정렬될 요소는 table-cell속성을 가져야 한다.

16라인 - vertical-align: middle; // table안의 요소를 수직정렬시킨다.

 

이때 주의 할 점은 부모요소에 크기값이 반드시 명시되야 한다는 것이다. 위의 코드에서 7, 8라인에 크기값이 있음을 기억하기 바란다.

 

실행결과는 아래와 같다.

 

con-vertical-01.png

 

 

그럼 크기값은 반드시 부모만 가져야 되는가? 아니다. 사실은 해당요소에 기록되어도 된다. 아래의 예를 보자.

 

<style>
*{
margin: 0px; padding: 0px;
}
.mainBox {
display: inline-table;

border: 1px solid blue; 
background-color: blue;
text-align: center;
}
.contentBox{
width: 500px;
height: 100px;
display: table-cell;
color: white;
vertical-align: middle;
}
</style>

<div class="mainBox">
<div class="contentBox">
     수직정렬 할 컨텐츠
</div>
</div>

 

 

위의 예제 13, 14라인을 보면 수직정렬할 요소 자체에 크기값을 기록하였다. 실행결과는 아래와 같다.

 

con-vertical-01.png

 

 

그럼 왜? 부모가 크기값을 가지라고 알려진 것일까? 단순한 이유에서는 크기값은 부모가 가지고 있어야 웹디자인시 계산이 편해지기 때문이다. 자식에 크기값을 기록하는 것보다 부모에 크기값을 주어 실제크기를 자식요소에 주어 나타나는 크기값의 혼동을 막기위해서이다.

 

즉, vertical-align으로 수직정렬을 할때에는 습관적으로 크기값을 부모에 주도록 하자.

 

 

3. margin과 padding을 이용한 방법

 

margin & padding을 이용한 방법은 간단하다. 아래의 예를 살펴보자.

 

<style>
* { margin:0px; padding: 0px;}
.mainBox {
       color: white;
        border: 1px solid blue;
        width: 500px;

text-align: center;
}
.contentBox {
        border: 1px solid #000000;
        background-color: #000000;
        margin: 100px 0px;    
/* padding 으로 바꾸어보고 위치를 부모로 변동해보자 */
}
</style>

<div class="mainBox">
      <div class="contentBox">
        아름다운 코딩
      </div>
</div>

 

 

실행결과는 아래와 같다.

 

con-vertical-02.png

 

위의 주석에 적혀 있는 것처럼 부모요소로 마진이나 패딩을 위치 시킬 수 있다. 이제 생각해 보자 크기값은 부모가 가지는 것이 나은가? 자식이 가지는 것이 나은가? 당연히 부모요소이다. 항상 부모요소에 크기를 선언하는 습관을 들이자.

 

 

4. position을 통한 수직정렬 방법 (요소의 절반만큼 마이너스 이동시키기)

 

이 방법은 옆의 링크를 참조하자 - http://fact119.com/x/board_kvfV35/678

 

?
  • ?
    KKMS 2016.03.04 20:41

    <script>
    $(document).ready(function(){
        $(window).resize(function(){
        if( $(window).height() <= $('.mainBox').height() ) {
            $('.mainBox').css("margin","0 auto");
        } else {
            $('.mainBox').css("margin","auto");        
        }
        });
    });
    </script>
    <style>
    html, body {
        height: 100%;
    }
    .mainBox {
        position: absolute;
        width: 100px;
        height: 300px;
        border: 1px solid blue;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        margin: auto;
    }
    .subBox {
        width: 100px;
        height: 100px;
        border: 1px solid red;
    }
    </style>
    <div class="mainBox">
        <div class="subBox">LOGO</div>
        <div class="subBox">Search</div>
        <div class="subBox">Pictures</div>
    </div>

     


List of Articles
번호 분류 제목 날짜 조회 수
41 HTML 하나의 class = 하나의 디자인 ????? file 2016.02.23 4232
» HTML 요소의 수직정렬을 알아보자. 1 file 2016.03.01 7504
39 HTML Transition에 대해 알아보자. 8 2016.06.22 10426
38 SASS Sass 중첩 규칙과 속성 2019.09.19 434
37 SASS Sass 소개 2019.09.19 423
36 SASS SASS 샘플 2019.08.16 763
35 SASS Sass 변수 2019.09.19 430
34 SASS Sass String Functions 2019.09.19 581
33 SASS Sass Selector Functions 2019.09.19 341
32 SASS Sass Operators 2019.09.20 433
31 SASS Sass Numeric Functions 2019.09.19 411
30 SASS Sass Map Functions 2019.09.19 430
29 SASS Sass List Functions 2019.09.19 467
28 SASS Sass Introspection Functions 2019.09.19 404
27 SASS Sass Color Functions 2019.09.19 400
26 SASS Sass @while 2019.09.20 799
25 SASS Sass @mixin과 @include 2019.09.19 506
24 SASS Sass @import 2019.09.19 505
23 SASS Sass @if and @else 2019.09.20 461
22 SASS Sass @for 2019.09.20 487
Board Pagination Prev 1 2 3 Next
/ 3