CSS - design (반응형 웹)

반응형 웹디자인이란 해상도에 맞게 변하는 웹 만드는 법

만드는 이유: 장치 폭 또는 브라우저 해상도가 다르기 때문에 출력에 대한 이상현상 발생하므로 스마트기기의 화면에 맞게 내용이 출력되도록 설정

meta 태그의 name 속성값으로 viewport 설정 content 속성값으로 장치에 대한 폭과 확대(축소) 설정

<meta name="viewport" content="width=device-width">

반응형 웹디자인 구현을 위해 유동성 구조로 박스모델 설정 => 크기 단위를 px 대신 % 또는 em 사용

예시
선택자 {
	width: 80%;
	margin: 0 auto;
}
선택자 {
	width: 100%;
	margin-top: 150px;
}

@media : 장치 또는 해상도에 따라 다른 CSS 스타일을 적용하기 위한 시스템 속성
- Media Query 형식) @media 장치 [and 조건][and 조건] ... { CSS 스타일 } 장치 : all, screen, print, tv, aural, braille 등

@media screen and (max-width:360px) {
	body {
		background: orange;	
	}
}
@media screen and (min-width:361px) and (max-width:768px) {
	body {
		background: yellow;	
	}
}
@media screen and (min-width:769px) and (max-width:1024px) {
	body {
		background: olive;	
	}
}