[CSS] 반응형 웹사이트 만들기

반응형 웹사이트를 만들기 위한 방법은 크게 두가지로 나눌수있습니다.

 

1. CSS 미디어 쿼리 사용

2. 자바스크립트 사용

 

어떤것을 사용하더라도 반응형 레이아웃은 디바이스의 가로 너비를 기준으로 구분합니다.

하지만 디바이스마다  가로너비가 다르므로 비율에 따라 나누기도 합니다.

그 나누는 기준 위치를 중단점 (Break Point) 및 기준점 이라고 하며, 대표적으로 많이 사용되는 가로 해상도는 다음과 같습니다. 

 

 

이 해상도들 중 어떤 가로 너비를 디바이스 별 중단점으로 사용하는지가 반응형 웹 레이아웃을 만드는 기준이 됩니다.

 

 

1. 최소 반응형 레이아웃

가장 많이 사용하는 기준입니다. 대부분 이 기준으로 미디어 쿼리를 작성합니다.

/* 데스크탑 */

@media screen and (max-width:1023px) {
/* 타블렛 */
}

@media screen and (max-width:767px) {
/* 모바일 */
}

 

 

2. 가로모드 디바이스 지원 반응형 레이아웃

모바일 기기와 타블렛 기기의 가로모드 화면을 별도로 구분해 디바이스 사용환경을 최대한 고려한 반응형 레이아웃입니다.

다양한 기가 환경을 고려해서 최적의 화면을 보여줘야 하거나, 그리드 형태로 많은 컨텐츠를 표시하는 반응형 레이아웃인 경우 다음과 같이 구분합니다.

 

가로모드 지원 반응형 레이아웃

 

 

미디어 쿼리는 다음과 같이 작성합니다.

 

/* 빅데스크탑 */

@media screen and (max-width:1799px) {
/* 데스크탑 */
}

@media screen and (max-width:1199px) {
/* 타블렛 가로 */
}
@media screen and (max-width:899px) {
/* 모바일 가로, 타블렛 세로 */
}

@media screen and (max-width:599px) {
/* 모바일 세로 */
}

 

 

 

3. 부트스트랩 반응형 레이아웃

 

크기	키워드	기준점 해상도	디바이스
아주 작은(Extra small)	xs	576px 미만	스마트폰 세로
작은(Small)	sm	576px 이상	스마트폰 가로
중간(Medium)	md	768px 이상	타블렛
큰(Large)	lg	992px 이상	데스크탑
아주 큰(Extra large)	xl	1200px 이상	큰 데스크탑

 

부트스크랩 반응형 구분점

 

미디어 쿼리는 다음과 같이 작성합니다.

 

/* 스마트폰 세로 */

@media screen and (min-width:576px) {
/* 스마트폰 가로 */
}

@media screen and (min-width:768px) {
/* 타블렛 */
}
@media screen and (min-width:992px) {
/* 데스크탑 */
}

@media screen and (min-width:1200px) {
/* 큰 데스크탑 */
}