[HTML/CSS] HTML로 텍스트 표현하기2— Inline Elements
지난 포스트에서 Block-level Elements 에 해당하는 텍스트 표현 태그들을 다루었다. 이번에는 Inline Elements 에 해당하는 텍스트 표현 태그들을 다루어보려고한다.
Inline 요소란?
inline 요소의 css 속성은 display: inline;으로 표현한다. inline 요소는 다음과 같은 특징을 갖는다.
- block-level 요소와 달리 새로운 줄에서 시작하지 않고, 요소 뒤로도 새로운 줄이 생기지 않는다.
- inline 요소의 넓이는 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지한다.
Inline 속성 역시 이보다 더 상세한 특징들이 있지만, 본 포스트에서는 다루지 않는다. Inline 속성 역시 텍스트를 표현하는 태그말고도 다른 태그들이 있다는 사실을 알고 시작하자. 본 포스트에서는 텍스트를 표현하는 태그들에 대해서만 다룬다.
줄바꿈을 나타내는 태그
<br>
br태그의 br 은 줄바꿈이라는 뜻인 단어 line break 의 break를 줄여 br 이다.
Ex1 에서 볼 수 있듯이 p태그 코드 내에서 엔터키를 이용해서 코드 상에서 줄바꿈을 하여도 웹페이지에서는 줄바꿈이 되지 않는다. 위의 p 태그처럼 단락을 이용하여 줄바꿈할 수 있지만, 감싼 내용의 아래로 줄바꿈 뿐만 아니라 위쪽도 줄바꿈이 되는 것을 볼 수 있다.
br 태그는 우리가 일반적인 텍스트 문서를 작성할 때 엔터키를 이용하여 줄바꿈을 하듯이, 웹페이지에 보여지는 내용에 줄바꿈을 넣을 수 있다. 그러나 브라우저가 코드를 해석할 때 br 태그를 p 태그처럼 단락으로 인식하지 않는데, 이는 block-level 요소와 inline 요소의 차이이다.
<!-- br 태그 기본형 --><br>
텍스트 굵게 표시하는 태그
<b>
b 태그는 텍스트를 굵게 표시하는 역할을 한다.
<!-- b 태그 css 기본값 -->b {
font-weight: bold;
}
<strong>
strong 태그 역시 텍스트를 굵게 표시하는 역할을 하고, 해당 텍스트가 중요하다는 의미를 내포한다.
<!-- strong 태그 css 기본값 -->strong {
font-weight: bold;
}
<b>, <strong> 차이
b 태그와 strong 태그는 기본 css 속성은 같지만, strong 태그만이 웹 접근성을 고려하고있다. b 태그는 단순히 텍스트를 진하게 표시하기만 하지만, strong 태그는 ‘중요하다.’라는 의미를 갖고 있는 내용에 사용한다. screen reader(시각에 제한이 있는 분들 등을 위한 화면 낭독 소프트웨어)가 읽을 때 강조를 하는 등의 역할을 한다.
html5 에서 b 태그는 다른 태그들을 사용할 수 있을 때 사용하고(ex] h 태그, strong 태그), b 태그는 최후의 수단으로 사용하는 것을 권장한다.
텍스트 기울게 표현하는 태그
<i>
<i> 태그는 텍스트를 기울여 표현하는 태그이다.
<!-- i 태그 css 기본값 -->i {
font-style: italic;
}
<em>
em 태그는 텍스트를 기울여 표현하는 역할을 하고, 해당 텍스트가 중요하다는 의미를 내포한다. 태그의 이름인 em 은 emphasize (강조하다.) 의 줄임말이다.
<!-- em 태그 css 기본값 -->em {
font-style: italic;
}
<i>, <em> 차이
i 태그와 em 태그는 기본 css 속성은 같지만, em 태그만이 웹 접근성을 고려하고있다. i 태그는 단순히 텍스트를 기울게 표시하기만 하지만, em 태그는 ‘중요하다.’라는 의미를 갖고 있는 내용에 사용한다. screen reader(시각에 제한이 있는 분들 등을 위한 화면 낭독 소프트웨어)가 읽을 때 강조를 하는 등의 역할을 한다.
텍스트에 밑줄을 표현하는 태그
<u>
u 태그는 텍스트에 밑줄을 표현하는 태그이다. underline 의 앞 글자를 가져와서 u 를 사용한다. 다른 문서로 이동할 수 있는 hyperlink 기능 역시 기본적으로 밑줄이 들어가기 때문에, 이와 혼동되지 않도록 주의하여 작성해야한다.
<!-- u 태그 css 기본값 -->u {
text-decoration: underline;
}
<ins>
ins 태그 역시 텍스트에 밑줄을 표현하는 태그이다. cite 라는 속성을 통해 지워진 이유에 관한 문서의 웹링크를 넣을 수 있고, datetime 속성을 통해 언제 지워졌는지 값을 입력할 수 있다.
<!-- ins 태그 css 기본값 (대부분의 브라우저에서) -->ins {
text-decoration: underline;
}
텍스트에 취소선을 표현하는 태그
<s>
s 태그는 텍스트에 취소선을 표현하는 태그이다. strike-through 의 앞 글자를 가져와서 s 를 사용한다. 해당 내용이 더이상 정확한 의미가 아니거나 관계없을 때 사용한다.
<!-- s 태그 css 기본값 -->s {
text-decoration: line-through;
}
<del>
del 태그 역시 텍스트에 취소선을 표현하는 태그이다. 문서에서 지워졌다는 의미를 표현할 때 사용한다. cite 라는 속성을 통해 지워진 이유에 관한 문서의 웹링크를 넣을 수 있고, datetime 속성을 통해 언제 지워졌는지 값을 입력할 수 있다.
<!-- del 태그 css 기본값 (대부분의 브라우저에서) -->del {
text-decoration: line-through;
}
텍스트 형광펜(highlighted) 효과 표현 태그
<mark>
mark 태그는 형광펜(highlighted) 효과를 나타내는 태그이다. HTML5 에서 등장한 태그이다.
<!-- mark 태그 css 기본값 -->mark {
background-color: yellow;
color: black;
}
위 첨자, 아래 첨자 나타내기
<sup>
superscript 에서 따온 sup 태그는 텍스트를 위 첨자로 표시한다.
<!-- sup 태그 css 기본값 -->sup {
vertical-align: super;
font-size: smaller;
}
<sub>
subscript 에서 따온 sub 태그는 텍스트를 아래 첨자로 표시한다.
<!-- sub 태그 css 기본값 -->sub {
vertical-align: sub;
font-size: smaller;
}
텍스트를 컴퓨터 코드라고 표기하기
<code>
텍스트를 컴퓨터 코드라고 표기할 때 사용한다. 기본 스타일은 폰트가 monospace 이다.
<!-- code 태그 css 기본값 -->code {
font-family: monospace;
}
텍스트를 키보드 입력이라고 표현하기
<kbd>
code 태그가 컴퓨터 코드라는 것을 표기하는 것처럼, 키보드 입력이라는 것을 표기할 수 있다.
<!-- kbd 태그 css 기본값 -->kbd {
font-family: monospace;
}
텍스트를 줄임말이라고 표기하기
<abbr>
abbr 태그는 줄임말을 뜻하는 abbreviation 에서 가져왔다. 속성없이 그냥 abbr 태그만 사용했을 때, 기본 스타일이라면 육안으로는 abbr 태그로 표기됐는지 안됐는지 알 수 없다. 그러나 title 속성을 사용하면 점선의 밑줄이 기본적으로 보이고, 마우스 포인터를 해당 줄임말 텍스트에 갖다 댔을 때 어떤 말의 줄임말인지 볼 수 있다.
인용 텍스트 표기하기
<cite>
cite 태그는 책이나 음악, 영화, 예술 작품 등과 같은 창작물의 제목을 표현할 때 사용한다. 기본 스타일은 글씨체가 기울게 표현된다.
<!-- code 태그 css 기본값 -->cite {
font-style: italic;
}
일부 텍스트 스타일 분리하기
<span>
span 코드를 사용하면 같은 문장에 있더라도 일부 텍스트에만 다른 스타일을 적용할 수 있다. CSS 에 관련된 내용을 지금 다루지는 않지만, 이런 태그가 있다는 사실만 알아두자.
References
- [W3School] “HTML tutorial” — https://www.w3schools.com/html/default.asp
- [W3School] “HTML tags” — https://www.w3schools.com/tags/default.asp
- 고경희, 2019, HTML + CSS3 웹표준의 정석, 이지스퍼블리싱
