텍스트 관련 태그
인라인 속성
::태그의 디자인은 CSS로 바꿀 수 있으므로 태그의 '의미론적' 역할에 더 주목해야한다.
<strong> 태그 (MDN)
:: 중대하거나 긴급한 내용임을 나타내는 태그
:: 화면에는 굵은 텍스트(bold체)로 표시된다.
-- 웹 접근성 도구는 strong 태그를 만나면 그 부분이 강조되었다고 알려준다고 하는데 도구에 따라 다른듯하다..
:: <strong> 태그를 겹쳐서 사용하는 것으로 더 강조할 수도 있다. (그렇다고 더 굵게 표시되지는 않는다.)
<b> 태그 (MDN)
:: 텍스트를 굵게(bold체) 표시하는 태그.
:: 현재는 그저 텍스트를 꾸미기 위해서 <b> 태그를 사용하는 것은 추천하지 않는다.
:: 텍스트를 꾸미는 것이 목적이라면 css의 font-weight 속성을 쓰는 것이 추천된다.
:: <b>태그에 대한 설정이 웹브라우저마다 다를 수 있으므로 <b>태그로 감싸고 css를 설정해주는 것이 추천된다.
<em> 태그 (MDN)
:: 텍스트의 강세를 표시하는 태그.
:: 화면에는 기울어진 글씨(italic체)로 표시된다.
:: <strong> 태그와 마찬가지로 <em> 태그를 겹쳐서 사용할 수도 있다. (그렇다고 더 기울어지게 표시되지는 않는다.)
<i> 태그 (MDN)
:: 관용구나 마음 속 생각, 기술적인 용어 등을 강조하고 싶을 때 사용하는 태그.
:: 화면에는 기울어진 글씨(italic체)로 표시된다.
:: 현재는 텍스트를 꾸미는 것이 목적이라면 css의 font-style 속성을 사용하는 것이 추천된다.
<s> 태그 (MDN)
:: 이제는 관계없어졌거나 정확하지 않은 텍스트임을 나타낼 때 사용하는 태그
:: 화면에는 텍스트에 취소선을 그은 것으로 표시된다.
:: 현재는 취소선을 긋는 것만이 목적이라면 css의 text-decoration 속성에 값을 line-through로 사용하는 것이 추천된다.
:: 문서의 편집 내역을 나타낼 때는 <s>태그 대신에 <del>과 <ins>태그를 사용할 것이 추천된다.
<del> 태그 (MDN)
:: 문서에서 제거된 텍스트의 범위를 나타내는데 사용되는 태그
:: 화면에는 텍스트에 취소선을 그은 것으로 표시된다.
<ins> 태그 (MDN)
:: 문서에서 추가된 텍스의 범위를 나타내는데 사용되는 태그
:: 화면에는 텍스트에 밑줄을 그은 것으로 표시된다.
<u> 태그 (MDN)
:: 텍스트가 문서로 표시되지 않는 주석을 가졌음을 나타낼 때 사용되는 태그
:: 주로 텍스트의 문법 오류 등을 나타낼 때 사용되어야 한다.
:: 화면에는 밑줄을 그은 것으로 표시된다.
:: 현재는 밑줄을 긋는 것만이 목적이라면 css의 text-decoration 속성에 값을 underline으로 사용하는 것이 추천된다.
-- 텍스트 주석을 나타내고 싶다면 <ruby> 태그를 사용하는 것이 추천된다.
<ruby> 태그 (MDN)
:: 동아시아 글자에 대한 주석을 표현하기 위해 사용되는 태그
:: 일본어의 후리가나(=요미가나)를 표현할 때 사용할 수 있다.
:: <ruby>글자<rt>주석</rt><ruby> 형태로 사용한다.
<rt> 태그 (MDN)
:: <ruby>태그 내부에 사용하여 주석 부분을 나타내는 태그.
<rp>태그 (MDN)
:: 브라우저가 <ruby>태그 주석을 후리가나 형태로 나타내지 못할 때 대체할 괄호를 나타내는 태그.
:: <ruby>福<rp>(</rp><rt>복</rt><rp>)</rp> <ruby> 의 형태로 사용된다.
<sup>태그 (MDN)
:: 윗첨자를 표현하는데 사용되는 태그.
:: 타이포그래피적인 이유로만 사용할 것을 추천한다.
:: 즉, 주로 수학식의 거듭제곱이나 영어권의 서수 표시 등을 할 때 사용된다.
<sub>태그 (MDN)
:: 아래첨자를 표현하는데 사용되는 태그.
:: 타이포그래피적인 이유로만 사용할 것을 추천한다.
:: 즉, 주로 화학식에서 원소의 수나 텍스트의 각주 번호 등을 표기할 때 사용된다.
<small>태그 (MDN)
:: 덧붙이는 글이나 저작권 표기 등을 위해 작게 써도되는 내용을 나타내는 태그.
:: 그저 글자를 작게 쓰고 싶은 거라면 css에서 font-size 속성을 사용하는 것을 추천한다.
<abbr>태그 (MDN)
:: 줄임말을 나타낼 때 사용하는 태그.
:: title 속성을 사용하여 전체 내용을 표시할 수 있다. (마우스를 올리고 있으면 표시된다.)
:: 화면에는 점선으로 밑줄을 그은 것으로 표시된다.
<q> 태그 (MDN)
:: 간단한 문장을 인용한 것을 나타낼 때 사용되는 태그.
:: <blockquote>태그와 달리 줄바꿈이 되지 않고, 인용 내용에 큰따옴표를 붙여서 표시된다.
:: cite 태그를 붙여서 인용문의 출처를 나타낼 수 있다.
<cite> 태그 (MDN)
:: 인용문의 출처를 나타낼 때 사용되는 태그.
:: 화면에는 기울어진 글씨(italic체)로 표시된다.
<code> 태그 (MDN)
:: 짧은 코드 조각을 나타낼 때 사용되는 태그.
:: 화면에는 고정폭 글꼴로 표시된다.
:: <pre>태그화 함께 사용하여 긴 코드를 나타낼 수도 있다.
<kbd> 태그 (MDN)
:: 키보드 입력, 음성 입력 등 사용자의 입력을 나타낼 때 사용되는 태그.
:: 화면에는 고정폭 글꼴로 표시된다.
:: <samp>태그와 함께 사용하는 경우도 많다.
<samp> 태그 (MDN)
:: 컴퓨터 프로그램 출력의 예시 등을 나타낼 때 사용되는 태그
:: 화면에는 고정폭 글꼴로 표시된다.
<mark> 태그 (MDN)
:: 맥락상 관련성이 있는 곳을 하이라이트 할 때 사용되는 태그.
:: 사용시 마치 형광펜을 칠한 것처럼 표시된다.
:: 디자인적인 의미만 갖는다면 span태그와 css를 통해서 표현하는 것이 추천된다.
<sapn> 태그 (MDN)
:: 줄바꿈 없이 영역을 묶기 위해서 사용되는 태그
:: 의미론적으로는 오히려 아무 의미가 없으므로 CSS를 통해 스타일을 주는데 사용된다.
:: 태그들을 쓰면 브라우저에 정의된 기본 스타일에 따라 아래와 같이 표시되지만,
:: 디자인은 결국 CSS로 수정해야하기 마련이다.
:: 그러니 언제나 HTML 태그는 의미론적으로 어떤 사용처를 갖는지 생각하자.
인라인 속성을 관련 텍스트 관련 태그들에 대한 예제
See the Pen Inline태그 예제 by lypi (@Lypi) on CodePen.
썸네일용