세연아빠의 개발과 일상의 모습

반응형 웹 미디어쿼리반응형 웹 미디어쿼리 미디어 쿼리(Media Queries)는 새로운 기술이 아니다. 이미 오래전에 미디어 타입 이라는 이름으로 선을 보인적이 있다. 미디어 타입은 미디어 종류만 감지하기때문에 세부적인 사항은 감지할 수 없었다. css3 가 등장하면서 미디어 타입이 미디어 쿼리라고 바뀌면서 기기 의 종류뿐 아니라 해상도, 비트수, 가로, 세로 여부등 세세한 부분까지 감지할 수 있는 기술이 탑재 되었다. 3 미디어 쿼리의 기본문법 [only 또는 not] @media [미디어유형] [and 또는 ,콤마] [조건문] {실행문} and 는 앞뒤 조건이 모두 사실일때 뒤에 따라오는 것을 해석하라는 의미입니다. ,콤마는 앞뒤 조건 중 하나만 사실이어도 뒤에 따라오는 것을 해석하라는 의미입니다...

반응형 웹 만들기반응형 웹 만들기 반응형 웹에 대한 1차 포스팅에서 반응형 웹이란 어떤것이며 무엇을 위해 만들어 졌는지에 대하여 알아보았다. 그럼 이번시간에는 반응형 웹은 어떻기술들로 만들어 지는지에 대하여 알아보는 시간을 가져보자 크게 반응형 웹을 만드는 기술은 3가지로 분류할 수있다. 1 가변그리드 가변그리드란 웹화면 구현에 있어 px(픽셀) 단위대신 %(비율, 가변)으로 처리하는것을 말한다. 만일 고정된 px 로 화면에 사이즈를 정한 다면. 모바일 화면에서는 화면이 작게 보여질 수 밖에 없고, 이런 문제를 비율로 보여지도록 처리하여 적당한 사이즈로 처리되도록 한다. 1234567891011#wrap {/* width:960px; */ width: 90%;height:500px;margin:0 aut..