웹문서에서 문단을 구성하는 요소들에 대하여 알아봅니다.
EM 요소
em 요소는 강조(EMphasis)를 표시한다. 문장 내에서 무엇을 강조하느냐에 따라 문장의 의미는 달라질 수 있다. 대화할 때 같은 내용이라도 어떤 내용에 스트레스(stress, 상대적 강도)를 주느냐에 따라 미세한 어감 차이가 생긴다는 사실을 알 수 있는데, 이러한 차이는 전체적인 의미를 변화시키기도 한다.
<p>고양이는 <em>귀여운</em> 동물입니다.</p>
- 문맥을 통해 의미 변화를 이끌어내기 위한 요소이다.
- em 요소로 지정된 텍스트는 다른 글자와 구분될 수 있도록 이탤릭체로 표현된다.
I 요소
i 요소는 HTML5에서 재정의된 요소로서, 더 이상 이탤릭체를 의미하지 않으며 어떤 중요성이나 강조의 의미를 갖지 않는다.
<p>오늘 프랑스 요리인 <i lang="fr">Foie gras</i>을 먹었다.</p>
- 주변의 문장과 다른 의미나 느낌을 표현하기 위해 사용한다.
- 진행중이었던 내용에서 약간 벗어난 분류학적 정의, 기술용어, 다른 언어에서 사용하는 관용적 표현, 생각, 배이름 등에 사용한다.
- 시각적 또는 청각적 구분이 필요한 곳에 사용한다. 사용자가 정보를 시각적으로 처리하는 경우 기울지 않은 글자를 읽다가 기운 글자가 나타나면 형태 대비 때문에 기운 글자를 주의 깊게 살피게 된다. 이런한 원리는 음성 출력에도 적용된다.
STRONG 요소
strong 요소는 HTML5에서 재정의된 요소로서, 높은 중요도(STRONG importance)를 표시한다.
<p>가장 중요한 것은 바로 <strong>올바른 판단</strong>이다.</p>
- 중요한 내용(keyword, key sentence)을 강조하여 쉬운 이해를 돕기 위한 요소라고 볼 수 있다.
- em 요소는 문장의 의미를 변화시키지만 strong 요소는 문장의 의미를 변화시키지 않는다.
- strong 요소로 지정된 텍스트는 다른 글자와 구분될 수 있도록 굵은 서체로 표현된다.
B 요소
b 요소는 HTML5에서 재정의된 요소로서, 별도로 추가적인 중요성을 부여하지 않으면서 다른 문장과 구별되는 문체를 갖는 텍스트에 이용된다.
<p>세상은 <b>코드</b>와 <b>암호</b>로 이루어져있지...
- <b>셜록 홈즈</b> 미니시리즈 - </p>
- 제품의 설명에서 제품의 이름에, 또는 전형적으로 볼드체를 사용해 표현하는 문구등에 사용한다.
- 시각적인 강조를 위해 사용한다.
- 특정 단어를 상대적으로 잘 보이게 처리하여 읽기 흐름을 도울 때
- 읽기 시작점을 표시하여 빠른 읽기를 도울 때
MARK 요소
mark 요소는 HTML5에 새롭게 추가된 요소로서 마크된 텍스트(MARKed or highlighted text)를 표시한다. 마크된 텍스트는 사용자 주의를 끌기 위해 다른 텍스트보다 더 강조된 텍스트를 말한다. 형광펜으로 특정단어들을 칠해서 강조하는 효과와 비슷하며 문장내의 중요한 부분에 강조효과를 넣는 em , strong과는 다른 개념이다. 시각적 주목효과 만을 노리며 스타일이 정의되어 있지 않으므로 직접 효과를 작성한다.
<p>지금 공부하고 있는 것은 <mark>HTML5</mark> 입니다.</p>
- 출처 : 저작자가 다른 사람의 말이나 다른 곳의 내용을 인용할 때, 원저작자가 강조하지 않은 텍스트를 저작자가 임의로 강조해야 할 때에 mark 요소를 사용한다.
- 검색어 하이라이트 : 검색 결과의 경우 검색어는 다른 단어보다 더 강조되어야만 검색 결과를 신속하게 처리할 수 있다. 이때 검색어는 원래부터 중요한 단어가 아니라 특정 검색 상황에서만 중요한 단어이므로 em이나 strong 요소를 사용할 수 없다. 스크립트를 이용하여 검색어를 강조할 수 있는데 이것은 어디까지나 시각적 효과에 의존한 방법이므로 mark 요소를 사용하는 것이 바람직하다.
- 강조 : em이나 strong 요소와 달리 현재 처해 있는 상황이나 읽고 있는 주제와 관련된 텍스트를 강조할 때 mark 요소를 사용한다. 이것은 저작자 의도보다는 상황 요인에 따라 텍스트를 강조한 것이므로 상황이 바뀌면 강조할 이유도 없어질 수 있다.
DFN 요소
dfn 요소는 용어 정의(DeFiNing term)를 표시한다.
<p>자세한 설명은 <dfn title="오디오 파일 또는 비디오 파일형태로 뉴스나 드라마 등 다양한 콘텐츠를 인터넷망을 통해 제공하는 서비스">팟캐스트</dfn>을 참조하세요</p>
- dfn 요소는 단순히 용어라는 사실을 알리는 역할만 하므로 직접 용어를 설명해야 할 때에는 title 속성을 사용해야 한다.
- 브라우저는 dfn 요소로 표시된 글자를 이탤릭체로 표현한다.
- 용어에 대한 의미적 표현이 필요할때 사용한다.
CODE 요소
code 요소는 컴퓨터 코드를 표시한다.
<code>
<html>
<body>
<h1>Hello~ World!</h1>
</html>
</code>
- 고정폭 글꼴로 표현된다.
SAMP 요소
samp 요소는 프로그램이나 컴퓨터에 의해 얻어지는 샘플 출력물(SAMPle output)을 표시한다.
<p>브라우저가 해당 웹 문서를 찾을 수 없을 경우, 오류 메시지 <samp>"Oops! Google Chrome could not find www.example.com"</samp>이 출력된다.</p>
- 일종의 사례(예시)의 의미로 사용된다.
- 프로그램이나 컴퓨터가 어떤 출력물을 제공하는지 설명해야 할 때 쉬운 이해를 위해 샘플을 제공한다.
- 교재나 설명서에서 자주 사용한다.
KBD 요소
kbd 요소는 키보드 입력(KeyBoarD input)을 표시한다. 키보드 입력은 Ctrl, Alt, Shift, Delete 등처럼 키보드의 특정 키(key)를 선택하여 명령을 실행하는 것 또는 키보드를 이용하여 텍스트 필드에 텍스트를 입력하는 것을 말한다.
<p><kbd>Delete</kbd>를 누르세요</p>
- 고정폭 글꼴로 표현된다.
VAR 요소
var 요소는 변수(VARiable)를 표시한다.
<p>사건이 발생할 경우의 수는 <var>n</var>가지이다.</p>
- var 요소가 적용된 글자는 대개 이탤릭체로 표현된다.
