홍강zone

화면사이즈가 800px보다 작을때 @media(max-width:800px) 아이디값이 grid인 태그의 display가 grid였던것이 block로 바뀌게 한다. ol태그의 border-right태그를 사라지게 만든다. h1태그의 border-bottom태그를 사라지게 만든다. @media(max-width:800px){ #grid{ display:block; } ol{ border-right:none; } h1 { border-bottom:none; } } WEB HTML CSS JavaScript CSS 마크업 언어(ex: HTML)가 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리처럼 꾸미는 역할을 담당한다고 할 수 있다. 즉, HTML 구조는 그대로 두고 CSS 파일만 변경해도 전혀 다른 웹..

화면의 크기에 따라서 웹페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌게 하는것을 반응형 웹, 반응형 디자인이라고 한다. 화면의 크기에 따라서 보였다 안보였다 하기위해 div태그를 만들어주고 style로 속성을 정해주고 개발자모드를 띄워주면 화면의 크기가 표현된다. 화면의 크기가 800px보다 크다면 display:none; 으로 하고싶다 그렇다면 화면의 크기가 최소한 800px이다 @media(min-width:800px) min=최솟값 width=폭 max=최댓값 Responsive