meta태그의 viewport에 사용되는 속성 중 shrink-to-fit에 대하여 알아봅니다. 반응형웹 구현에 필요한 viewport 설정시 추가되는 속성으로 아래처럼 사용됩니다.<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">! Apple Developer 페이지의 Safari 9.0 업데이트 내용ttps://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_9_0.html#//apple_ref/doc/uid/TP40014305-CH9-SW36내용을 보면 아이폰의 모바일 환경에서 웹페이지가 튀는 것을 방지해줍니다. iPhone 환경을 위해서 추가해 주는 것이 좋습니다.
2017-08-03 10:53:24반응형웹은 이제 모든 웹페이지의 필수가 되어버린 것 같다... 최근 접하는 프로젝트의 거의 모든 웹페이지에서 사용되고 있기 때문이다. 부트스트랩이나 기타 반응형웹을 쉽게 구현 가능하도록 돕는 라이브러리등을 사용한다면 크게 고민하지 않을 수도 있지만 필자는 항상 어떻게 레이아웃을 잡을 것인지부터 매우 많은 부분들에 고민들이 함께하고 있다.! 고정 영역을 함께 가지는 반응형웹반응형웹은 어떤 요소가 가변 길이를 가지기 위해 css에서 길이를 정하는 경우 고정된 단위인 px, pt가 아닌 em, pecent(%)를 사용하게 된다. 물론 스크립트 언어를 사용해 항상 변하는 코드를 사용하기도 하지만 스크립트의 사용은 최대한 줄이면서 즉시 반응하는 웹페이지가 더 쉽고 유지보수에도 좋을 것이다.두 개 또는 그 이상의 컬럼들이 하나의 row안에 존재하고 이들이 브라우저의 크기에 반응한다고 생각해보자. 각각의 컬럼들이 예를들어 각각 50%, 50%라면 width에 이 값을 설정하여 쉽게 코드 작성이
2016-08-05 18:47:42최근 웹사이트를 구축할 때 반응형 웹사이트를 많이 볼 수 있습니다. 반응형웹 사이트가 왜 유용한지 굳이 말할 필요가 없겠지만 한줄로 요약하면 ..."내 디바이스가 무엇이든 최적화된 UI / UX를 주렴!!"이라고 할 수 있다... 어쨌든 퍼블리셔의 기본 소양이 된 반응형 웹 구축에 대해 간단하고 짧지만 굵직한 한 글을 적어보고자 한다.반응형웹 (Responsove Web)은 다양한 디바이스... 데스크탑, 노트북, 모바일 등에서 브라우저의 크기에 즉각적으로 변화하여 최적화된 인터페이스를 제공해야한다.이를 구현하기 위해서는 html은 물론이고 css와 자바스크립트(제이쿼리)등을 활용하여야 한다... 그렇다고 너무 걱정할 필요는 없다. 반응형웹이 어려울 수도 있지만 웹이 복잡하냐 간단함하냐의 차이일 뿐 간단한 웹은 간단하게 반응형이 가능하기 때문이다.!! 반응형웹 구축에 꼭 알아야 할 내용아래 사항들은 필수적이거나 알면 매우 유용한 내용들을 정리한 부분이다. 대부분 간단하지만 쉽게 간과
2016-03-15 23:50:09안녕하세요~ 퇴근 후 집에 가는 길... 날씨가 너무 춥군요;; 내일은 서울이 영하 16도까지 내려간다는데;; 얼마나 추울지 벌써부터 걱정이되는군요... 오늘은 반응형 웹사이트를 쉽게 만드는 방법에 대하여 알아보려고합니다~ # 반응형 웹사이트(Responsive Web)란반응형 웹사이트를 모르시는분을 위해 간단하게 적어보겠습니다. 사용자가 사용하는 환경은 모두 다를 것이며 모니터의 크기와 이에따른 해상도 역시 다를 것입니다. 또한 브라우저의 크기를 조절할 경우 나타나는 화면의 크기 역시 다른데 이런 다양한 사용자 환경에 즉시 반응할 수 있는... 가장 최적화된 화면을 제공하는 것이 바로 반응형웹이라고 하겠습니다. 사용자 경험을 제공하니 이 역시 UX에 해당한다고 볼 수 있을 것입니다.! 모바일웹과 반응형웹의 차이점은?일반적으로 여러 디바이스에 대응하기 위한 방법으로 반응형웹 또는 모바일웹을 구축하게 됩니다. 반응형웹과 모바일웹은 엄격히 구분되는데 모바일의 경우 모바일 환경인 스마트폰
2016-01-18 21:49:59
