[html/css] Vertical-align 속성으로 가로 정렬하기(수정중)

Vertical-align

Vertical-algin은 inline요소와 table 셀들을 가로로 정렬하는 방법을 정하는 속성이다.

W3C 에서 vertical-align을 정의하는 것은 다음과 같다.

+) Table-cell에 적용된 vertical-align의 경우 해당 요소가 속한 table-row 사이에서 수직 정렬을 가능하게 한다.
다만 수직 정렬의 기준이 되는 기준선 등은 인라인 요소의 수직 정렬과는 조금 다르다고 하니 아래를 참고하자.

+) 참고1 : vertical-align 정의 - w3c
+) 참고2 : table-cell 높이의 알고리즘-w3c
+) 참고블로그 : vertical-align 파헤치기 1부

 

 

 

 

자식박스에 적용시키는 스타일 속성으로 baseline, top, midde, bottom으로 속성값을 줄 수 있다.

예시를 들기 위해 아래와 같이 박스 두개를 만들어 보겠다.
vertical-align은 inline 속성의 태그에게 쓰는 속성이기 때문에, div태그의 속성을 inline-block으로 바꾼다.
그리고 div들에게 너비와 높이를 주었다.

너비값과 달리 높이값은 hegith가 아닌 line-height로 지정해 주었는데, 이유는 height로도 높이가 지정 가능하지만
앞으로 비교하려는 대상이 inline 속성이고, line-height 값으로 바뀌는 baseline의 위치가 기준이기 때문이다.

+) 하지만 main 안에 들어가는 div 박스는 height 값을 주어야한다.
inline 속성은 내용이 있어야만 넓이 값이 생기는데 main과 sub은 부모박스로서 div와 span이 존재하지만,
main박스 안의 div box는 그 안의 내용이 없기 때문에 height가 없으면 값이 0으로 계산되어 화면에서 사라진다.

<style>
    div{
    	display: inline-block;
        }
    .main{
    	witdth: 200px;
        line-height: 200px;
        }
    .main>.box{
    	width: 50px;
        height: 50px;
        }
    .sub{
    	width: 100px;
        line-height: 100px;
        }
</style>

<div class="main">
    <div class="box"></div>
    <span>내용</span>
</div>

</div class="sub">
</div>

이제, div 박스들에 vertical-align의 속성값을 넣어보며 결과를 비교해보자.

Vertical-align 속성 값
baseline	기본 값, 해당 요소를 부모 요소의 baseline에 맞춘다.

기본값으로, 맨 처음 출력되는 모습 그대로이다.
현재 main박스와 sub박스 둘 다 line-height로 높이값을 잡았기 때문에 baseline이 정 중앙에 와있는 상태이다. 
baseline이 맞춰 나열되어 있는 모습이 Vertical-align이 middle인 것처럼 보인다.
(height 값이 또 따로 지정되어있으면 다른 모양이 되었을 것이다.)

태그와 속성값의 변화로 인한 심화 과정①
main box 안에 들어있는 자식태그들은 어떻게 정렬되어있을까?

먼저 line-height 값은 자식태그에게 상속된다는 점을 상기하자. 
(자세한 내용은 아래의 접힌글 확인)

1. div 태그
: 현재 div태그는 원활한 비교를 위해 속성이 inline-block으로 바뀌어있다.
 block 속성이 있기 때문에 따로 컨텐츠가 들어있지 않아도 넓이값을 가질 수 있는데, 현재 div에는 부모박스에게 상속받은 line-height 200px과 height 50px을 가지고 있다.
이때, div박스 안에 내용이 존재하지 않기 때문에 baseline은 height 값을 따라 height 값의 끝 부분으로 지정된다.
그리고 그렇게 정해진 baseline이 부모박스의 baseline에 맞춰 정렬된다.

2. span 태그
: span 태그는 inline 속성이기 때문에 넓이값을 가질 수 없다.
부모에게 상속받은 line-height 값은 가지고 있지만, 안에 '내용'이라는 컨텐츠가 들어가 있기 때문에 baseline은 글자의 baseline에 맞춰 형성된다.
이렇게 형성된 baseline은 부모박스의 baseline에 맞춰 정렬된다.

https://webclub.tistory.com/475

줄 간격(line-height) 상속

태그와 속성값의 변화로 인한 심화 과정②
아래 높이 값으로 line-height 200px을 가지고 있는 부모박스의 높이 값이 240px가 된 이유를 찾으시오.

<style>
    div{
    	display: inline-block;
    }
    .main_box{
    	width: 200px;
        line-height: 200px;
    }
    .box1{
    	width: 100px;
        height: 150px;
    }
    .box2{
    	width: 100px;
        height: 150px;
    }
    .text1{
    	font-size: 32px;
    }
</style>

<div class="main_box">
    <div class="box1"></div>
    <div class="box2">box2</div>
    <span class="text1">내용</span>
</div>

 

현재 부모박스에 높이 속성으로 line-height 200px만 지정되어있다.
하지만 현재 부모박스의 총 높이가 200px이 넘는 이유는 무엇일까?

그것은 자식박스에 이유가 있다.
현재 div 박스 2개는 높낮이에 차이가 있는 것을 확인 할 수 있는데,
이러한 차이가 발생하는 이유는 box1에는 내용이 없는데 box2에는 내용이 있기 때문이다.
내용이 있는 box2는 글자의 baseline을 기준으로 중앙에 정렬되어 부모박스의 크기에 영향을 주지 않는다.
하지만 height만 가지고 있는 box1은 면의 최하단이 baseline이 되어 부모박스의 상단부터 baseline까지의 높이보다 높은 것을 볼 수 있다.
이 상황을 보며 line-height만 지정하고 height가 없는 상황에서는 자식박스의 크기에 따라 모양이 변한다는 것을 확인할 수 있다. 
이때, 부모 박스에 height를 주거나 box1의 위치를 잡아주면 기존에 원했던 대로 height 200px을 유지할 수있다.

Vertical-align 속성 값
top	해당 요소의 상단을 부모요소의 상단에 맞춰 정렬한다.

부모박스에서 margin, padding, border를 제외한 최상단에 해당 요소를 맞춰 정렬한다.

Vertical-align 속성 값
middle	해당 요소를 부모요소의 x-height의 중간점을 기준으로 y축 가운데로 정렬한다.

부모박스의 소문자 x의 높이를 x-height(=1ex)라고 하는데,
이를 기준으로 0.5ex를 중간점으로 잡고 해당 요소들을 정렬한다.

아래 요소에서는 

Vertical-align 속성 값
bottom	해당요소의 상단을 부모요소의 하단에 맞춰 정렬한다.

https://hooni40.tistory.com/entry/BaselineVertical-align