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

모바일 기기에서 웹페이지를 이용할 때 input text라던가 password 같은 입력 필드를 터치하면 화면이 일정 배율로 확대되는 효과가 나타납니다.

이 확대되는 효과를 없애고 포커스만 가도록 하는 방법은 viewport 메타 태그에 있습니다. 방법은 아주 단순한데 viewport 메타 태그에 user-scalable=no 속성을 추가해주시면 됩니다.

이 내용으로 끝나면 허전하니 추가로 제가 모바일 웹을 구현할때 고정적으로 사용하는 viewport 속성을 공유해드립니다. 특별한 요구사항이 없는 한 아래 viewport 속성으로 고정하여 사용하고 있습니다.

 

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

흔히 버튼을 클릭하여 스크롤을 부드럽게 이동시키는 효과는 animate를 이용하여 scrollTop 속성을 변화시킵니다.

이때 IE에서는 코드가 동작하지 않는 경우가 있습니다. 아래 코드는 IE에서 동작하지 않습니다.

scrollTop 속성에 0을 부여해 문서를 최상단으로 이동시키는 스크립트 입니다. 크롬이나 파이어폭스에서는 동작하지만 IE에서는 동작하지 않습니다.

 

그렇다면 이 코드를 동작하도록 수정해보겠습니다.

크게 바뀐 부분은 없습니다. 셀렉터 부분이 “html body”에서 “html, body”로 변경된 것 뿐입니다. IE에서는 “html body” 셀렉터를 인식하지 못하는 문제를 가지고 있는 것으로 보입니다. 더 정확하게는 body 셀렉터를 인식하지 못합니다. 반대로 크롬에서는 html 셀렉터를 지정하지 못합니다.

따라서 html안에 body를 뜻하는 “html body”가 아닌 html과 body를 뜻하는 “html, body”로 셀렉터를 지정해주셔야 대부분의 브라우저를 커버할 수 있습니다.

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

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

자동으로 생성되는 통화 링크를 생성되지 않도록 하려면 아래 메타 태그를 넣어주시면 됩니다.

 

그리고 원하는 부분에 통화 링크를 수동으로 설정하고 싶다면 아래와 같이 a 링크를 걸어주시면 됩니다.

tel 형식의 링크는 데스크탑 브라우저에서는 동작하지 않습니다. 다만 a(anchor) 태그이기 때문에 커서가 포인터(링크 커서)로 표시됩니다. 이 부분을 “cursor:text;” css 속성으로 일반 텍스트처럼 커서 효과를 줍니다.

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

옛날 우리는 Table을 이용해 레이아웃을 짜던 시절.. 거의 외우다 시피한 속성들이 있었죠. cellpadding, cellspacing, border..

일명 DIV 코딩이라 불리우는 div 레이아웃을 사용하는 이 시점에서도 Table을 레이아웃으로 사용하지 않는다 뿐이지 아직도 Table은 유용한 녀석입니다.

하지만 예전같이 Table 태그라인 안에 속성을 박아넣고 W3C 검증을 받으면 Warning 메세지를 볼 수 있습니다. 즉, 형태를 꾸며주는 태그 속성대신 css를 이용하는 것을 권장하는 겁니다.

이 것이 과거에 우리가 즐겨 사용하던 방법입니다. 거의 기계적으로 혹은 반사적으로 cellpadding과 cellspacing 그리고 border를 속성으로 지정해주곤 했습니다.

그럼 이걸 어떻게 css로 정의할 수 있을까요..

 

이런식으로 정의할 수 있겠습니다. 하지만 저렇게 style을 인라인으로 입력하는 경우는 드믈죠.

 

다시 정리해보겠습니다.

정리를 하면 이렇습니다. cellpadding은 td의 padding css 속성이, cellspacing은 table의 border-spacing css 속성이, border는 table의 border css 속성이 대신 역할을 하게 됩니다.

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

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

위 예제와 같이 button 태그에 type=”button” 이 정의되어 있냐 없냐에 따라 동작이 달라질 수 있습니다. 버튼 자체를 submit 용도로 사용한다면 문제가 안되지만 스크립트 동작을 원할 경우 type을 정의해주시면 되겠습니다.

그리고 추가로 type에는 submit, button, reset 이렇게 3가지 중에 정의할 수 있습니다. 물론 <input> 태그도 마찬가지 입니다.

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

테이블을 사용할땐 별다른 고민을 해보지 않았던 텍스트 세로 정렬입니다.

테이블을 사용할 당시에는 셀 안에 텍스트의 세로정렬은 큰 고민 없이 가능했습니다. 하지만 DIV안에 텍스트를 넣게 되는 경우 텍스트 새로 정렬에 대한 고민을 시작하게 됩니다.

가장 심플한 방법은 아래와 같습니다.

 

여기서 중요한 2가지는..

1. 텍스트를 감싸는 블록의 height 값이 명확해야 한다.

