키다리 개발자

반응형 웹이란? 본문

HTML, CSS

반응형 웹이란?

JunBucks 2020. 2. 12. 13:09

 

반응협 웹 디자인은 화면에 크기에 따라서 웹 각 페이지의 요소들이 반응해서 동작하게 되는걸 말합니다.

 

웹사이트의 레이아웃을 만들 때 방문자가 사용하는 모니터의 화면 해상도를 고려해야 합니다.

 

특히 스마트폰이나 태블릿 등 모바일 기기는 화면이 작기 때문에 가독성에 더욱 신경써야 합니다.

 

이러한 문제를 해결하는 방법 중의 하나가 반응형 웹디자인입니다.

 

해상도에 따라 가로폭이나 배치를 변경하여 가독성을 높이는 것입니다.

 

반응형 웹은 성능을 많이 먹는 대신, 최저한의 코딩으로 쉽게 디바이스 지원을 할 수 있는 매리트가 있습니다.

 

 

@media

이러한 작업을 할 수 있게 해주는 것이 @media 쿼리입니다.

 

div {
 color: black;
}

@media ( max-width: 700px ) {    // 700px 이하일때, @media 쿼리가 실행된다.
    div { color: blue; }
}

와 같이 하면, 웹브라우저의 가로 해상도가 700px 이하일 때 글자색을 파란색으로 바꿉니다.

 

즉, 모바일 기기의 해상도를 고려하여 적절히 CSS를 수정하거나 추가하는 것이 가능합니다.

 

주의할 점은 가로폭 조정을 위해서 HTML 문서의 <head>와 </head> 사이에 다음의 코드를 넣어야 한다는 것입니다.

 

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

 

저작자표시

'HTML, CSS' 카테고리의 다른 글

웹접근성이란?  (0) 2020.02.12
시멘틱 웹(Semantic Web)이란?  (0) 2020.02.12
CSS 애니메이션  (0) 2020.02.11
크로스 브라우징(Cross Browsing)이란?  (0) 2020.02.10
CSS2와 CSS3의 차이  (0) 2020.02.08
'HTML, CSS' Related Articles more
Comments