CSS(Cascading Style Sheets) 미디어 쿼리 써먹기 다시 2.html로 돌아와 미디어 쿼리를 예제에 적용해보자. 코딩을 시작해보자. 화면의 크기가 작아지면 너무 낭비적인 요소가 있고 이상해진다. 특히 아래와 같이 본문이 좁아져 내용을 읽기 불편해진다. 본문을 아래에 배치시키고 제목을 좀 작게 개편해보자. 800픽셀보다 작아질 때 화면이 좀 이상해지는 듯하다. screen width < 800px 즉 @media(max-width:800px){ } 화면의 크기가 800픽셀보다 작을때 본문을 아래로 내리려고 한다. 그렇다면 id값이 grid인 부분을 grid가 아니게 하면 된다. 즉 id값이 grid인 태그의 display가 grid에서 block으로 바꿔준다. @media(max-widt..

CSS(Cascading Style Sheets) 현대적인 웹 애플리케이션을 만드는 데 있어서 굉장히 중요한 요소라고 할 수 있는 반응형 디자인이라고 하는 흐름을 알아보자. 웹은 거의 모든 정보 시스템 운영 체제와 상관없이 PC건 스마트폰이건, 또 가상현실이건 간에 모든 시스템에서 동작하는 정보 시스템이다. 이 말인즉은 수많은 형태의 화면에서 동작해야 된다는 것이다. 이렇다보니까 웹을 만드는 사람들은 그 여러 가지 화면에 대응되는 웹페이지를 만들기 위해서 몸부림을 쳤다. 이러한 사람들의 헌신 끝에 나온 것이 반응형 디자인이다. 화면의 크기에 따라 웹페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌게 하는 것, 이것을 반응형 웹 또는 반응형 디자인, 영어로는 Responsive Web이라고 부른다. 이..