[HTML] 모바일에서 입력 창에 포커스 가는 경우 확대되는 효과 없애기

모바일 기기에서 웹페이지를 이용할 때 input text라던가 password 같은 입력 필드를 터치하면 화면이 일정 배율로 확대되는 효과가 나타납니다. 이 확대되는 효과를 없애고 포커스만 가도록 하는 방법은 viewport 메타 태그에 있습니다. 방법은 아주 단순한데 viewport 메타 태그에 user-scalable=no 속성을 추가해주시면 됩니다. 이 내용으로 끝나면 허전하니 추가로 제가 모바일 웹을 구현할때 고정적으로 사용하는 viewport 속성을 공유해드립니다. 특별한 요구사항이Continue reading “[HTML] 모바일에서 입력 창에 포커스 가는 경우 확대되는 효과 없애기”

[jQuery] IE에서 scrollTop animate 효과 동작하지 않는 문제 해결 방법

흔히 버튼을 클릭하여 스크롤을 부드럽게 이동시키는 효과는 animate를 이용하여 scrollTop 속성을 변화시킵니다. 이때 IE에서는 코드가 동작하지 않는 경우가 있습니다. 아래 코드는 IE에서 동작하지 않습니다.

scrollTop 속성에 0을 부여해 문서를 최상단으로 이동시키는 스크립트 입니다. 크롬이나 파이어폭스에서는 동작하지만 IE에서는 동작하지 않습니다.   그렇다면 이 코드를 동작하도록 수정해보겠습니다.

크게 바뀐 부분은 없습니다. 셀렉터 부분이 “html body”에서Continue reading “[jQuery] IE에서 scrollTop animate 효과 동작하지 않는 문제 해결 방법”

[HTML] iOS 사파리에서 전화번호 링크 해제와 수동 설정법

모바일 기기에서 지원되는 사파리에서는 숫자로 이루어진 텍스트는 자동으로 전화번호를 걸 수 있도록 통화 링크를 생성해줍니다. 하지만 이 기능이 의도치 않게 우편번호, 주소 등에 통화 링크가 걸린다는 것이 문제입니다. 자동으로 생성되는 통화 링크를 생성되지 않도록 하려면 아래 메타 태그를 넣어주시면 됩니다.

  그리고 원하는 부분에 통화 링크를 수동으로 설정하고 싶다면 아래와 같이 a 링크를 걸어주시면Continue reading “[HTML] iOS 사파리에서 전화번호 링크 해제와 수동 설정법”

[CSS] Table의 cellpadding, cellspacing, border 속성 style로 정의하기

옛날 우리는 Table을 이용해 레이아웃을 짜던 시절.. 거의 외우다 시피한 속성들이 있었죠. cellpadding, cellspacing, border.. 일명 DIV 코딩이라 불리우는 div 레이아웃을 사용하는 이 시점에서도 Table을 레이아웃으로 사용하지 않는다 뿐이지 아직도 Table은 유용한 녀석입니다. 하지만 예전같이 Table 태그라인 안에 속성을 박아넣고 W3C 검증을 받으면 Warning 메세지를 볼 수 있습니다. 즉, 형태를 꾸며주는 태그 속성대신 css를 이용하는Continue reading “[CSS] Table의 cellpadding, cellspacing, border 속성 style로 정의하기”

[HTML] form 안에 존재하는 button 클릭시 submit 동작 방지

UI 작업을 할 때 보통 버튼은 <input type=”button” /> 또는 <button></button> 을 사용합니다. 여기서 기본적으로 <button> 요소 자체는 submit 속성을 가지고 있기 때문에 type 정의가 되어있지 않다면 submit 동작을 하게 됩니다.

위 예제와 같이 button 태그에 type=”button” 이 정의되어 있냐 없냐에 따라 동작이 달라질 수 있습니다. 버튼 자체를 submit 용도로 사용한다면 문제가 안되지만 스크립트Continue reading “[HTML] form 안에 존재하는 button 클릭시 submit 동작 방지”

[CSS] DIV 영역안에 텍스트 세로 중앙 정렬하는 방법

테이블을 사용할땐 별다른 고민을 해보지 않았던 텍스트 세로 정렬입니다. 테이블을 사용할 당시에는 셀 안에 텍스트의 세로정렬은 큰 고민 없이 가능했습니다. 하지만 DIV안에 텍스트를 넣게 되는 경우 텍스트 새로 정렬에 대한 고민을 시작하게 됩니다. 가장 심플한 방법은 아래와 같습니다.

  여기서 중요한 2가지는.. 1. 텍스트를 감싸는 블록의 height 값이 명확해야 한다. 2. 부모 앨리먼트(div)의 cssContinue reading “[CSS] DIV 영역안에 텍스트 세로 중앙 정렬하는 방법”

[CSS] IE7 z-index 적용이 되지 않는 버그

IE 덕분에 작업 시간이 배로 늘어나는 느낌은 지울 수가 없습니다. 그것도 화면 퍼즐 맞추는 시간에 많은 시간을 소모하게 되는게 씁쓸합니다. IE7이 역사속으로 사라지기까지는 몇 년이 더 걸리겠지만 그 뒤엔 또 새로운 IE가 바통을 받아들겠지 ㅜ IE7에는 많은 버그가 있지만 그 중에 z-index 버그와 해결방법을 소개합니다. IE7은 이상하게도 position:relative 속성을 가지고 있는 엘리먼트는 z-index를 무참히 0으로Continue reading “[CSS] IE7 z-index 적용이 되지 않는 버그”

에디트플러스 Zen Coding 사용방법

EditPlus 3.41 버전부터 추가되었던 Zen Coding 기능을 소개합니다. 기존 사용자들은 저처럼 기능이 추가 됐음에도 기존 자주 사용하던 기능 위주로만 툴을 사용해 에디터가 버전업이 되더라도 버그 픽스에 대한 부분만 체감할 수 있었는데요. (언제부터인가 새 기능에 둔감해진 자신의 모습을 보게 됩니다.) 옆 그림에서 보이듯이 Zen Coding 사용을 체크하면 html 코딩이 귀찮은 분들에게는 혁명이 일어납니다. 간단하게 설명하자면 일종의Continue reading “에디트플러스 Zen Coding 사용방법”

아웃룩 2007이후 버전에서 HTML, CSS 제약사항

아웃룩 2007 이후 버전에서는 일부 HTML과 CSS가 적용되지 않는 이슈가 있습니다. 웹메일은 정상적으로 표시되는데 아웃룩에서만 유독 표시가 잘 되지 않는다면 아래 사항을 체크해보세요. no support for background images (HTML or CSS) no support for forms no support for Flash, or other plugins no support for CSS floats no support for replacing bullets with images inContinue reading “아웃룩 2007이후 버전에서 HTML, CSS 제약사항”