demun(대문블로그)

퍼블리셔/도구2014. 3. 26. 07:00

반응형으로 검색을 하다가 좋은 프레임웍이 있어 소개합니다. 바로 320 and Up 입니다. 장점은 뭐냐? 1. 미디어쿼리: 480,600,768,992,1382 등에 맞쳐 미디어쿼리를 만들어놓았습니다. 2. 컬러, texture, 타이포그래피 등을 레이아웃과 분리하여 작성하여 두었습니다. 3. 부트스트랩의 버튼, 폼, 테이블 스타일을 사용할 수 있습니다. 4. Modernizr, Selectivizr 과 responsive type tester 그리고 design tester 등을 사용할수 있도록 했습니다. 5. Less 와 Sass 를 사용할 수 있습니다. 다운로드해서 index.html 을 보면 HTML5 Boilerplate 를 사용한것을 볼 수 있습니다. 그리드 시스템은 frameless 를 사..

퍼블리셔/기술2012. 12. 12. 09:00

표준웹브라우져는 media queries 를 지원하기 때문에 따로 추가적인 방법을 사용하지 않아도 됩니다. 하지만 ie는 media queries 를 지원하지 않기 때문에 자바스크립트를 추가해줘야 합니다. 자바스크립트를 사용해서 윈도우의 너비를 안다거나, 기타 기술에 대한것은 여기서는 다루지 않고 단순이 ie가 미디어쿼리를 인식하는 방법만 이야기 하겟습니다. 미디어쿼리를 지원하는 자바스크립트는 유명한것이 두가지가 있습니다.바로 respond.js 와 css3-mediaqueries.js 입니다.자세한 정보와 다운로드 받을수 있는 주소는 아래와 같습니다. repond.js => https://github.com/scottjehl/Respond/downloadscss3-mediaqueries.js => ht..

퍼블리셔/기술2012. 6. 6. 06:00

html5에서 많은 촛점을 받고 있는것이 미디어쿼리(Media Queries) 입니다. 간단이 말해 기기의 해상도에 따라 보여지는것을 제어할 수 있는 기능입니다. 현재는 스마트폰, 테블릿, 컴퓨터등 보여지는 기기가 다양하고 보여지는 해상도 또한 다양합니다. 이러한 환경에 맞쳐 대응하도록 만든것이 미디어쿼리입니다. 드림위버를 사용하면 간단이 미디어쿼리를 작성할 수 있고, 미리보기 또한 할 수 있습니다. 어떤 화면인지 한번 보겠습니다. 이전에는 드림위버를 업데이트해서 html5로 마크업된 간단한 문서를 만들어 보았습니다. 그럼 이제 드림위버 상단에 멀티스크린을 클릭합니다. 참고로 현재 문서가 저장되어 있어야 합니다. 저장하지 않은 문서라면 적당이 이름을 부여해서 저장한후 멀티스크린을 클릭하세요. 아래 이미지..