반응형 웹이란?
기기의 화면이나 환경에 맞게 자유자재로 최적화된 구조로 변경하여 보여주는 것 크게 모바일, 테블릿, PC로 나뉜다. 반응형 웹은 유지보수가 간편하다. 모바일 버전과 데스크톱 버전 두개의 웹사이트를 만들 필요가없고 모바일 버전, 테블릿 버전, PC버전을 하나의 HTML과 CSS에서 작업하기 때문 또 전달하고자 하는 내용을 확실하게 전달할 수 있고 기업비용 측면에서도 상당한 효과를 볼 수 있다. 또 검색엔진 최적화에서 하나의 HTML로 이루어져 있기때문에 좀더 상위에 노출될수있다. 만약 주소가 두개면 검색결과에서 상위권에 배치되기 힘들다. 미래 지향적 기술
핵심 기술
가변 그리드
가변 그리드는 웹사이트를 제작할 때 화면의 크기에 관계없이 자유롭게 늘어나거나 줄어들 수 있도록 픽셀 (px) 대신 퍼센트 (%)로 제작하는 기술
( 가변 크기로 만들 박스의 가로 너비 ÷ 가변 크기로 만들 박스를 감싸고 있는 박스의 가로 너비 ) × 100 = 가변 크기의 값
( 가변 마진을 적용할 마진값 ÷ 적용할 박스를 감싸고 있는 박스의 가로너비 ) × 100 = 가변 마진값
( 가변 패딩을 적용할 패딩값 ÷ 적용할 박스를 감싸고 있는 박스의 가로너비 ) × 100 = 가변 패딩값
( 가변 폰트를 적용할 글자 크깃값 ÷ 적용할 요소를 감싸고 있는 요소의 글자 크깃값 ) = 가변 폰트값
가변 이미지
이미지 요소에도 상대 단위 em,vw,% 등을 얼마든지 사용할 수 있지만 주의할 점은 브라우저가 대부분 이미지의 비율을 유지한다는 점, 그리고 이미지가 무작정 커지는 것을 경계해야 한다는 점이다.
미디어 쿼리 ( Media Queries )
컴퓨터나 기기에게 화면크기를 감지하여 웹사이트를 변경하는 기술 컴퓨터나 기기의 환경 또는 종류를 감지해야 그 기기에 맞게 웹사이트의 구조를 바꿀 수 있기 때문에 반응형 웹을 제작할 때 반드시 필요한 기술 이미지의 원본 크기보다 브라우저의 CSS로 인해 커져버리면 화질이 많이 깨지기 때문에 그런점이 우려되면 max-width를 써서 그 이상 이미지가 커지지 않게 방지한다.
기본 문법
[only 또는 not] @media [미디어 유형][and또는 ,콤마] (조건문) {실행문}
only는 미디어쿼리를 지원하는 브라우저에서만 미디어 쿼리를 해석하게 해주는 키워드
IE 6,7,8에서는 미디어쿼리를 지원하지 않는다
not다음에 따라오는 기기를 부정하는 키워드
@media 미디어 쿼리문을 알리는 시작문
[미디어 유형] 은 생략가능 미디어 유형을 생략하면 기본값인 all이 지정된다.
and는 앞뒤 조건이 모두 사실일 때 뒤에 따라오는 것을 해석 ( 조건문의 논리연산자 )
,는 앞뒤 조건중 하나만 사실일경우 뒤에 따라오는 것을 해석 ( 조건문의 논리연산자 )
(조건문)은 조건문이 사실일때 뒤에 따라오는 것을 해석
{실행문}은 앞에 조건들이 다 사실일 경우 해당 css
미디어 유형의 종류
| 기기 | 설명 |
|---|---|
| all | 모든 장치 |
| 인쇄 장치 | |
| screen | 컴퓨터 화면 장치 또는 스마트 기기의 화면 |
| tv | 영상과 음성이 동시에 출력되는 장치 |
| projection | 프로젝터 장치 |
| handheld | 손에 들고 다니는 소형 장치 ( 사용하지 않는 것이 좋다. ) |
| speech | 음성 출력 장치 |
| aural | 음성 합성 장치 ( 화면을 읽어 소리로 출력해 주는 장치 ) |
| embossed | 점자 인쇄 장치 ( 화면을 읽어 종이에 점자를 찍어내는 장치 ) |
| tty | 디스플레이 기능이 제한된 장치 |
| braille | 점자 표시 장치 |
조건문 표
| 조건문 | 설명 | 조건값 | min/max 사용 여부 |
|---|---|---|---|
| width | 웹페이지의 가로 너빗값 | width 속성에서 사용할 수 있는 모든 속성 값 | 사용함 |
| height | 웹페이지의 세로 높잇값 | width 속성에서 사용할 수 있는 모든 속성 값 | 사용함 |
| device-width | 기기의 가로 너빗값 | width 속성에서 사용할 수 있는 모든 속성 값 | 사용함 |
| device-height | 기기의 세로 높잇값 | width 속성에서 사용할 수 있는 모든 속성 값 | 사용함 |
| orientation | 기기의 화면 방향 | portrait (세로) landscape (가로) | 사용 안함 |
| aspect-ratio | 화면 비율 | 브라우저 화면 비율 ( 1 ), 브라우저 종횡비 ( 16/9 ), 브라우저 해상도 (1280/720) | 사용함 |
| device-aspect-ratio | 단말기 브라우저의 화면 비율 | 기기화면 비율 ( 1 ), 기기 종횡비 ( 16/9 ), 기기 해상도 (640/320) | 사용함 |
| color | 기기의 비트 수 | 8 ( bit 단위 ) | 사용함 |
| color-index | 기기의 색상 수 | 128 ( 색상 수 단위 ) | 사용함 |
| monochrome | 기기가 흑백일 때 픽셀당 비트 수 | 1 ( bit 단위 ) | 사용함 |
| resolution | 기기의 해상력 | 300dpi/dpcm | 사용함 |
| scan | TV의 스캔 방식 | progressive/interlace | 사용함 |
| grid | 기기의 그리드/비트맵 | 0 ( 비트맵 방식 ) / 1 ( 그리드 방식 ) | 사용 안함 |
미디어 쿼리를 사용할 때 주의해야 할 사항
조건문 접두사인 min/max 를 사용할 때 min 접두사는 반드시 크기가 작은 순서대로 작성해야 하고, max 접두사를 사용할 때는 반드시 크기가 큰 순서대로 작성해야 함
min/max 접두사를 사용할 때 순서가 중요한 이유는 min은 최소 또는 그 이상이라는 뜻으로, 점차 커지는 것을 의미하고, 반대로 max는 최대 또는 그 이하라는 뜻으로, 점차 작아지는 것을 의미하기 때문에, min/max 접두사를 사용할 때는 순서를 반드시 지켜야 함
뷰 포트 ( Viewport )
뷰포트는 화면에 보이는 영역을 제어하는 기술로 미디어 쿼리로 수많은 기기의 화면 크기를 감지해야 할 때 꼭 필요하다. 데스크탑은 사용자가 지정한 해상도가 보이는 영역이 되지만, 스마트 기기는 기본 설정값이 보이는 영역으로 설정되기 때문에, 미디어 쿼리를 사용해도 스마트 기기의 실제 화면크기를 감지하기 못하기 때문에 반응형 웹 제작시 반드시 필요한 기술
뷰포트 속성
| 속성명 | 속성값 | 속성 설명 |
|---|---|---|
| width | device-width 양수 | 뷰포트의 너비를 지정합니다. |
| height | device-height 양수 | 뷰포트의 높이를 지정합니다. |
| inital-scale | 양수 | 뷰포트의 초기 배율을 지정합니다. 기본값은 1입니다. 1보다 작은 값을 사용하면 축소된 페이지를 표시 하고, 1보다 큰 값을 사용하면 확대된 페이지를 표시합니다. |
| user-scalable | yes no | 뷰포트의 확대 / 축소 여부를 지정합니다. 기본값은 yes입니다. 반대로 no 설정하면 사용자가 페이지를 확대 할 수 없습니다. |
| minimum-scale | 양수 | 뷰포트의 최소 축소 비율을 지정합니다. 기본값은 0.25 입니다. |
| maximum-scale | 양수 | 뷰포트의 최대 확대 비율을 지정합니다. 기본값은 5.0입니다. |
뷰 포트 영역 확인하기
뷰포트 영역을 확인하는 방법에는 크롬 브라우저의 개발자 도구를 사용해서 확인하는 방법과 뷰포트의 영역을 확인할 목적으로 개발된 웹사이트에 접속해서 확인하는 방법이 있다. 각각의 방식은 테스트하고자 하는 기기에 따라 선택의 길이 달라진다. 데스크탑의 경우에는 크롬 브라우저의 개발자 도구를 사용하면 된다. 스마트 기기는 뷰포트의 영역 확인 사이트를 이용해야 한다.
https://whatismyviewport.com/ - 뷰포트 확인 사이트
