<abbr>과 <dfn> 태그의 활용
HTML 태그들 중에서 가장 사용 빈도가 낮은 태그들입니다.
< abbr> 태그는 abbreviation(축약어)의 약자로 만든 태그입니다.
< dfn> 태그는 definition(정의)의 약자로 만든 태그입니다.
축약어, 또는 약자에 대한 설명을 덧붙여서 마우스 호버시 설명이 툴팁으로 표시되도록 하는 태그입니다.
< abbr>과 < dfn> 은 다음과 같이 사용합니다.
<p><dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn> 는 HTML 문서의 스타일을 기술하는 언어입니다.</p>
<p><abbr title="HyperText Markup Language">HTML</abbr> 는 하이퍼 연결 문서를 기술하는 태그 기반의 언어입니다.</p>
<p><dfn title="Syntactically Awesome Style Sheets">SASS</abbr> 는 CSS 를 스크립트로 기술하는 프리프로세서 입니다.</p>
이 태그들이 중요한 것은 이 태그들이 시멘틱 태그이기 때문에 검색 엔진에서 문서 안의 중요 키워드로 인식된다는 것입니다.
따라서 표현할 축약어가 있으면 텍스트로 표현하기 보다는 <abbr>, <dfn> 태그를 사용하는 것을 추천합니다.
<abbr> 태그와 <dfn> 태그는 위의 예처럼 중첩해서 사용할 수도 있습니다.
두 태그는 모두 툴팁을 표시합니다.
그리고 태그로 구분되기 때문에 축약어를 페이지 안에서 돋보이도록 간편하게 스타일링을 할 수 있습니다.
<abbr> 태그는 축약어 밑에 점선으로 표시해 구분이 되도록 하기는 지만, 잘 보이지 않는 단점이 있습니다.
다음과 같이 CSS를 작성해 축약어가 페이지 안에서 잘 보이도록 스타일링을 할 수 있습니다.
abbr, dfn{
font-family: sans-serif;
font-weight: bold;
color: #00a;
font-size: 1.25em;
text-decoration: none;
line-height: 1em;
cursor: help;
}
<abbr> 태그 모바일 호환성 높이기
<abbr> 태그의 문제는 툴팁이 모바일 환경에서는 지원이 안된다는 것입니다. 마우스 호버에 반응하는 툴팁의 특성상 마우스 호버가 없는 모바일 디바이스에서는 "title" 속성으로 표기한 설명을 볼 방법이 없습니다.
CSS로 다음과 같이 "title" 속성을 확장해주면 모바일 디바이스에서는 "title" 속성의 내용이 축약어 뒤에 괄호 내용으로 확장되어 표기되기 때문에 문서의 가독성을 기기에 상관없이 유지할 수 있습니다.
@media screen and (max-width: 600px){
abbr[title]::after, dfn[title]::after {
content: ' (' attr(title) ') ';
}
}
이렇게 작성하면 가로 600px 이하의 모바일 디바이스에서는 "title" 속성의 내용이 축약어 뒤에 펼쳐져서 보이게 됩니다.
같은 원리를 이용해 데스크탑 환경에서도 마우스 호버가 되면 괄호로 "title" 내용이 확장되어 보이도록 할 수도 있습니다.
abbr[title]:hover::after, dfn[title]:hover::after {
content: ' (' attr(title) ') ';
}