반응형 웹

반응형 웹이란

여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트로써 브라우저의 크기(스크린의 크기, 디바이스의 종류)에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트를 의미

 

즉, 하나의 소스 코드로 모든 스크린에 최적화된 웹 사이트를 구축할 수 있는 방법론, 디바이스 종류에 따라 웹페이지의 크기가 자동적으로 재조정되는 것

 

장점,

효율적인 유지보수

검색엔진(SEO) 최적화 유리

 

단점,

사이트의 속도 저하

웹브라우저 호환성 문제

 

head에 link태그

<link href="css파일이름.css" media="screen and (min-width: 400px) and (max-width: 1000px)" rel="stylesheet">

 

head에 style 태그

<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;
		}
}

• 미디어타입: all(모든 미디어 타입) / print(프린터) / screen(컴퓨터화면) / speech(스크린리더)
• 조건: width, min-width, max-width 등 설정

@media screen and (max-width: 400px) {
    body {
        color: blue;
    }
}

• 방향성: 세로모드인지 가로모드인지 검사해 css 스타일을 주고 싶은 경우
  • orientaion으로 검사

    @media (orientation: landscape) { //가로방향일 경우 color : blue
        body {
            color: blue;
        }
    }
  
  

 

 

and나 or을 사용해 더 복잡한 미디어 쿼리를 만들 수 있다.

 

• and : 미디어 기능을 합친다.

@media screen and (min-width: 400px) and (orientation: landscape)

 

• or : 둘중하나를 만족시키면 스타일 적용

@media screen and (min-width: 600px), screen and (orientation: landscape)

 

• not: 해당 미디어쿼리가 false일때 스타일 적용

@media not all and (orientation: landscape)