[CSS] 두 개의 영역 나란히 배치하기

가장 기본적인 레이아웃인, 두 개의 영역 나란히 배치하기다.
하단처럼 하나의 html로, 6가지 CSS를 소개해보도록 하겠다.

HTML

<div class="item-wrap">
	<div class="items">
		<div class="item left">
			<div class="inner">
				<span>50%</span>
			</div>
		</div>
		<div class="item right">
			<div class="inner">
				<span>50%</span>
			</div>
		</div>
	</div>
</div>

CSS : inline-block

첫번째는display: inline-block을 사용한 영역 배치다.
나란히 배치할 영역을 감싸고 있는 부모에게 display: block; font-size: 0;을 준다.
font-size: 0;을 주는 이유는 브라우저 렌더링 시 font-size로 인해 약간의 margin이 발생하기 때문에, 이를 없애주어야 자식 영역을 나란히 배치할 수 있다.

.item-wrap {
	max-width: 1280px;
	margin: 0 auto;
}
.item-wrap .items { /* 자식들을 감싸고 있는 부모 */
	display: block;
	font-size: 0; /* 가장 중요한 font-size: 0; 속성 */
	margin: 0 -5px; /* 너비간 10px 간격을 만들기 위해 남은 5px을 양옆으로 땡겨줌 */
}
.item-wrap .items .item { /* 나란히 배치할 영역 */
	display: inline-block;
	width: 50%;
	padding: 0 5px; /* 간격을 위해 각 너비에 준 패딩 5px을 줌 */
	vertical-align: middle; /* 나란히 배치하는 와중에 수직정렬도 가운데로 하려고 준 속성 */
	text-align: center; /* 영역 안 태그들의 텍스트가 center로 오도록 준 속성 */
	box-sizing: border-box; /* width값이 오롯이 50%를 갖게 하기 위해 준 속성 */
}
.item-wrap .items .item .inner { /* 나란히 배치할 영역 안 텍스트를 감싼 div */
	height: 200px;
	font-size: initial; /* font-size: 0;을 하면 그 아래 자식들 모두 상속받기 때문에 텍스트가 있는 경우라면 꼭 줘야할 속성 */
	background: aliceblue; /* 간격과 영역을 보여주기 위한 속성 */
}
.item-wrap .items .item .inner:before { /* 텍스트를 수직 가운데 정렬하기 위한 가상선택자 */
	content: ''; /* 가상선택자 안에 빈값을 넣어주기 위해 적용한 속성 */
	display: inline-block; /* inline-block이어야 vertical-align을 쓸 수 있기 때문에 준 속성 */
	vertical-align: middle; /* 수직 가운데 정렬을 하기 위해 준 속성 */
	width: 0; /* 다음에 올 태그와 수직을 맞추기 위한 것이므로 width값은 필요없어서 0으로 줌 */
	height: 100%; /* height값은 부모의 높이값을 100% 상속받아야 하기 때문에 준 속성 */
}
.item-wrap .items .item .inner span { /* 가상선택자와 나란히 배치하기 위해 준 속성 */
	display: inline-block;
	vertical-align: middle;
}

CSS : table-cell

두번째는 display: table-cell을 사용한 영역 배치다.
<table> 태그 내 속성들을 고스란히 사용할 수 있기 때문에 유용한 속성이다. 하지만 그에 따라 제약도 있는 편이라 사용할 때 주의가 필요하다.

.item-wrap {
	max-width: 1280px;
	margin: 0 auto;
}
.item-wrap .items { /* 자식들을 감싸고 있는 부모 */
	display: table;
	table-layout: fixed; /* 고정된 영역 이상으로 넓어지지 않도록 테이블을 고정하는 속성 */
	width: 100%;
	height: 200px;
	word-break: break-all; /* 테이블을 고정하게되면 table 태그의 기본으로 주어져있는 word-break: normal; 속성 때문에 한줄로 텍스트가 삐져나오기 때문에 꼭 줘야하는 속성 */
}
.item-wrap .items .item { /* 나란히 배치할 영역 */
	text-align: center;
	display: table-cell;
	vertical-align: middle;
}
.item-wrap .items .item.left {
	padding-right: 5px;
}
.item-wrap .items .item.right {
	padding-left: 5px;
}
.item-wrap .items .item .inner { /* 나란히 배치할 영역 안 텍스트를 감싼 div */
	overflow: hidden; /* 높이값보다 텍스트가 많아질 경우 숨김처리 하기 위한 속성 */
	position: relative; /* 가상선택자의 부모영역이 될 수 있도록 준 속성 */
	height: 100%; /* 높이값을 상속받기 위한 속성, 이 속성을 주지 않으면 height: auto가 되어 영역이 사라짐 */
	background: aliceblue;
}
.item-wrap .items .item .inner:before { /* 텍스트를 수직 가운데 정렬하기 위한 가상선택자 */
	content: '';
	position: absolute; /* 다음에 올 텍스트의 고정된 기준 역할을 하게 하기 위하여 주는 속성*/
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
}
.item-wrap .items .item .inner span { /* 가상선택자와 나란히 배치하기 위해 준 속성 */
	position: absolute; /* 부모의 영역 안에서 자유롭게 움직일 수 있도록 주는 속성 */
	top: 50%; /* 부모로부터 top 50%를 띄워주는 속성 */
	left: 50%; /* 부모로부터 left 50%를 띄워주는 속성 */
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%); /* -ms- 프리픽스 붙여주면 IE 9 부터 사용 가능, -ms- 프리픽스 제외하고는 굳이 사용하지 않아도 되지만 혹시모를 상황을 대비해 모두 적어주었음 */
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%); /* 텍스트의 너비값이 고정되어 있지 않기 때문에 유동적으로 가운데에 배치하기 위한 속성 */
}

