<meta name="viewport" content="width=device-width, initial-scale=1">
meta viewport 설정시 기본적으로 반응형 웹페이지로 설정된다!
width=device-width : 화면의 넓이를 디바이스의 넓이로 지정
initial-scale=1: 기본 사이즈를 1로 지정
디바이스별 해상도 분기점
css에 미디어 쿼리 @media 규칙을 추가해 각 크기에 맞춰서 스타일을 지정할 수 있다.
/* 기본 문법 */
@media only all and (조건문) {실행문}
/* PC , 테블릿 가로 (해상도 768px ~ 1023px)*/
@media all and (min-width:768px) and (max-width:1023px) { /*스타일입력*/}
/* 테블릿 세로 (해상도 768px ~ 1023px)*/
@media all and (min-width:768px) and (max-width:1023px) { /*스타일입력*/}
/* 모바일 가로, 테블릿 세로 (해상도 480px ~ 767px)*/
@media all and (min-width:480px) and (max-width:767px) { /*스타일입력*/}
/* 모바일 가로, 테블릿 세로 (해상도 ~ 479px)*/
@media all and (max-width:479px) { /*스타일입력*/}
only의 경우 생략 가능.
all의 경우 screen, print와 같은 특정 미디어를 구체적으로 언급할 수도 있다!