플렉스를 쓰지 않고 div로 수직 정렬해보자!
By Sera on
이번 장에서는 flex를 쓰지 않고 수직 정렬을 해보는 방법을 알아보자 아직 우리나라는 익스플로러를 많이 사용하고 있기 때문에 새로 나오는 신기술보다는 이전 구기술을 많이 사용하고 있다. (알다시피 익스플로러는 지원하지 않는게 너무 많다. 망) 특히 관공서가 그러하다. flex를 쓰지 않고도 수직 정렬을 하고 싶은 당신에게 이 글이 도움이 될 거라 믿는다.
1.display:table
훈민정음
세종 어제 훈민정음 우리나라의 말이 중국과 달라 문자(한자)와 서로 통하지 아니하여 이런 까닭으로 어리석은 백성이 말하고자 할 바가 있어도 마침내 제 뜻을 능히 펴지 못하는 사람(경우)이 많으니라 내 이를 위하여 가엾게 여겨 새로 스물여덟 자를 만드노니 사람마다 하여금 쉬이 익혀 날로 씀에 편안케 하고자 할 따름이니라.
<div class="flow_box1">
<div>
<p>훈민정음</p>
</div>
<div>
<p>세종 어제 훈민정음 우리나라의 말이 중국과 달라 문자(한자)와 서로 통하지 아니하여 이런 까닭으로 어리석은 백성이 말하고자 할 바가 있어도 마침내 제 뜻을 능히 펴지 못하는 사람(경우)이 많으니라 내 이를 위하여 가엾게 여겨 새로 스물여덟 자를 만드노니 사람마다 하여금 쉬이 익혀 날로 씀에 편안케 하고자 할 따름이니라.</p>
</div>
</div>
.flow_box1:after {
display: block;
clear: both;
content: ""
}
.flow_box1 div {
display: table;
float: left;
text-align: center;
background: gray;
width: 100px;
height: 100px;
margin-right: 10px;
}
.flow_box1 p {
display: table-cell;
vertical-align: middle;
}
2.transform (추천)
훈민정음
세종 어제 훈민정음 우리나라의 말이 중국과 달라 문자(한자)와 서로 통하지 아니하여 이런 까닭으로 어리석은 백성이 말하고자 할 바가 있어도 마침내 제 뜻을 능히 펴지 못하는 사람(경우)이 많으니라 내 이를 위하여 가엾게 여겨 새로 스물여덟 자를 만드노니 사람마다 하여금 쉬이 익혀 날로 씀에 편안케 하고자 할 따름이니라.
<div class="flow_box2">
<div>
<p>훈민정음</p>
</div>
<div>
<p>세종 어제 훈민정음 우리나라의 말이 중국과 달라 문자(한자)와 서로 통하지 아니하여 이런 까닭으로 어리석은 백성이 말하고자 할 바가 있어도 마침내 제 뜻을 능히 펴지 못하는 사람(경우)이 많으니라 내 이를 위하여 가엾게 여겨 새로 스물여덟 자를 만드노니 사람마다 하여금 쉬이 익혀 날로 씀에 편안케 하고자 할 따름이니라.</p>
</div>
</div>
.flow_box2:after {
display: block;
clear: both;
content: ""
}
.flow_box2 div {
float: left;
position: relative;
width: 100px;
height: 100px;
margin-right: 10px;
background: gray
}
.flow_box2 p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
text-align: center;
}
Explore more like this
브라우저에서 사용할 수 있는 사이즈는 뭐가 있을까?
2000년대 초에는 %와 px로만 홈페이지를 만들어왔다. 그 당시에는 반응형이라는 말이 따로 없고, 넓이 1000px로 고정된 사이트만 있었기 때문이다(아마도). 조금 더 나아가 모바일 웹을 만들기도 했다. 당연히 똑같은 디자인일 수 없고,...
CSS변수선언
변수는 대소문자를 구분하며 변수값은 하위 요소에 상속된다. CSS에서 변수를 선언할 때는 :root라는 가상선택자를 최상위 엘리먼트에 선언하여 모든 요소에서 변수를 사용할 수 있도록 한다.(대표적으로 부트스트랩) 각 요소에 변수를 지정해도 상관은 없지만,...