반응형 웹 만들기

반응형 웹이란

각 디바이스의 크기와 뷰포트의 크기를 고려하여 어떠한 크기에서도 서비스를 화면에 보여주는 웹을 말한다.

통상적으로 반응형 웹이라고 부르는 조건

1. 데스크탑, 태블릿, 모바일 디바이스에 대해 각각 서비스를 문제없이 이용할 수 있는 화면 제공한다.
2. 같은 디바이스여도 유저가 사용하기에 무리가 없응 번주에ㅐ서 뷰포트(viewport) 크기를 변경하는 경우 즉시 반응하여 그에 맞게 적절한 화면을 보여준다.

반응형 웹을 만들기 위해서는 CSS 코드에서 크기를 정하는 속성 값들에 대해 % 값들을 잘 사용해 주어야 한다.

고정 크기보다는 가변 크기를 지정함으로써 다양한 창의 크기에 대해 바로 대응할 수 있다.

뷰포트 (viewport) 의 정의

display 상에서 웹을 보여주고 있는 화상표시 영역을 말한다.
데스크탑 환경에서 사용자가 브라우저 창의 크기를 조절하면 그에 따라 보여지는 웹의 사이즈도 똑같이 변한다. 즉, 데스크탑에서 viewport는 브라우저 창의 크기에 따라 변한다.
모바일 환경에서는 사용자가 브라우저의 창의 크기를 조절하는 일 보다는 확대와 축소를 하는 일이 더 많다.
확대와 축소를 해도 모바일에서의 viewport는 변하지 않는다.

뷰포트 (viewport) 관련 설정하는 법

HTML의 meta tag를 이용하면 viewport와 관련된 여러 설정을 할 수 있다.
head 태그 안에 작성하며 name과 content 속성을 통해 원하는 설정을 할 수 있다.

<meta name="viewport" content="width=device-width, initial-scale=1">

viewport content의 속성 값

• width=device-width : 웹 페이지의 너비를 디바리스 너비에 맞춘다. ( 상하 스크롤이 익숙한 대부분의 웹에서 사용.)

• height=device-height : 웹 페이지의 높이를 디바이스 높이에 맞춘다. ( 좌우 스크롤이 주로 쓰이는 웹에서 사용.)

• initial-scale : 초기 화면 배율을 설정한다. ( 1은 100%를 의미, 대부분 1을 사용한다.)

• minimun-scale : 최소 화면 배율을 설정한다. 화면이 극단적으로 축소되는 것을 방지한다. 따로 설정하지 않아도 default값이 있다. (test 후 필요하다고 판단되는 경우에 사용한다.)

• maximum-scale : 최대 화변 배율을 설정한다. 화면이 극단적으로 확대되는 것을 방지한다. 따로 설정하지않아도 default값이 있다.

• user-scalable=no : 유저가 크기 조절을 할 수 없게 막는다. (반응형 웹 디자인의 목적은 사용자의 편의성을 최대한 고려하여 배려하는 웹이기 때문에, 이 속성은 되도록이면 사용하지 않도록 함.)

미디어 쿼리 사용 법

미디어 쿼리는 viewport의 width나 height 값에 따라 구간별로 다른 CSS 속성을 적용하게 해주는 조건문과 같은 역할을 한다.

미디어 쿼리의 전략

1.데스크탑 우선 개발에 따른다.
-데스크탑에 최적화되게 CSS코드를 만든 후 미디어 쿼리로 사이즈가 더 작은 디바이스에 최적화된 예외코드를 만든다.

/*데스크탑에 최적화된 CSS코드*/
@media (max-width: 768px) {
	/*모바일에 최적화된 예외 CSS코드*/
}

2.모바일 우선 개발에 따른다.
-모바일에 최적화된 CSS코드를 만든 후 미디어 쿼리로 사이즈가 더 큰 디바이스에 최적화된 예외를 만든다.

/*모바일에 최적화된 CSS코드*/
@media (min-width: 992px) {
	/*데스크탑에 최적화된 예외 CSS코드*/
}

미디어 쿼리와 오버라이딩

미디어 쿼리 내에 따로 작성한 CSS 코드는 윗 줄에서 미리 작성해 놓은 CSS 코드에 오버라이딩 된다.
즉, 같은 선택자, 같은 속성에 대해 위에서 작성한 속성값과 미디어 쿼리 내에서의 속성값이 충돌하면 미디어 쿼리 내에서 작성한 값이 선택 된다.

• CSS 코드는 같은 선택자에 대해 더 밑에 있는 줄에서 작성한 코드의 값을 반영한다.

• 미디어 쿼리는 예외를 작성하므로 상단보다는 하단에 작성하는 것이 적합하다.

• 예외에 대해 오버라이딩을 하기 위한 코드는 반드시 CSS 파일 내에서 가장 하단에 위치해야 한다.

동일한 선택자에 대해 미디어쿼리 안에 있는 속성만 적용되는 게 아니라 위에서 작성한 코드도 같이 적용된다는 점에 유의해야 한다.

같은 선택자에 대해 본래 코드에서 top offset을 설정하고,
미디어 쿼리에서 bottom offset을 설정해 주면 top offset 값과 bottom offset 값 모두 적용된다.

이 경우 해당 요소에 고정 height 값이 적용되어 있는 상태라면,
우선 순위에 따라 bottom offset은 적용되지 않고 top offset만 적용된다.

.snow {
	position:	fixed;
    width:	30px;
    height:	30px;
    top:	10px;
}
@media (max-width:	500px) {
	.snow {
    	top: inital;
        bottom:	10px;
    }
}

디바이스별 width 값

디바이스 별로 다른 화면 대응을 하기 위한 미디어 쿼리 표준 width 값

가장 작은 디바이스 : < 576px
모바일 디바이스 : <= 768px
태블릿 디바이스 : 768px < x <= 992px
데스크탑 : 992px < x <= 1200px
큰 화면 데스크탑 : 1200px

하지만 신형 디바이스가 끝없이 출시되기 때문에 개발 시점에서 상황에 맞는 값을 확인 해야 한다.