2. 부모 앨리먼트(div)의 css 속성을 display:table; 자식 앨리먼트(p)의 css 속성을 display:table-cell; 로 지정해주면 vertical-align 속성이 적용된다.

* IE7 이하 버전에서는 display:table, table-cell이 지원되지 않기 때문에 적용되지 않습니다.

 

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

IE 덕분에 작업 시간이 배로 늘어나는 느낌은 지울 수가 없습니다. 그것도 화면 퍼즐 맞추는 시간에 많은 시간을 소모하게 되는게 씁쓸합니다. IE7이 역사속으로 사라지기까지는 몇 년이 더 걸리겠지만 그 뒤엔 또 새로운 IE가 바통을 받아들겠지 ㅜ

IE7에는 많은 버그가 있지만 그 중에 z-index 버그와 해결방법을 소개합니다.

IE7은 이상하게도 position:relative 속성을 가지고 있는 엘리먼트는 z-index를 무참히 0으로 만들어 버립니다. 이 말은 곧 z-index가 먹히지 않는다는 말입니다.

크롬에서 작업을 마치고 IE로 테스트를 하는 순간 멘붕이 오는 요소 중 하나이기도 합니다

자, 여기서 우리는 IE7의 버그를 버그로 해결할 수 있습니다. 이열치열이 아닌 이버그치버그랄까..

뭐 이미지는 없어서 대충 코드로 설명합니다. 위 상황은 “아래 이미지가 날 가려버림 ㅜㅜ” 에 속한 div를 아래 “나는 이미지다” 녀석이 z-index를 무시하고 덮어버리는 상황입니다.

대표적으로 네비게시션 메뉴의 서브 메뉴가 나타나는 롤오버 메뉴를 메인 이미지가 먹어버리는 경우를 볼수 있습니다. 이 경우 부모 엘리먼트의 z-index를 자식보다 높게 주면 해결되는 IE7의 또다른 버그가 있습니다. 이 버그로 해결할 수 있습니다.

부모 div에 position:relative와 z-index를 주었습니다. 자식 엘리먼트의 z-index보다 높게 말이죠. 이런 방법을 쓰면 해결이 되는 이유는 저도 모릅니다.

버그니깐요.. –;

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

EditPlus 3.41 버전부터 추가되었던 Zen Coding 기능을 소개합니다. 기존 사용자들은 저처럼 기능이 추가 됐음에도 기존 자주 사용하던 기능 위주로만 툴을 사용해 에디터가 버전업이 되더라도 버그 픽스에 대한 부분만 체감할 수 있었는데요. (언제부터인가 새 기능에 둔감해진 자신의 모습을 보게 됩니다.)

옆 그림에서 보이듯이 Zen Coding 사용을 체크하면 html 코딩이 귀찮은 분들에게는 혁명이 일어납니다. 간단하게 설명하자면 일종의 매크로 기능입니다. 하지만 사용을 위해서는 명령 패턴을 익혀야 되겠죠. 하지만 명령들의 구조가 새로 공부를 해야 한다거나 복잡한 형태는 아니기에 기존 코딩을 하시던 분들은 약간의 이해만 하면 바로 사용하실 수 있습니다.

Zen Coding 명령과 HTML 출력 결과

Zen Coding

div[style=”color#000;”]>#wrapper>p.textBlock+ul#listBlock>li.list*5

HTML

<div style=”color#000;”>

<div id=”wrapper”>

<p class=”textBlock”></p>

<ul id=”listBlock”>

    <li class=”list”></li>

    <li class=”list”></li>

    <li class=”list”></li>

    <li class=”list”></li>

    <li class=”list”></li>

</ul>

</div>

</div>

표를 보시면 이해가 빠르실 겁니다. Zen Coding 명령 한 줄로 아래 HTML 코드가 생성 됩니다. 기본 구조는 앨리먼트#(아이디).(클래스)[attr=”속성”] 입니다. 앨리먼트 요소를 지정하지 않고 아이디나 클래스만 지정해주면 자동으로 <div>블록이 생성되면서 해당 아이디나 클래스 이름이 들어가게 됩니다. 표 내용 중 #wrapper 가 대표적인 예가 되겠습니다. 그리고 꺽쇠(>)는 하위 Depth, 더하기(+)는 동일 Depth를 의미합니다.

* Zen Coding 명령 입력 후, 명령줄에서 Ctrl + E를 하시면 HTML로 변환이 이루어 집니다.

이 기능이 주는 장점이라면 매번 HTML 코딩 시 열기 닫기를 반복하지 않아도 될 뿐만 아니라 단순 오타로 인한 코드 에러로부터 좀 더 자유로울 수 있다는 점입니다. 한마디로 귀차니스트를 위한 기능이라고 할 수 있습니다.

아웃룩 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 in unordered lists
  • no support for CSS positioning
  • no support for animated GIFs