HTML로 용어 정의하기 (Define terms with HTML)
어떤 용어의 정의가 필요할 때, 보통 우리는 사전이나 용어집을 바로 찾아보곤 하죠. 사전과 용어집은 아래 예시처럼 키워드와 하나 이상의 설명을 공식적으로(formally) 연결해 줘요.
Blue (Adjective)
맑은 날의 하늘과 같은 색깔. "맑고 푸른 하늘"
하지만 우리는 평소에도 아래처럼 비공식적으로(informally) 끊임없이 키워드를 정의하며 살고 있어요.
Firefox는 모질라 재단(Mozilla Foundation)에서 만든 웹 브라우저입니다.
이러한 다양한 상황에 대처하기 위해, HTML은 설명과 설명되는 단어를 표시할 수 있는 태그(tags)들을 제공해서, 여러분이 의도한 의미가 독자들에게 제대로 전달될 수 있도록 도와줍니다.
💡 강사의 추가 설명: > 여기서 말하는 '의미가 제대로 전달된다'는 것은 단순히 눈에 보이는 글씨만 뜻하는 게 아니에요! 검색 엔진(SEO) 로봇이나 시각 장애인분들이 사용하는 스크린 리더 프로그램도 이 태그를 읽고 "아! 이 부분은 어떤 단어를 정의하고 있는 거구나!"라고 정확하게 이해할 수 있게 된다는 뜻이랍니다.
비공식적인 설명을 마크업하는 방법 (How to mark informal description)
교과서나 전공 서적을 보면, 어떤 핵심 키워드가 처음 등장할 때 그 단어를 굵게 표시하고 바로 그 뜻을 정의하는 경우가 많죠?
HTML에서도 똑같이 할 수 있어요! 다만, HTML은 시각적인 표현만을 위한 도구가 아니기 때문에 단순히 텍스트를 굵게 만드는 태그를 쓰진 않아요. 우리는 오직 키워드가 처음 등장할 때 표시하기 위해 만들어진 특별한 요소인 <dfn> 태그를 사용합니다.
여기서 주의할 점은, <dfn> 태그는 뜻풀이(정의 내용 전체)를 감싸는 게 아니라 '정의하려는 단어' 자체만 감싸야 한다는 거예요! 정의하는 내용은 그 단어가 포함된 문단 전체가 된답니다.
<p><dfn>Firefox</dfn> is the web browser created by the Mozilla Foundation.</p>📝 참고 (Note):
글씨를 굵게 만드는 또 다른 이유는 특정 내용을 강조하기 위해서죠. '굵은 글씨'라는 개념 자체는 사실 HTML 본연의 역할과는 거리가 멀지만, 강조를 나타내는 태그들은 따로 존재한답니다.
특수한 경우: 약어 (Special case: Abbreviations)
줄임말이나 약어가 있을 때는 <abbr> 태그를 사용해서 약어를 특별하게 표시해 주는 것이 가장 좋아요. 그래야 스크린 리더가 그 약어를 적절하게 읽어줄 수 있고, 여러분도 문서 내의 모든 약어들을 일관되게 관리할 수 있거든요. 새로운 키워드가 등장할 때와 마찬가지로, 약어 역시 처음 등장할 때 그 의미를 정의해 주어야 합니다.
<p>
<dfn><abbr>HTML</abbr> (hypertext markup language)</dfn>
is a description language used to structure documents on the web.
</p>📝 참고 (Note):
HTML 공식 스펙 문서에서는 약어를 펼쳐서 보여주기 위한 용도로 title 속성을 따로 배정해 두긴 했어요. 하지만, 본문 내용 안에서 자연스럽게 뜻을 풀어쓰는 것(inline expansion)을 대체할 만큼 좋은 방법은 아니랍니다. 마우스를 사용해서 약어 위에 커서를 올려두지(hover) 않는 이상,title속성의 내용은 사용자에게 완전히 숨겨져 버리기 때문이죠. 공식 스펙 문서에서도 이 점을 분명히 인정하고 주의를 주고 있어요.
접근성 향상하기 (Improve accessibility)
<dfn> 태그는 정의하려는 키워드를 표시하고, 현재 문단이 그 키워드를 정의하고 있다는 것을 알려줘요. 다시 말해, <dfn> 요소와 그 요소를 감싸고 있는 부모 태그(컨테이너) 사이에는 암묵적인 관계가 형성되는 거죠.
만약 조금 더 공식적이고 확실한 관계를 만들어주고 싶거나, 정의하는 내용이 전체 문단이 아니라 딱 한 문장일 경우에는 aria-describedby 속성을 사용해서 용어와 그 정의를 확실하게 연결해 줄 수 있어요.
<p>
<span id="ff">
<dfn aria-describedby="ff">Firefox</dfn>
is the web browser created by the Mozilla Foundation.
</span>
You can download it at <a href="https://www.mozilla.org">mozilla.org</a>
</p>보조 기술(스크린 리더 등)은 주어진 용어에 대한 대체 텍스트를 찾을 때 종종 이 속성을 활용합니다. aria-describedby 속성은 꼭 <dfn> 태그가 아니더라도 정의할 키워드를 감싸는 어떤 태그에든 사용할 수 있어요. aria-describedby에는 설명이 적혀 있는 요소의 id 값을 적어주면 서로 연결된답니다.
🧑🏫 강사의 실무 팁!
면접이나 실무에서 마크업에 대해 논의할 때, 이런aria속성은 정말 강력한 무기가 됩니다. 예를 들어 React나 Next.js를 사용해 접근성이 뛰어난 텍스트 중심의 포트폴리오를 구현하실 때,<dfn>태그와aria-describedby를 조합해서 컴포넌트로 분리해 두면 어떨까요? "저는 단순한 화면 구현을 넘어, 스크린 리더 사용자를 배려하는 견고한 구조의 웹을 만들었습니다."라고 어필할 수 있는 훌륭한 포인트가 될 거예요!
설명 목록을 만드는 방법 (How to build a description list)
설명 목록(Description lists)은 그 이름처럼 용어와 그에 맞는 설명이 나열된 목록을 뜻해요. (예: 정의 목록, 사전의 항목, 자주 묻는 질문(FAQ), 혹은 키-값(key-value) 쌍 등)
📝 참고 (Note):
설명 목록은 대화 내용을 표시하기에는 적합하지 않아요. 대화문 자체가 화자를 직접적으로 '설명'하는 것은 아니기 때문이죠. 대화 내용을 마크업할 때는 공식 권장 사항을 참고해 보세요.
설명하려는 '용어(term)'는 <dt> 태그 안에 넣습니다. 그리고 그 용어에 딱 맞는 '설명(description)'은 바로 뒤이어 오는 하나 이상의 <dd> 태그 안에 넣으면 됩니다. 마지막으로 이 모든 설명 목록들을 전체적으로 <dl> 태그로 감싸주면 완성이에요!
간단한 예제 (A simple example)
음식과 음료의 종류를 설명하는 간단한 예제를 살펴볼까요?
<dl>
<dt>jambalaya</dt>
<dd>
rice-based entree typically containing chicken, sausage, seafood, and spices
</dd>
<dt>sukiyaki</dt>
<dd>
Japanese specialty consisting of thinly sliced meat, vegetables, and
noodles, cooked in sake and soy sauce
</dd>
<dt>chianti</dt>
<dd>dry Italian red wine originating in Tuscany</dd>
</dl>📝 참고 (Note):
예제에서 볼 수 있듯, 기본적인 패턴은<dt>(용어)와<dd>(설명)가 번갈아 가며 나오는 구조예요. 만약 두 개 이상의<dt>용어가 연속으로 나온다면, 바로 뒤에 나오는<dd>설명은 앞서 나온 모든 용어들에 공통으로 적용됩니다. 반대로 두 개 이상의<dd>설명이 연속으로 나온다면, 그 설명들은 모두 바로 직전에 나온 하나의<dt>용어를 설명하는 것이 된답니다.
시각적 결과물 개선하기 (Improving the visual output)
그래픽 기반의 일반적인 웹 브라우저에서는 앞서 작성한 목록을 기본적으로 이렇게 렌더링해서 보여줍니다.
만약 키워드(용어)들이 눈에 더 잘 띄게 만들고 싶다면, 글씨를 굵게 처리해 볼 수 있어요. 기억하시죠? HTML은 시각적인 표현 매체가 아닙니다. 모든 시각적인 디자인 요소는 CSS에게 맡겨야 해요. 이럴 땐 CSS의 font-weight 속성을 사용하면 딱이랍니다!
dt {
font-weight: bold;
}이렇게 CSS를 적용하면, 글씨가 한결 읽기 편해진 아래와 같은 결과물을 얻을 수 있어요.
더 알아보기 (Learn more)
