[나혼웹] 반응형 만들기

@media

다양한 미디어 유형이나 장치에 따라, 서로 다른 스타일 규칙을 적용

@media 미디어타입 and (미디어 특성) {
CSS 코드
}

@media screen and (max-width: 1200px) {
  body {
   color: red;
   }
}

미디어 타입

• all : 모든 미디어 타입에 적용
• screen : 컴퓨터 화면, 타플렛, 스마트폰
• print : 인쇄 적용

미디어 특성

• width : 뷰포트 가로 너비
• max-width: 뷰포트 최대 가로 너비(이하)
• min-width: 뷰포트 최소 가로 너비(이상)
• height: 뷰포트 세로 너비
• max-height: 뷰포트 최대 세로 너비(이하)
• min-height: 뷰포트 최대 세로 너비(이상)
• orientation :세로가 더 길어질 때 portrait/ 가로 (landscape)

우선순위가 있다 클래스 태그에
사소한 것들로 안바뀔 수 있다.

다중 선택자

가독성을 위해서 , 위해서 , 이후에 줄바꿈 해주기