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

반응형 달력(캘린더) 소스포함 Responsive Calendar반응형 달력(캘린더) 소스포함 Responsive Calendar 웹개발을 하다보면 달력이 필요할때가 종종있고 최근에 반응형 웹으로 개발하는 경우에 반응형 캘린더를 작업해야할 경우가 발생하게 된다. 여러곳을 소스등을 짜집기 하여 만들어 보았다. 웹브라우저 풀 화면에서의 캘린더 이미지 캡쳐 반응형 테스트를 위한 사이즈 조절후 화면 캡쳐 소스보기 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889..

반응형 웹 미디어쿼리반응형 웹 미디어쿼리 미디어 쿼리(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..

반응형 웹 무엇인가? 장점 및 만들기반응형 웹 무엇인가? 장점 및 만들기 반응형 웹이란? 최근에 반응형 웹이란 이야기들을 많이들 한다. 기존에 홈페이지가 있든 새롭게 홈페이지를 만들게 되든 시대에 맞게 홈페이지를 만들어야 한다는 생각을 가지게 되므로 주목받게 되는 웹기술이다. 뭐 특별한건 없다 반응형 웹(Responsive Web) 단어의 뜻에서도 알 수 있듯이 웹이 반응한다는 이야기인데 무었에 반응 을 할까? 바로 브라우저의 창 크기에 반응한다는 말이다. 그럼 이게 왜 필요할까? 2007년 이후 스마트폰 모바일 기기가 세상에 선을 보이면서 모바일의 특성상 화면 사이즈가 PC 와는 다르므로 웹페이지 접속시 화면 사이즈가 모바일 크기로 축서되어 보인다는 점이다. 그래서 등장한 것이 바로 반응형웹이다. 모바..

미디어쿼리 스크린 사이즈 미디어쿼리 스크린 사이즈 예시1 @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* Tablets, iPads (portrait and landscape) ----------- */ @media ..