반응형 웹이란?
반응형 웹이란, 다양한 디바이스에서 접속했을 때 기기의 viewport 규격에 반응하여 레이아웃이 자동으로 변경되는 웹페이지를 뜻한다.
미디어 쿼리
미디어 쿼리란 viewport 너비에 따라 웹사이트의 시트를 수정할 수 있게 해주는 CSS 의 기능이다. (viewport 너비 외에도 다른 것들을 기준으로 설정이 가능 하다.)
기본 형태@media screen and (max-width: 500px) {
/* 스크린의 너비가 500px 이하일 경우 적용시킬 스타일 시트를 적습니다. */
}
CSS
복사
•
@media : 미디어 쿼리를 사용한다
•
screen : 미디어 타입
•
max-width : 500px
viewport 너비가 500px 이하일 경우 해당 스타일시트 적용
•
and
◦
screen, max-width 등 여러가지 미디어 쿼리 조건을 연결 시킨다.
◦
모든 조건을 만족하는 경우에만 해당 스타일 시트 적용한다.
breakPoint (중단점)
반응형 웹페이지의 작업 기준이 되는 중단점을 의미한다.
일반적인 breakPoint 분기크기 | breakPoint | 크기 | breakPoint |
Mobile | 0 ~ 767px | Tablet | 768px ~ 1923px |
PC | 1024px ~ 1439px | PC Large | 1440px ~ |
반응형 웹에 자주 쓰이는 속성
max-width / max-height•
요소의 최대 크기를 지정하는 속성
•
max-width 를 사용하면 가로 규격을, max-height 를 사용하면 세로 규격을 한정할 수 있다.
max()•
소괄호 안에 입력된 값 중 제일 높은 값을 속성값으로 출력하는 함수이다.
•
소괄호 안에는 여러 개의 값을 콤마로 연결해 입력해줄 수 있다.
•
min()•
소괄호 안에 입력된 값 중 제일 낮은 값을 속성값으로 출력하는 함수이다.
•
소괄호 안에는 여러 개의 값을 콤마로 연결해 입력해줄 수 있다.