반응형 웹이란?
브라우저의 크기(디바이스의 종류,스크린의 크기)에 따라 웹사이트가 실시간으로 반응하여 자동으로 크기에따라 변하는 사이트를 의미한다.
반응형 웹의 특징?
1.하나의 URL을 기반으로 화면이 바뀐다.
2. 효율적인 유지보수 : 오직 하나의 HTML소스만 존재하기 때문에 소스를 수정하면 모든 스크린의 사이즈에 맞춰 최적화 되기 때문에 유지보수가 효율적이다.
3.검색엔진 최적화 유리 : PC용과 모바일용 URL이 동일하기 때문에 광고를 통해 사용자 접속을 효율적으로 관리 할 수 있다.
4. 사이트 속도 저하 : 읽어야할 소스가 많아 많은 데이터를 소비하고,이에따라 로딩 속도나 이미지 리사이징 문제로 성능이 떨어질수 있다.
5. 웹 브라우저 호환성 문제 : 웹 브라우저는 스펙 및 사양이 각자 다르기 때문에 잘 반응하던 HTML 소스가 다른 웹 브라우저에서는 디자인이 깨지는 경우가 발생할 수 있다.
미디어 쿼리란?
미디어 쿼리는 CSS3에서 소개된 CSS 기술로 특정 조건이 true인 경우에만 CSS 속성 블록을 적용하도록 @media 규칙을 사용하여 웹 사이트의 사이즈를 유동적으로 바꿔준다.
미디어 쿼리 사용법
<link href="css파일이름.css" media="screen and (min-width: 400px) and (max-width: 1000px)" rel="stylesheet">CSS 파일을 head태그안에 넣을 때 mdia속성을 사용하여 조건을 지정해준다.
<style type="text/css" media="screen and (min-width: 400px) and (max-width: 1000px)">
/* 여기 css를 작성합니다. */
</style>head태그 안에서 style 태그를 열어 미디어 쿼리를 작성할 수도 있다.
@media 미디어 타입 (조건(너비 및 높이)) {
(CSS 입력하는 부분)
}
--예제
@media screen (max-width: 400px) {
body {
color: red;
}
}CSS 파일 안에서 미디어 쿼리를 작성하여 적용시키는 방법도 있다.
미디어 쿼리의 기본적인 구조
미디어 타입 : 코드가 어떤 미디어를 위한 것인지 브라우저에 알려줍니다.
조건(너비 및 높이) : 지정한 창의 너비나 높이를 기준으로 기준이 만족되면 스타일이 적용되고, 만족되지 않으면 적용되지 않는다.
CSS 입력하는 부분 : 조건문을 통과하고, 미디어 타입이 올바른 경우 스타일이 적용 된다.
미디어 타입(Media Type)
all : 모든 미디어 타입**
print : 프린터
screen : 컴퓨터 화면
speech : 스크린 리더**
@media (orientation: landscape) {
body {
color: rebeccapurple;
}
}세로 모드인지 가로모드인지 검사하여 CSS속성을 적용하고 싶은 경우, orientation으로 검사 할 수 있다. 해당 예제의 경우 가로 방향인 경우이다.
@media screen and (min-width: 400px) and (orientation: landscape) {
body {
color: blue;
}
}and를 사용해 미디어 기능을 합칠 수 있다.
@media screen and (min-width: 600px), screen and (orientation: landscape) {
body {
color: blue;
}
}콤마로 분리를 한다면 미디어 쿼리의 해당 조건 중 어느 하나를 만족시킬 때 CSS 스타일을 적용시킬 수 있다.
@media not all and (orientation: landscape) {
body {
color: blue;
}
}not 연산자를 사용하게 되면 미디어 쿼리의 의미를 반대로 적용시킬 수 있다. 해당 예제의 경우 방향이 세로인 경우에만 CSS가 적용된다.
