반응형 웹

1. 미디어쿼리 @media

pc, 태블릿, 모바일 등 기기의 화면 크기에 맞게 웹사이트를 만들 수 있다.

• 반응형 : 크기 변화를 줬을 때 자연스럽게 변화하는 사이트
• 적응형 : 크기 범위별로 단계적으로 변화하는 사이트

 

1. 미디어 쿼리 : @media (min-width : 320px ) and (max-width : 800px ){   css   }

브라우저의 가로폭을 설정하는 기능 외에 없다.

미디어쿼리를 셀렉터로 주고 css를 주면 설정한 가로폭에 해당하는 화면일 때 적용한 css가 적용된다.

미디어 쿼리에 작성하지 않은 속성들은 @media 밖에서 작성한 코드를 상속받아서 적용된다.

 

2. 미디어 쿼리가 정상적으로 출력되는지 확인하는법

1. 크롬

개발자도구에서 Elements왼쪽

2. Troy Labs - 다음.

서버에 등록되어 있고 고유의 도메인을 갖고 있을때 사용가능.

 

---

2. 미디어쿼리 사용 주의사항

 

1. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 반드시 넣어야 미디어 쿼리가 적용된다.

name = "viewport" : 기기의 화면 영역을 의미한다.

• viewport : 다양한 디지털 기기의 화면 상에 표시되는 영역을 의미하며, 너비와 배율을 설정할 때 사용하는 메타 태그의 속성 중 하나이다.

content="width=device-width, initial-scale=1.0" : viewport의 가로폭을 width로 주고, 초기 비율을 1.0으로 준다.

 

2. css 속성 상속

미디어쿼리 안에 작성하지 않은 속성은 미디어쿼리 외부의 css를 상속받는다.

상속받고 싶지 않다면 속성값에 none값을 줘야 한다.