반응형 웹
다양한 디바이스의 스크린 크기에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트를 의미함. 즉, 하나의 소스 코드로 모든 스크린에 최적화된 웹 사이트를 구축할 수 있는 방법론.
반응형 웹 장단점
장점
효율적인 유지보수
하나의 콘텐츠에 오직 하나의 HTML 소스만 있기 때문에 하나의 소스를 수정하면 된다.
검색엔진(SEO) 최적화 유리
하나의 URL을 기반으로 화면이 바뀌므로 PC용 URL과 모바일용 URL이 동일하다. 따라서 검색 포털 등 광고를 통한 사용자 접속을 효율적으로 관리할 수 있다.
단점
사이트의 속도 저하
모바일 전용 사이트에 비해 무겁다. 반응형 웹 디자인은 읽어들여야 할 소스가 많아 불필요하게 많은 데이터를 소비하기 때문에 이는 사이트 속도와 직결된다. 실제로 사용하지 않은 자원을 전송 받거나 실제 사용되는 이미지보다 더 큰 이미지를 사용할 수 있다.
미디어쿼리
CSS2.1 부터 미디어 타입으로 단말기 종류에 따라 각각 다른 스타일을 적용시키는 게 가능하다. CSS3부터는 이 미디어 타입을 개선하여 좀 더 구체적인 조건으로 필요한 스타일을 적용할 수 있도록 개선되었다.
적용법
css파일 적용하는 것과 크게 다르지 않다.
- HTML 파일 내
<head>태그 안에<link>태그를 위치시키고 미디어 속성을 사용하여 조건을 지정한다. 미디어 속성 내 해당 조건을 만족할 때에만 해당 css 파일을 불러오게 된다.
<link href="css파일명.css" media="screen and (min-width: 400px) and (max-width: 1000px)" rel="stylesheet">- HTML 파일 내
<head>태그 안에<style>태그를 열어 미디어 쿼리를 작성하는 방법. 1번 방법과 같이 미디어 속성 조건에 만족할 때만 적용된다.
<style type="text/css" media="screen and (min-width: 400px) and (max-width: 1000px)">
/* 여기 css를 작성합니다. */
</style>- css 파일 혹은 태그 안에서 직접 미디어 쿼리를 작성.
@media 미디어 타입 (조건(너비 및 높이)) {
(CSS 입력하는 부분)
}
--예제
@media screen (max-width: 400px) {
body {
color: red;
}
}- 미디어 타입 : 코드가 어떤 미디어를 위한 것인지 브라우저에 알림.
- 조건(너비 및 높이) : 지정한 창의 너비나 높이를 기준으로 기준이 만족되면 스타일이 적용되고, 만족되지 않으면 적용되지 않는다.
- CSS 입력하는 부분 : 조건문을 통과하고, 미디어 타입이 올바른 경우 스타일이 적용 된다.
안녕하세요. 웹 프론트엔드 개발자 전성훈입니다.