본문으로 바로 이동 페이지 설정으로 이동 메뉴로 이동
페이지 설정
  • 어떠한 의견도 좋습니다. 웨버스터디가 더 나은 모습이 되도록 의견을 보내주세요.

문구 요소들 2

최초 작성일
최종 수정일
이번 시간에는...
HTML 문구에 의미를 부여하는 태그 address, abbr, acronymm dfn, code, samp 요소를 살펴보며, 각 태그의 차이와 오용된 경우 등을 알아봅니다.

지난 HTML 초급 강좌 중 '문구 요소들 1'에서 다루지 않았던 요소들을 살펴봅니다.

지난 강의에서는, 비교적 사용빈도가 떨어져 다루지 않았지만, 알아두면 알찬 요소들입니다.

abbr 요소

abbr 요소는 축약어(abbreviation)를 나타내는 요소입니다. 예를 들어 세계 보건 기구인 WHO이나, 최고 경영자를 뜻하는 CEO과 같은 축약된 단어를 표현하는데 사용합니다.

이 abbr 요소는 해당 단어를 감싸고, title 속성으로 풀이를 표기합니다.

이 abbr 요소를 사용하면, 브라우저와 번역기나 검색엔진 등에서 유용하게 사용할 수 있습니다. 또한 title 속성 덕분에 해당 단어에 마우스 커서를 가져가면 툴팁 형태로 풀이가 보여줍니다. 그 만큼 접근적인 부분도 향상이 되는 것입니다.

앞의 예시는 영어인 경우고, 한글의 경우 인터넷 은어이긴 하지만 페북같은 단어도 사용하는 것이 좋지 않을까 생각됩니다.

acronym 요소와 비교

이 요소와 비슷한 요소로 'acronym'이란 요소가 있습니다. 이 요소 역시 abbr 요소와 마찬가지로 축약어를 나타냅니다.

하지만 둘은 약간의 차이가 있습니다. abbr 요소는 'WHO'처럼 알파벳 단위로 읽히는 단어(WHO는 보통 '더블유 에이치 오'로 읽습니다.)에 사용합니다. 그에 비해 abbr 요소는 'NASA'처럼 줄임말을 그대로 발음하는 단어(NASA는 보통 '나사'로 읽습니다.)에 사용합니다.

아무래도 스크린리더 때문에 이렇게 나누지 않았을까 하는 예상이 되긴 하지만, 정말 미묘한 차이입니다.

acronym 요소는 HTML5에서부터 폐기되어 abbr 요소로 통합되었습니다.

address 요소

언뜻 요소 이름이 address(주소)라서 모든 주소 정보를 감싸는 요소가 아닐까 하고 착각하기 쉽습니다.

하지만 이 요소는 주소 보다는 연락처의 의미를 담고 있으며, 현재 페이지의 저자 또는 소유주의 연락처를 나타내는 요소입니다. 그렇기 때문에 이 요소 안에는 주소 외에도 이메일, 전화번호 등 저자의 연락정보를 담을 수 있습니다.

참고로 address 요소는 블록 요소입니다.

이 address 요소에 관해 종종 잘못된 관행이 있는데요, 바로 'copyright'같은 저작권 표기를 이 요소로 작성하는 경우가 있습니다. 아무래도 하단에 연락처와 같이 표기하다가 생겨난 관행이 아닐까 싶지만, 저작권 표시는 연락정보와 무관하므로 따로 p 같은 요소로 작성하시기 바랍니다.

dfn 요소

dfn 요소는 개념(단어)의 정의를 나타내는 요소입니다. 이 dfn 요소가 사용되면, 그 요소가 속한 문단이나 섹션 등에서 dfn 요소에 들어간 개념(단어)에 대한 설명을 포함해야 합니다.

dl 요소와 비슷하지만, dl 처럼 dt와 dd의 이름-값 형태의 그룹 같은 것을 가지고 있지 않습니다.

만약 dfn 요소에 title 속성이 있을 경우, 그 값이 정의되는 단어입니다. 만약 title 속성이 없다면, dfn 요소 안의 내용이 정의되는 단어이며, 안에 abbr 요소만 있을 경우에는 abbr의 title이 정의되는 단어가 됩니다.

code 요소와 samp 요소

이 요소는 여러분의 웹 페이지가 어떠한 주제를 가지고 있느냐에 따라 아예 접하지 않을 수 있는 요소입니다.

이 두 요소는 컴퓨터 프로그래밍과 관련 있는 요소로, code는 컴퓨터 프로그래밍 같은 작성되는 코드를 나타내며, samp는 프로그램이 화면에 출력하는 텍스트를 나타냅니다.

다만 이 두 요소는 인라인 요소이기 때문에, 안에 div같은 블록 요소를 넣지 않도록 주의하시기 바랍니다.

요점 정리
  • abbr 요소는 축약어를 나타내는 요소.
  • abbr은 알파벳을 따로 읽는 축약어, acronym은 알파벳을 붙여서 읽는 축약어.
  • address 요소는 페이지 저자의 연락처를 나타냄 (저자가 아닌 사람들의 주소를 나타내선 안됨).
  • dfn 개념 정의 요소.
  • code는 프로그래밍 소스를 표현.
  • samp는 화면에 출력되는 텍스트.

이 글이 유용하셨다면 친구들에게 공유 해주세요.