가변영역 & 고정영역 레이아웃 구현

HTML

<div class = "wrapper">
	<div class = "main">
		<!-- 가변 영역 -->
	</ div>
	<div class = "side">
		<!-- 고정 영역 -->
	</ div>
</ div>

1. Float + Negative Margin

.wrapper {
	overflow : hidden;
}
.main {
	float : left;
	width : 100 %;
	margin-right : -300px;
	padding-right : 300px;
	box-sizing : border-box;
}
.side {
	float : right;
	width : 300px;
}

2. Float + Calc Method

.wrapper {
	overflow : hidden;
}
.main {
	float : left;
	width : -webkit-calc (100 % - 300px);
	width : calc (100 % - 300px);
}
.side {
	float : right;
	width : 300px;
}

3. Table

.wrapper {
	display : table;
	width : 100 %;
}
.main,
.side {
	display : table-cell;
	vertical-align : top;
	text-align : left;
}
.side {
	width : 300px;
}

4. Flex Box

.wrapper {
	display : -webkit-flex;
	display : flex;
}
.main {
	-webkit-flex : 1;
	flex : 1;
}
.side {
	width : 300px;
}

CSS만으로 가변영역 / 고정영역 Column 레이아웃을 구현하는 방법

REM

종합 안내: Rem 그리고 Em, 언제 써야 할까

지식iN 웹서비스 rem 적용 사례

10×10 모바일

/* 디바이스 해상도 아니고 웹브라우저 해상도(뷰포트) 기준임 */
html {font-size:10px;} /* iphone5 */
@media (max-width:320px) {html{font-size:10px;}} /* iphone5 */
@media (min-width:360px) and (orientation:portrait) {html{font-size:11.25px;}} /* galaxy3, galaxy note3, galaxy alpha, nexus5, sony xperia, LG G2 */
@media (min-width:375px) and (orientation:portrait) {html{font-size:11.71875px;}} /* iphone6 */
@media (min-width:384px) and (orientation:portrait) {html{font-size:12px;}} /* LG Optimus G, nexus4 */
@media (min-width:412px) and (orientation:portrait) {html{font-size:12.875px;}} /* galaxy note7 */
@media (min-width:414px) and (orientation:portrait) {html{font-size:12.93px;}} /* iphone6+ */
@media (min-width:600px) and (orientation:portrait) {html{font-size:18.8125px;}} /* galaxy tab, nexus7 */
@media (min-width:768px) and (orientation:portrait) {html{font-size:24px;}} /* iPad retina */
@media (min-width:800px) and (orientation:portrait) {html{font-size:25px;}} /* galaxy tab Pro, nexus10 */

/* 가로모드 위치값 정확하게 적용시
@media (min-width:480px) {html{font-size:15px;}} /* iphone4 이하
@media (min-width:568px) {html{font-size:17.75px;}} /* iphone5
@media (min-width:592px) {html{font-size:18.5px;}} /* sony xperia
@media (min-width:598px) {html{font-size:18.6875px;}} /* nexus5, LG G2
@media (min-width:640px) {html{font-size:20px;}} /* iphone5
@media (min-width:667px) {html{font-size:20.84375px;}} /* galaxy3, galaxy note3
@media (min-width:732px) {html{font-size:22.875px;}} /* galaxy7
@media (min-width:736px) {html{font-size:23px;}} /* iphone6+
@media (min-width:962px) {html{font-size:30.0625px;}} /* galaxy tab

CJ몰 모바일

html {
    font-size: 10px;
    font-size: .625rem;
}

@media all and (min-width: 768px){
  html{
    font-size:12px;
    font-size:0.75rem;
  }
}

Centering in CSS

Horizontally
3. Is there more than one block level element?

.parent {
 text-align: center;
}
.child {
 display: inline-block;
}

Vertically
1. Is it inline or inline-* elements (like text or links)?
1-1. Is it a single line?

.center-text-trick {
 height: 100px;
 line-height: 100px;
}

1-2. Is it multiple lines?

.parent {
 display: table;
 height: 250px;
}
.child {
 display: table-cell;
 vertical-align: middle;
}

Both Horizontally and Vertically

2. Is the element of unknown width and height?

.parent {
 position: relative;
}
.child {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

Centering in CSS: A Complete Guide

[CSS] 박스 세로 중앙 정렬 6가지

Layer 화면 중앙정렬 방법