Semantic Markup #2

의미론적인 마크업을 위한 접근법 Ⅱ

지난 포스팅에서 언급하였듯이, HTML4의 프리젠테이션용 요소, b, hr, i, s, small, 그리고 u 요소들은 전형적인 용도에 관련되어 진다는 미디어 독립이라는 유용한 의미론과 함께 HTML5에서는 비 프리젠테이션용으로 재정의 되었습니다. 

이용 가치가 떨어지고 또 상실된 basefont, big, font, tt, 그리고 strike와 같은 다른 프리젠테이션용 요소들은 HTML5에서는 더 이상 쓸모없게 되어 사라졌습니다. 

대신 이 요소들과 같은 비주얼 효과를 보려면 CSS를 사용하도록 합니다.

a 요소로 구성된 블럭 레벨 링크

하이퍼링크는 HTML의 오리지널 킬러 앱(새로운 테크놀로지의 보급에 결정적 계기가 되는 어플리케이션)입니다. 

그러나, 역사적으로 보다 더 많은 텍스트 또는 또 다른 인라인 컨텐츠를 <a> 요소로 감싸서 링크시키는 일은 공식적으로 가능하지 않았고, 게다가 이러한 원칙은 접근성과 같은 문제로 대두되었습니다.  

마우스를 사용하는데 어려움이 있는 이들에게나 손가락을 대면 감응하는 폰으로 웹을 보는 이들에게는 클릭할 수 있는 넓은 영역이 큰 몫을 하기 때문입니다. 

또 이러한 접근성 문제는 <a>요소를 제외한 다른 요소에 적용된 :hover에 스타일을 줄 수 없는 인터넷 익스플로러 6에 의해 악화되기도 하였습니다. 

이에 대한 제2 해결책으로는 링크를 display:block 으로 만들거나, padding을 viewport에 맞게 가득 주거나, 또는 클릭할 수 있는 넓은 영역이라는 인상을 주게끔 각각의 요소에 개별적인 링크를 추가시키는 방법이 있습니다. 

게다가, 비록 명세에 따른 정확한 방법은 아니지만, 링크안에 모든 것을 다 넣어 감싸버리는 방법도 있습니다. 

HTML5의 실용적인 성향에 따라서, 이도 저도 아닌 이 애매한 기법은 이제는 명세의 일부분이 되었고 이제 공식적으로 흐름 컨텐츠(flow content)를 <a>요소로 감쌀 수 있게 되었습니다.

<a> 요소 안에 폼 요소나 다른 링크 항목과 같은 상호 반응형 컨텐츠만 포함하지 않으면 되는 것입니다. 

이것은 하기 쉬운 기법이지만 인터넷 익스플로러 8이하 버전에서 문제점을 야기시키기도 함으로, 링크 요소 안에 또 다른 링크를 중첩시키지 않도록 주의하여야 합니다.

<a> 요소안에 버튼이나 다른 링크 항목과 같은 상호 반응형 컨텐츠만 없다면, 이 <a>요소는 문단 요소, 목록 요소, 테이블 등등 이 전체 요소를 감쌀 수 있다.

클릭할 수 있는 넓은 영역이라는 인상을 주게끔, 전통적으로 다음과 같이 각각의 요소에 개별적인 링크를 추가시켜 왔습니다.

html

<header>
     <h1><a href="/">블럭 링크 주기</a></h1>
     <p><a href="/">각각의 요소에 개별적인 링크 추가</a></p>

     <a href="/"><img src="block-link.jpg" alt="헤더 요소 안에 있은 각각의 요소에 개별적인 링크가 추가 된다." />
     </a>
</header>

HTML5에서는 원하는 곳 어디에나 a 링크를 추가할 수 있습니다.

html

<a href="/">
   <header>
      <h1>블럭 링크 주기</h1>
      <p>각각의 요소에 개별적인 링크 추가</p>

      <img src="block-link.jpg" alt="헤더 요소 안에 있은 각각의 요소에 개별적인 링크가 추가 된다." />
  </header>
</a>

기본적으로 링크 항목들은 {display:inline;}으로 처리됩니다. 

그래서 필요하다면 {display: block;} 또는 {display:inline-block;}으로 CSS에서 설정을 해야 합니다. 

또한 블럭 레벨 링크안에 있는 <h1>과 같은 블럭 레벨 요소들은 링크 스타일을 상속받지 않기때문에 h1 {background-color: inherit;}와 같이 분명하게 상속문을 선언하여야 한다.

<a class=”block-link”>처럼 클래스명을 사용해도 될 것입니다.

파이어폭스 4 이하 브라우저의 경고

항상 그렇듯이, 우리들을 곤란하게 하는 두가지 작은 결점이 있습니다. 

HTML5에 기반을 둔 멋진 DOM model을 선보이는 파이어폭스 4이하 버전에서는, 만약 블럭 레벨 링크의 첫 번째 자식 요소가 HTML5 요소 중 하나라면, 블럭 레벨 링크의 기능은 사라지고, 인라인 링크가 각각의 블럭 레벨 요소에 개별적으로 추가되어지는 상황이 일어납니다. 

그리고 포함된 컨텐츠가 여전히 링크의 기능이 있고 사용할만 하다지만, 이것은 일반적으로 블럭 레벨 링크의 :hover 스타일 등은 의도한 대로 바르게 보이지 않을 것임을 의미합니다.

한 가지 해결방법은 블럭 레벨 링크의 바로 아래의 첫 번째 자식요소로 div 래퍼를 추가하는 것입니다.

html

<a href="/">
   <div><!-- 파이어폭스 3과 그 이하 버전을 위한 div 래퍼 -->
      <header>
         <h1>블럭 링크 주기</h1>
         <p>각각의 요소에 개별적인 링크 추가</p>

         <img src="block-link.jpg" alt="헤더 요소 안에 있은 각각의 요소에 개별적인 링크가 추가 된다." />
      </header>
   </div>
</a>

안타깝지만, div 래퍼의 사용은 마법과 같은 효과적인 해결방법은 아닙니다. 

이해하기 힘든 “Packet boundary(한 단위로 전송되는 데이터의 한계선)”라는 버그에 기인하는 잠재적인 문제점이 여전히 남아있기 때문입니다. 

이 버그는 파이어폭스 4에서 비로소 바로 잡아졌고 이 “Packet boundary”라는 버그는 아주 가끔 나타나지, 모든 블럭 레벨 링크에 발생(그렇게 되면, 테스트 하기 대단히 힘이 들것이다!)하는건 아니며, 발생한다 하더라고 링크의 기능은 여전히 작동할 것입니다. 

다행히도, 파이어폭스의 빠른 업데이트 사이클을 고려해 보면 Packet boundary 문제는 그다지 심각하지 않은 아주 경미한 것이어서, 개발하고 있는 사이트가 파이어폭스 4이하 버전의 사용자 수를 많이 가지고 있지 않는 한 신경 쓸 필요가 없을 것입니다.

Related Info

1. 시맨틱 마크업 #1

Jaehee's WebClub