[CSS] 반응형 웹 퍼블리싱에 자주 쓰이는 기본 코드 3대장

1. 브라우저 크기에 따라 달라지는 폰트 크기 만들기

media 쿼리 사용

h1 {
	font-size: 24px;
}

p {
font-size: 16px;
}

@media (min-width: 768px) {
	h1 {
		font-size: 36px;
	}
	
	p {
		font-size: 24px;
	}
} /* 브라우저 크기가 768픽셀 이상이면 해당 폰트 크기 적용하기*/

@media (min-width: 992px) {
	h1 {
		font-size: 48px;
	}
	
	p {
		font-size: 32px;
	}
} /* 브라우저 크기가 992픽셀 이상이면 해당 폰트 크기 적용하기*/

---

2. float:left

div {
	float:left;
}

요소들 넘치지 않는 선에서 왼쪽으로 정렬 후 아래로 내려옴.

---

3. background-image

div {
  width: 100% ;
  height: 350px;
  background-image: url("../images/banner_img.jpg");
  background-size: cover;
  background-position: center;
}

반응형 웹 그리드에서 사진을 넣고 싶으면 background-image 를 자주 사용함.
사진 비율을 유지하기 위해 경우에 따라 background-size: cover; or background-size: contain; 등등 써주고,
사진을 가운데로 유지하기 위해 background-position: center; 적용.