🚀CSS - Responsive Web

1. 반응형 웹 디자인

@media screen and (min-width: 800px) {
	container {
		width:50%;
	}
}

• min-width : 최소 너비를 지정
• max-width: : 최대 너비를 지정

2. 단위

• px : 가장 기본적인 단위
• em : 항상 고정된 폰트 사이즈 (1em == 16px)

.parent {
	font-size: 8em;
}

.child {
	font-size: 0.5em;
}
/* em은 부모요소에 상대적이므로 parent는 128px, child는 64px */

• rem : root em

.parent {
	font-size: 8rem;
}

.child {
	font-size: 0.5rem;
}
/* rem은 루트요소에 상대적이므로 parent는 128px, child는 8px */

• vw : 뷰포트의 너비
• vh : 뷰포트의 높이

3. 적합한 사용 기준

• 부모 요소의 사이즈에 따라 사이즈가 변경되야 한다 : %, em
• 부모와는 상관 없이 브라우저의 사이즈에 대해서 반응 : v*, rem
• 요소의 너비와 높이에 따라 사이즈 변경 : %, v*
• 폰트 사이즈에 따라 사이즈 변경 : em, rem

4. 참고 페이지 List

PXtoEM (px,em 변환 페이지)
http://pxtoem.com