WEB2 CSS- 반응형 디자인과 미디어 쿼리

반응형 디자인과 미디어 쿼리에 대해서 배웠다.

 

반응형 디자인

pc이던 모바일이던 간에 화면에 크기에 따라서 웹페이지의 각 요소들이 반응해서 동작하게 디자인하는것을 말한다.

 

미디어 쿼리

반응형 웹 디자인을 구현할때 사용하는 CSS문법

 

 

아래 캡처는 미디어 쿼리로 반응형 디자인을 실습한 코드이다.

 

• @media(max-width:1000px) : 미디어 쿼리를 사용하려면 이렇게 @media를 써준후 화면 크기를 지정해주면 된다.여기서 화면 크기 조건을 만족하면 디자인의 변화를 주기 위해 max-width:1000px을 써주었는데 이는 화면 최대값이 1000px로 지정된건데 화면 크기가 1000px 아래부터 디자인의 변화가 생기게 된다. 그 후 중괄호안에 화면 크기가 작아졌을때 바꾸고자하는 디자인 요소를 써주면 된다.

이제 미디어 쿼리 안에 있는 코드들을 살펴보면 다음과 같다.

• #grid{ display: block;} : 화면 크기가 1000px 미만으로 되었을때 웹페이지의 목록과 본문이 나란히 레이아웃 되게 디자인된것을 본문이 화면 전체로 이동 되게 되면서 목록 아래로 위치하게 하는 것이다.
• ol{ border-right:none; : 웹페이지 목록 부분의 오른쪽 테두리 선을 없애는 것이다.
• h1{ border-bottom:none; : 웹페이지 제목 부분의 아래 테두리 선을 없애는 것이다.

 

화면이 위 캡처와 같이 화면 크기가 1000px이상일때는 목록과 본문이 나란히 레이아웃 디자인으로 표현 되는데

 

 

화면 크기가 1000px 미만으로 작아지면 제목 아래 테두리 선과 목록 오른쪽 테두리 선이 없어지고

본문도 목록 아래에 전체화면에 가득차게 표현이 된다.