[Web] Responsive Web / Box-sizing

 

웹 페이지는 여러 사용자가 pc, 태블릿, 휴대폰 등 다양한 장치를 통해 접근한다.

이때 사용자가 접근하는 장치에 따라 그 내용을 보기 좋기 조정하는 것이 필요하다.

 

Responsive Web Design(RWD)은 CSS와 HTML을 통해 콘텐츠의 크기를 조정, 축소, 확대 , 이동하여 모든 기기에서 보기 좋도록 만든다.

 

 

<meta> viewport

viewport는 기기에서 사용자가 화면을 볼 수 있는 범위를 말한다. 따라서 viewport는 기기마다 다르다. html문서가 동일한 viewprot에 대해 작성되어있으면 모바일이나 태블릿으로 접속할 경우 페이지 접근시 시각적으로 불편함을 겪게 될 것이다.

이떄 <meta> viewport를 사용하면 이 문제를 해결할 수 있다.

 

viewport속성

- width=device-width;

width를 다바이스의 가로크기로 설정하여 각 기기에 맞춰 가로폭이 자동으로 설정되도록 한다.

- initial-scale=1.0;

initial-scale은 페이지 로드시 확대 / 축소의 비율을 의미한다.

viewport사용과 함께 CSS 미디어 쿼리를 사용하여 접근 기기별로 다른 스타일을 적용하여 사용자가 페이지를 더욱 보기 좋도록 할 수 있다.

 

@media : media query

@media를 이용하여 특정 조건을 만족할때의 css스타일 설정 및 html 내용을 변경할 수 있다.

 

다음예제는 600px 768px를 기준으로 3가지 영역에서의 background-color변화를 준 media query 예제이다.

max-width와 min-width를 설정하여 브라우저의 width에 따른 조건을 걸어주었다.

@media only screen and (max-width: 600px) {

.example {background: red;}

}

@media only screen and (min-width: 600px) {

.example {background: green;}

}

@media only screen and (min-width: 768px) {

.example {background: blue;}

}



<p class="example">Resize the browser window to see how the background color of 
this paragraph changes on different screen sizes.</p>

example class에 해당하는 p태그는 페이지 창의 크기에 따라서 배경색이 바뀌게 된다.

 

 

box-sizing

기본적으로 한 요소의 너비와 높이는 다음과 같이 계산된다.

너비 + 패딩 + 테두리 = 요소의 실제 너비

높이 + 패딩 + 테두리 = 요소의 실제 높이

대표사진 삭제

사진 설명을 입력하세요.

하지만 이럴경우 위 사진처럼 padding과 테두리 두깨의 크기에 따라 element의 높이와 너비가 불규칙정으로 정해질 수 있기때문에 디자인적인 측면에서의 비효율 적일 수 있다.

 

이러한 문제를 커버하기 위한 개념으로 box-sizing이 있다

box-sizing:border-box; 를 사용하면 element가 실제로 차지하는 너비와 높이가 태두리의 영역으로 고정되어 이러한 부분을 해결할 수 있다.

-> 일관적인 디자인이 가능하다.

 

max-width /min-width

max-width

max-width를 통해 element의 width를 지정할 경우 페이지의 크기가 정해둔 max-width보다 작아질경우 그에 맞게 width가 줄어드는 것을 확인 할 수 있다.

반면 width를 통해 폭을 지정한 경우 아예 해당하는 width의 크기로 element의 폭이 고정된다.

 

min-width

element의 width 속성값이 min-width보다 작아지는 것을 방지할 수 있다.