Coding Story

비록 IE 6,7의 득세(?)로 인하여 display:inline-block을 사용 할 일은 많지 않지만,

native style이 인라인 블럭인 요소를 다루며 겪었을 몇가지 이슈를 소개하고자 한다.

(img, input 등이 있다.)

인라인 블럭 요소라 하면,

글자 그대로, 인라인 요소의 특성과 블럭 요소의 특성을 합쳐 놓은 요소라 할 수 있다.

다시말해서,

블럭 요소의 '면적 가질수 있는 것과 마진 패딩 등의 특성'과

인라인 요소의 줄바꿈 되지 않고 텍스트 처럼 취급 특성 (엄밀히 말하면 텍스트도 인라인이다. 요소가 아닐뿐..)

을 가진 요소가 인라인-블럭 요소라고 볼 수 있다.

근데 이 인라인 블럭을 다루다 보면 겪는 문제가 있다.

위 네모 박스들은  50X50의 인라인 블럭(span) 요소들이다.

분명히 마진, 패딩에 0을 주었는데 위와 같이 간격이 벌어진다.

무슨 짓을 해도 소용 없다.

우연히 부모 요소에 font-size:0을 주니 붙는다. 왜 이러한 현상이 발생할까?

십중 팔구 다음과 같이 마크업 되어 있을 것이다.

--------------------

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

-----------------

그렇다! 저 공백은 '엔터 한칸' 때문에 발생하는, inline-block은 텍스트 이기 때문에, 스페이스를 무시하지 못해서

발생하는 문제인 것이다. 스페이스 한칸은 font-size에 비례해서 나타나기 때문에,

font-size가 0이라면 스페이스도 0 처리되어 공백이 사라졌던 것이다.

여러가지 해결 방법이 있겠지만, 굳이 들여쓰기를 해야한다면 다음과 같이 코딩 하는 방법도 있다.

-------------

<span></span

><span></span

><span></span

><span></span

><span></span

><span></span> 

-------------

그러나 필자라면..그냥 다 붙여서 쓰고만다.

웹 퍼블리싱 분야에서 업무를 하다 보면

웹에 관련해 생겨난 몇가지 용어에 대해 혼동이 올때가 있다.

바로, '웹 표준, 웹 접근성', '크로스 브라우징' 등이다.

이 세 단어는 매우 밀접한 연관에 겹치는 부분도 있고, 잘못 사용되는 경우도 많다.

이들 용어의 간략한 정의를 살펴보면 아래와 같다.

-크로스 브라우징 : 한개의 브라우저가 아닌 여러 브라우저에서 동등한정보를 보여주는 것.

-웹 표준 : W3C 등의 표준화 기구에서 정의 해준 명세에 맞게 마크업 하는 것.

-웹 접근성 : 이용자, 이용자의 장비에 관계없이 이용할 수 있는 웹 사이트를 구성하는 것.

(시각장애인 등도 이용 할 수 있으며, 여러 PC나 장비에서도 접근 할 수 있는 웹 사이트.)

약간의 설명을 붙이자면 이렇다.

일반적으로 웹 표준은 크로스 브라우징의 상위 단계이고, 웹 접근성은 웹 표준의 상위 단계이지만,

웹 표준을 맞춘다고 해서 크로스 크라우징이 해결되는 것은 아니며, 웹 접근성은 지켰지만

웹 표준과 크로스 브라우징이 해결되는 것은 아니다.

-크로스 브라우징에서는 브라우저 마다 있는 버그나 상이한 렌더링을 해결해야 하기 때문이다.

또 크로스 브라우징은 되었지만 표준에 맞지 않을 수도 있다.

-웹 접근성에 맞게 사이트를 구성했지만 W3C의 명세에 맞지 않는 코드가 존재 할 수 있다.

이 세 가지 사항 모두 올바른 웹 페이지를 구성 하는데 있어 상당히 중요하고, 이 모두를 충족시키는 일은

그만큼 어려운 일이기도 하다.  대부분의 웹 사이트가 이 셋중 어느 한두가지, 또는 모두를 빠뜨리는 경우가 허다하다.

하지만 사명감을 가지고 있하는 프로 웹 개발자라면 이제 이 모두를 고려하여 웹 사이트를 구성 하도록 노력해야 할것이다.