반응형 웹
그간, 마구잡이로 사용해 오던 나의 CSS, 그러다보니 상황에 따른 대응력이 좀 떨어짐을 느끼고있다. 특히 반응형으로 만들때 통일되지않은 기준 때문에 디자인이 엉망이 되는 상황이다. 그래서 가볍게 (시작은 가볍게 가지만 어떻게 끝날지 모른다)정리를 해보려 한다.
기준: 너비
반응형 레이아웃을 디바이스에 다라 구분하는 기준은 바로 너비이다. 가로 너비 값에 따라 디바이스를 인식하고, 레이아웃을 거기에 맞춰 변경하는 것이 CSS반응형 레이아웃의 기본개념이다.
가로 너비를 기준으로 하는 것은 공통이지만, 디바이스 종류별 너비 값 기준은 다양하다. 별도로 정해진 표준이 없다. 그래서 많이 사용하는 값을 기준으로 하기도하고, 레이아웃 특징이 맞춰 개별적인 값을 정하기도 한다.
나누는 기준 해상도 위치를 중단점(Break point)라고 한다. 중단점, 또는 기준점을 나눌 댸 디바이스별로 많이 사용되는 가로 해상도는 아래와 같다.
최소 반응형 레이아웃
가장 많이 사용하는 대중적인 기준이다. 786px미만은 모버일 기기, 786~1024px는 타블렛, 1024px이상은 데스크탑 기기로 구분한다. 데부분 디바이스에 잘 맞는다. 반응형 레이아웃을 위한 css 작성도 간결하다. 가장 애매한 지점은 중단점인데, 예를들어 768px는 어디에 포함시켜야 하는걸까? 대체로 767px까지 모바일, 768~1023px까지 타블렛으로 설정한다.
/* 데스크탑 */
@media screen and (max-width:1023px) {
/* 타블렛 */
}
@media screen and (max-width:767px) {
/* 모바일 */
}가로모드 디바이스 지원 반응형 레이아웃
모바일 기기와 타블렛 기기의 가로모드 화면을 별도로 구분해 디바이스 환경을 최대로 고려한 레이아웃이다. 정답은 아니다. 많이 사용하는 해상도를 기준으로 구분한 반응형 레아이웃이다. 반응형 레이아웃 특성에 맞춰 해상도 구분을 임의로해서 레이아웃이 최적화를 할 수 있다.
/* 빅데스크탑 */
@media screen and (max-width:1799px) {
/* 데스크탑 */
}
@media screen and (max-width:1199px) {
/* 타블렛 가로 */
}
@media screen and (max-width:899px) {
/* 모바일 가로, 타블렛 세로 */
}
@media screen and (max-width:599px) {
/* 모바일 세로 */
}부트스트랩 반응형 레이아웃
부트스트랩은 4개의 중단점으로 구분한다. 디바이스별 구분 보다는 small, medium, large, extra large 화면 크기로 구분을 해서 반응형 화면을 구분한다.
미디어 쿼리는 아래와 같다.
/* 스마트폰 세로 */
@media screen and (min-width:576px) {
/* 스마트폰 가로 */
}
@media screen and (min-width:768px) {
/* 타블렛 */
}
@media screen and (min-width:992px) {
/* 데스크탑 */
}
@media screen and (min-width:1200px) {
/* 큰 데스크탑 */
}부트스트랩의 기본 미디어 쿼리 해당도 구분점 방향은, 일반적으로 사용하는 방법과 반대 방향이다. max-width를 사용하는 방식으로 바꾸면 아래와 같다.
/* 큰 데스크탑 */
@media screen and (max-width:575.98px) {
/* 스마트폰 세로 */
}
@media screen and (max-width:767.98px) {
/* 스마트폰 가로 */
}
@media screen and (max-width:991.98px) {
/* 타블렛 */
}
@media screen and (max-width:1199.98px) {
/* 데스크탑 */
}정리
반응형 레이아웃을 나누는 방식은 여러가지이다. 정해진 표준이 있는 것은 아니다. 단순한 레아이웃에는 가장 단순한 최소 반응형 레이아웃을 사용하면 된다. 보다 다양한 기기에 최적화 시키려면 가로모드를 고려한 레이아웃을, 부트스트랩과 같은 프레임워크를 사용할 경우 그 기준에 맞춰 사용하면 된다.
출처
