검색결과 리스트
2012/12/09에 해당되는 글 2건
- 2012.12.09 inline-block 요소에 관한 고찰
- 2012.12.09 웹 표준, 웹 접근성, 크로스 브라우징,에 대한 바른 의미 1
글
비록 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>
-------------
그러나 필자라면..그냥 다 붙여서 쓰고만다.
'html 이야기' 카테고리의 다른 글
익스플로러에서만 이미지 엑스박스가 뜰 때 (0) | 2013.01.06 |
---|---|
내 홈페이지, 파비콘 적용하기 (0) | 2012.12.18 |
HTML 렌더링 순서에 따른 <script> 태그 사용 권장사항 (2) | 2012.11.19 |
블록 요소 vs 인라인 요소 (4) | 2012.11.11 |
HEAD> META 태그 총정리 (1) | 2012.11.10 |
설정
트랙백
댓글
글
웹 퍼블리싱 분야에서 업무를 하다 보면
웹에 관련해 생겨난 몇가지 용어에 대해 혼동이 올때가 있다.
바로, '웹 표준, 웹 접근성', '크로스 브라우징' 등이다.
이 세 단어는 매우 밀접한 연관에 겹치는 부분도 있고, 잘못 사용되는 경우도 많다.
이들 용어의 간략한 정의를 살펴보면 아래와 같다.
-크로스 브라우징 : 한개의 브라우저가 아닌 여러 브라우저에서 동등한정보를 보여주는 것.
-웹 표준 : W3C 등의 표준화 기구에서 정의 해준 명세에 맞게 마크업 하는 것.
-웹 접근성 : 이용자, 이용자의 장비에 관계없이 이용할 수 있는 웹 사이트를 구성하는 것.
(시각장애인 등도 이용 할 수 있으며, 여러 PC나 장비에서도 접근 할 수 있는 웹 사이트.)
약간의 설명을 붙이자면 이렇다.
일반적으로 웹 표준은 크로스 브라우징의 상위 단계이고, 웹 접근성은 웹 표준의 상위 단계이지만,
웹 표준을 맞춘다고 해서 크로스 크라우징이 해결되는 것은 아니며, 웹 접근성은 지켰지만
웹 표준과 크로스 브라우징이 해결되는 것은 아니다.
-크로스 브라우징에서는 브라우저 마다 있는 버그나 상이한 렌더링을 해결해야 하기 때문이다.
또 크로스 브라우징은 되었지만 표준에 맞지 않을 수도 있다.
-웹 접근성에 맞게 사이트를 구성했지만 W3C의 명세에 맞지 않는 코드가 존재 할 수 있다.
이 세 가지 사항 모두 올바른 웹 페이지를 구성 하는데 있어 상당히 중요하고, 이 모두를 충족시키는 일은
그만큼 어려운 일이기도 하다. 대부분의 웹 사이트가 이 셋중 어느 한두가지, 또는 모두를 빠뜨리는 경우가 허다하다.
하지만 사명감을 가지고 있하는 프로 웹 개발자라면 이제 이 모두를 고려하여 웹 사이트를 구성 하도록 노력해야 할것이다.
'웹표준 이야기' 카테고리의 다른 글
'웹 표준'에 관한 오해 (0) | 2012.12.22 |
---|---|
2012년 국내 웹 브라우저 점유율 (0) | 2012.11.08 |
RECENT COMMENT