CSS : float

세번째는 float을 사용한 영역 배치다.
float을 사용하면 꼭 clear를 해주어 다음에 올 태그들이 꼭 제자리를 잡을 수 있도록 해줘야 한다!

.item-wrap {
	max-width: 1280px;
	margin: 0 auto;
}
.item-wrap .items { /* 자식들을 감싸고 있는 부모 */
	display: block;
	margin: 0 -5px;
}
.item-wrap .items:before,
.item-wrap .items:after {
	content: '';
	display: block;
	clear: both; /* clear를 해주어야지만 float 다음에 올 태그의 영역이 올바르게 차지함 */
}
.item-wrap .items .item { /* 나란히 배치할 영역 */
	float: left;
	width: 50%;
	box-sizing: border-box;
	text-align: center;
}
.item-wrap .items .item.left {
	padding-right: 5px;
}
.item-wrap .items .item.right {
	padding-left: 5px;
}
.item-wrap .items .item .inner { /* 나란히 배치할 영역 안 텍스트를 감싼 div */
	overflow: hidden;
	position: relative;
	height: 200px;
	background: aliceblue;
}
.item-wrap .items .item .inner:before { /* 텍스트를 수직 가운데 정렬하기 위한 가상선택자 */
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
}
.item-wrap .items .item .inner span { /* 가상선택자와 나란히 배치하기 위해 준 속성 */
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	word-break: break-all;
}

CSS : position

네번째는 position을 사용한 영역 배치다.

.item-wrap {
	max-width: 1280px;
	margin: 0 auto;
}
.item-wrap .items { /* 자식들을 감싸고 있는 부모 */
	display: block;
	position: relative; /* 자식들의 기준점이 되기 위해 준 속성*/
	height: 200px;
}
.item-wrap .items .item { /* 나란히 배치할 영역 */
	position: absolute;
	left: 0;
	width: 50%;
	height: 100%;
	text-align: center;
}
.item-wrap .items .item.left {
	padding-right: 5px;
}
.item-wrap .items .item.right {
	padding-left: 5px;
}
.item-wrap .items .item+.item {
	left: 50%; /* 다음에 올 영역에 left: 50%;을 사용해 나란히 배치 */
}
.item-wrap .items .item .inner { /* 나란히 배치할 영역 안 텍스트를 감싼 div */
	position: relative;
	background: aliceblue;
	height: 100%;
}
.item-wrap .items .item .inner:before { /* 텍스트를 수직 가운데 정렬하기 위한 가상선택자 */
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
}
.item-wrap .items .item .inner span { /* 가상선택자와 나란히 배치하기 위해 준 속성 */
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	word-break: break-all;
}

CSS : flex

다섯번째는 flex를 사용한 영역 배치다.
IE에서는 제대로 지원해주지 않기 때문에, 모바일이나 크롬만 맞출 때 사용하는 것이 좋을 듯 하다!

.item-wrap {
	max-width: 1280px;
	margin: 0 auto;
}
.item-wrap .items { /* 자식들을 감싸고 있는 부모 */
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex; /* flex container를 만들어주는 속성 */
   justify-content: space-between; /* 행 정렬 하는 속성, 영역 간 공백을 만들어주는 속성 */
	height: 200px;
}
.item-wrap .items .item { /* 나란히 배치할 영역 */
	text-align: center;
	width: 50%;
	margin: 0 5px; /* 간격을 위해 준 속성 */
}
.item-wrap .items .item .inner { /* 나란히 배치할 영역 안 텍스트를 감싼 div */
	position: relative;
	background: aliceblue;
	height: 100%;
}
.item-wrap .items .item .inner:before { /* 텍스트를 수직 가운데 정렬하기 위한 가상선택자 */
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
}
.item-wrap .items .item .inner span { /* 가상선택자와 나란히 배치하기 위해 준 속성 */
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	word-break: break-all;
}

CSS : grid

여섯번째는 grid를 사용한 영역 배치다.
이 역시도, IE에서는 제대로 지원해주지 않기 때문에, 모바일이나 크롬만 맞출 때 사용하는 것이 좋을 듯 하다!

.item-wrap {
	max-width: 1280px;
	margin: 0 auto;
}
.item-wrap .items { /* 자식들을 감싸고 있는 부모 */
	display: grid; /* 이 요소를 주면 바로 밑 자식 요소는 그리드의 아이템이 됨 */
	height: 200px;
	grid-template-columns: repeat(2, 1fr); /* 2개의 그리드 아이템을 그리드 컨테이너에 사용가능한 공간에 대한 비율을 차지하는 속성, fr은 분수(fraction)를 나타냄 */
	grid-gap: 10px; /* grid-row-gap과 grid-column-gap의 축약형으로 행과 열사이의 간격을 10px 주는 속성 */
}
.item-wrap .items .item .inner { /* 나란히 배치할 영역 안 텍스트를 감싼 div */
	position: relative;
	background: aliceblue;
	height: 100%;
}
.item-wrap .items .item .inner:before { /* 텍스트를 수직 가운데 정렬하기 위한 가상선택자 */
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
}
.item-wrap .items .item .inner span { /* 가상선택자와 나란히 배치하기 위해 준 속성 */
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	word-break: break-all;
}