CSS를 하다보면 이런 생각이 든다. 정렬이.. 이렇게 난해할 일인가?
포토샵으로는 정렬버튼 하나만 누르면 한번에 턱턱 정렬되는 것이.. 코딩에서는 어찌나 삐걱거리는지! 그러나 정렬없이 웹사이트 퍼블리싱은 성립하지 않는 만큼 많이 쓰이는 요소이기도 하다.
그래서 이번에 미리 설정한 높이와 넓이에 맞춰 박스를 수평정렬 하는 코드를 정리해보았다! 정렬하는 방법은 flex, grid 등등 여러가지 방법이 있지만 이번엔 float 속성을 이용했다.
1320 X 650 Section에 box 4개를 수평정렬해보자!
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>float를 이용한 box정렬</title>
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./css/style.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="container">
<section id="first">
<div class="inner">
<ul class="box_wrap">
<li>
<div class="items">
<h3>채용정보</h3>
<p>21세기 인재 모집<br />스스로 발전하는 인재상</p>
<p></p>
<div class="img">👩💻</div>
</div>
</li>
<li>
<div class="items">
<h3>채용정보</h3>
<p>21세기 인재 모집<br />스스로 발전하는 인재상</p>
<p></p>
<div class="img">👩💻</div>
</div>
</li>
<li>
<div class="items">
<h3>채용정보</h3>
<p>21세기 인재 모집<br />스스로 발전하는 인재상</p>
<p></p>
<div class="img">👩💻</div>
</div>
</li>
<li>
<div class="items">
<h3>채용정보</h3>
<p>21세기 인재 모집<br />스스로 발전하는 인재상</p>
<p></p>
<div class="img">👩💻</div>
</div>
</li>
</ul>
</div>
</section>
</div>
</body>
</html>
CSS
charset "UTF-8";
html,
body {
height: 100%;
}
body {
font-family: "Noto Sans KR", sans-serif;
color: #666666;
}
ul,
li {
list-style: none;
}
a {
color: #666666;
text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1;
}
/*섹션 넓이 지정*/
section {
min-width: 1320px;
}
/*.inner 구성잡기 1320X650 */
#container section .inner {
width: 1320px;
min-height: 485px;
padding-top: 165px;
margin: 0 auto;
text-align: center;
}
/*li 수평정렬, 넓이설정*/
#container section .inner .box_wrap li {
float: left;
padding: 0 20px;
/* box 4개 - 좌우패딩 */
width: calc(25% - 40px);
}
/*.items 구성잡기*/
#container section .inner .box_wrap li .items {
border: 1px solid #e3e3e3;
padding: 45px 0;
/*270px - (상하패딩 90px)*/
min-height: 180px;
}
/*text 구성잡기*/
#container section .inner .box_wrap li .items h3 {
font-size: 20px;
line-height: 20px;
}
#container section .inner .box_wrap li .items p {
margin: 32px 0;
line-height: 24px;
}
결과
요점은 25%같이 상대단위를 사용해서 넓이를 나눠주며,
박스와 박스사이의 거리와 박스 내부의 패딩값을 clac()함수를 이용해 넓이에서 빼주면 쉽게 박스의 넓이를 구할 수 있다!
