TIL43. html & css(3)

반응형 웹

• 하나의 웹사이트 에서 pc, 스마트폰, 태블릿pc등 접속하는 종류에 따라 화면의 크기가 자동으로 변하는 웹페이지

Media Query

• 반응형 웹을 구현하는 css 기술이다.
• @media 라는 문법으로 작성

@media only screen and (max-width: 480px) {
	body {
		font-size: 12px;
	}
}

480px보다 작은 화면에서 body태그 내의 폰트 사이즈를 12px로 조절

• @media : 이 키워드는 media 쿼리를 시작하겠다는 의미입니다.
• only screen : 어떤 디바이스에서 적용하는지 알려줍니다. 예를 들면 프린트를 하고싶을 때 적용하려면 only print라고 작성하면 됩니다. screen이라고 할 경우 어떤 디바이스에 상관없이, 화면에 보이는 스크린이기만 하면 전부 적용됩니다.
• and (max-width : 480px : 이건 media feature라고 불리는 부분입니다. 어느 조건에 아래의 css를 적용할지 작성해줘야 합니다.