인라인 텍스트

김동현·2021년 10월 10일

HTML5

목록 보기

7/13

1. `<a> </a>`

다른 페이지, 같은 페이지 위치, 파일, 이메일 주소, 전화번호 등 다른 URL로 연결할 수 있는 하이퍼링크를 설정하는 태그(display: inline;).

속성	의미	값
🔑 href	링크 URL	URL
target	링크 URL의 표시 위치	_self(기본값), _blank
download	이 요소가 리소스를 다운로드 하는 용도로 사용됨을 의미	불린 속성
rel	현재 문서와 링크 URL 관계	license, prev, next
type	링크 URL MIME 타입	text/html

href 속성은 다른 문서로 나갈 URL을 설정합니다. 해당 속성을 생략하면 a 태그는 단지 text가 됩니다(하이퍼링크로서 기능을 상실). 그러므로 필수 속성처럼 사용해주어야 합니다.
a 태그의 content 영역에 텍스트뿐만 아니라 다른 요소(<img />, , <div>,,, 등)들을 포함한다면 포함된 요소를 클릭하는 것으로 href 속성에 작성한 링크로 이동할 수 있도록 마크업할 수 있습니다.
주의할 점으로 a 태그는 inline 요소이므로 Content에 텍스트가 아닌 요소를 작성하는 경우 block 요소로 변경한 뒤 사용해야 합니다.
target 속성은 a 태그로 다른 페이지로 넘어갈 때 현재 페이지에서 나타나게 할 것인지(_self) 혹은 새로운 탭에 해당 페이지를 나타낼 것인지(_blank) 설정하는 속성입니다.
_self 는 현재 페이지에서 다른 페이지를 띄우겠다고 설정하고, _blank 값은 새 탭에 다른 페이지를 띄우겠다고 설정합니다. 기본값은 _self로 설정되어 있습니다.
download을 통해 파일을 다운로드 하는 용도롤 설정할 수 있습니다. 불린 속성으로 값을 따로 명시하지 않고 사용합니다.
rel 속성을 통해 현재 페이지와 a 태그로 나갈 페이지의 관계를 명시할 수 있습니다. 값으로 license는 나갈 페이지가 license에 해당한다고 명시합니다. prev 값은 이전 페이지, next 값은 다음 페이지라고 명시합니다.

href 주소 표기법

종류	표기법
웹 URL	href="URL주소"
절대경로/상대경로	href="./상대경로", href="상대경로" or href="/절대경로"
같은 페이지 내 이동	href="#id값"
메일쓰기	href="mailto:메일주소"
전화걸기	href="tel:전화번호"

<!-- 웹 URL -->
<a href="https://www.goggle.com">goggle page</a>

<!-- 상대 경로 -->
<a href="./next.index">next</a>

<!-- 절대 경로 -->
<a href="/project/public/next.index">next page</a>

<!-- 같은 페이지 내 요소 -->
<a href="#article">article section</a>

<!-- 메일 -->
<a href="mailto:test@test.com">send to test@test.com</a>

<!-- 전화 -->
<a href="tel:010-0000-0000">tel to 010-0000-0000</a>

WAI-AIRA API

WAI-ARIA는 웹 접근성을 높여주는 API입니다. aria-label이라는 속성의 값을 스크린리더를 사용하는 사용자에게 읽히게 되는 텍스트를 작성합니다.

<a href="https://,,," aria-label="Go to Previous page">Previous</a>

위 예제는 스크린리더의 사용자에게 Previous가 아닌 aria-label 속성에 입력된 텍스트인 Go to Previous page라고 읽힘으로서 조금 더 정확한 정보를 전달하여 웹 접근성을 높일수 있습니다.

aria-hidden 속성은 스크린리더로 해당 요소를 읽지 않도록 설정하는 속성입니다. 값으로 true를 작성하게 되면 스크린리더는 해당 정보를 사용자에게 전달하지 않습니다. 즉, 불필요한 정보같은 경우 aria-hidden="true"를 작성하여 웹 접근성을 높일 수 있습니다.

aria-label, aria-hidden 속성은 a 태그에만 작성할 수 있는 속성이 아닌 다른 태그에서도 사용이 가능한 전역 속성입니다.

2. `<abbr> </abbr>`

약어를 지정하는 태그입니다(display: inline;).
속성 의미 값
title 약어에 대한 설명
title 전역 속성을 이용하여 약어에 대한 설명을 작성할 수 있습니다. 실제 웹 페이지에서 해당 요소에 마우스 커서를 올려두면 title에 작성한 설명이 표시됩니다.

속성	의미	값
title	약어에 대한 설명

3. ` `

어떤 텍스트를 굵게 표시하고 싶을 때 사용합니다.(display: inline;).
기본적으로 글자가 두껍게(bold) 표시됩니다.
해당 태그는 특별한 의미를 갖지 않으며, 단지 굵게 표시되어 읽기 흐름에 도움을 주는 용도로 사용합니다.
예를 들어, 키워드나 리뷰의 제품명, 특별한 중요성을 갖진 않지만 굵게 표시하고 싶은 텍스트로 작성하여 읽기 흐름에 도움을 주는 용도로만 사용되며 중요성을 표시할 때 사용하지는 않습니다.

4. ` `

사용자의 관심을 끌기 위한 용도로 사용합니다. 기본적으로 글자의 배경색이 노란색(yellow)로 표시됩니다(display: inline;).
의미보다는 시각적인 부분에 특화된 태그입니다.

5. ` `

단순한 의미 강조를 표시합니다(display: inline;).
b, mark 태그는 text의 의미를 강조하는 것보다 단순한 범위 지정, 관심있는 표시를 하는 정도로 사용하는데 em 태그는 text의 범위가 가지는 의미를 실질적으로 사용자에게 강조하기위해 사용합니다. 정보통신보조기기에서는 구두 강조로 발음됩니다.
중첩이 가능하며 중첩될 수록 강조 의미가 강해집니다.이때 시각적인 변화는 없습니다.
기본적으로 italic 글꼴로 표시됩니다.

// 중첩된 강조
<em><em>강조</em></em>

6. ` `

의미의 중요성을 나타내기 위해 사용하는 태그입니다(display: inline;).
기본적으로 글자가 두껍게(bold) 표시됩니다. 정보통신보조기기에서는 구두 강조로 발음됩니다.
문단, 제목 등 어떤 곳에서든 강조하고 싶은 내용에 ,  둘 중 선택하여 작성해줍니다.

7. ` `

어떤 이유로 주위와 구분이 되어야 하는 부분을 나타내기 위해 사용합니다(display: inline;).
앞뒤 글자와 분위기가 다른 부분, 예를 들어 아이콘, 특수 기호, 고유 명사, 기술 용어 등과 같은 것을 표현하기 위해 사용합니다.
해당 태그는 기본적으로 italic 글꼴로 표시됩니다.

8. `<dfn> </dfn>`

용어를 정의할 때 사용하는 태그입니다(display: inline;).

문자 콘텐츠에서 살펴본 dl, dt, dd 태그는 용어와 설명을 나열하는 개념으로 용어가 많을 때 사용합니다. dfn 태그는 전체 문장에서 특정한 용어 하나를 정의할 때 사용합니다.

<p>
    <dfn title="설명">The Internet<dfn> is golbal system,,,
</p>

9. `<cite> </cite>`

인용에 대한 정보를 설정하는 태그입니다(display: inline;).
blockquote나 q 태그의 cite 속성으로 인용에 대한 정보를 작성할 수 있지만, cite 태그를 사용함으로써 페이지에 실질적으로 표시되도록 작성할 수 있습니다.
기본적으로 italic 글꼴로 표시됩니다.

<p>
    <cite>The Scream<cite> by Edward Munch. Painted in 1893.
</p>

10. `<q> </q>`

(짧은)인용문을 설정하는 태그입니다(display: inline;).
문장 내 일부, 텍스트 일부분에 인용문이 삽입된 경우 사용합니다.
기본적으로 작성한 내용에 큰따옴표가 삽입되어 화면에 표시됩니다.
속성 의미 값
cite 인용된 정보의 URL URL
blockquote 태그와 동일하게 cite 속성으로 해당 인용문 정보의 URL을 작성할 수 있습니다.

속성	의미	값
cite	인용된 정보의 URL	URL

11. ` `

밑줄이 있는 글자를 설정하는 태그(display: inline;).

밑줄은 CSS로 설정할 수 있습니다. 그러므로 밑줄을 사용하기위해 u 태그를 사용하는 것은 일반적으로 적합하지 않습니다. 해당 태그는 CSS가 제대로 동작하지 않는 환경인 경우 사용합니다.

span {
	text-decoration: underline;
}

or

<span style="text-decoration: underline"> </span>

위 두 경우를 사용할 수 있는 환경이라면 u 태그 사용을 권장하지 않습니다.

12. `<code> </code>`

컴퓨터 코드 범위를 설정하는 태그입니다(display: inline;).
특정한 문장 안에 코드 일부분이 삽입되어 있는 경우 그 부분을 code 태그로 작성합니다.
기본적으로 Monospace 글꼴 계열로 표시됩니다.
<pre> 태그의 자식 요소로 사용하는 경우가 많습니다.

<pre>
    <code>console.log(Hello, World!);</code>
</pre>

13. `<kbd> </kbd>`

텍스트 입력 장치(기보드)에서 사용자 입력을 나타내는 텍스트 범위를 설정하는 태그입니다(display: inline;).

<p>
	<kbd>Ctrl</kbd>+<kbd>Alt</kbd>
</p>

14. ` `

위 첨자를 설정하는 태그입니다(display: inline;).

15. ` `

아래 첨자를 설정하는 태그입니다(display: inline;).

X<sup>4</sup>+Y<sup>2</sup>, H<sub>2</sub>O

위 예제는 $X^4+Y^2$ , $H_2O$ 처럼 표시됩니다.

16. `<time> </time>`

날짜와 시간을 나타내기 위한 목적으로 사용합니다(display: inline;).

속성	의미	값
datetime	유효한 날짜 문자	Date

datetime 속성으로 정확한 날짜 문자를 나타낼 수 있습니다.
값의 형태는 "YYYY-MM-DD" 형태를 가집니다.

17. ` `

본질적으로 아무것도 나나내지 않는 콘텐츠 영역을 설정하는 태그입니다(display: inline;).
텍스트를 다룰 때 의미 없이 CSS, 자바스크립트를 적용하기 위해 묶어주는 용도로 사용합니다.
span 태그는 인라인 요소를 사용하는 곳, 텍스트를 다루는 곳에서 div 태그 대신해서 사용하는 태그입니다.
div 태그는 블록 요소이므로 한 줄에 하나만 표시(수평으로 요소가 쌓임)되지만, span은 인라인 요소이므로 텍스트 중간 부분(수평으로 요소가 쌓임)에 적용할 수 있습니다.

18. ` `

줄바꿈을 설정하는 태그입니다. 빈 태그로 사용이 됩니다(display: inline;).
HTML 문서 내 모든 공백 문자는 하나의 공백 문자를 의미하기 때문에 줄바꿈이든 여러 공백 문자든 모두 하나의 공백 문자로 렌더링됩니다.
br 태그를 이용한 줄바꿈은 간격, 여백을 설정하는 용도로 사용해서는 안됩니다. 여백, 간격은 CSS의 margin, padding 속성을 통해 설정합니다.
즉, br 태그는 줄바꿈을 위해서만 사용해야 합니다.

19. `<del> </del>`

삭제된(변경된) 텍스트의 범위를 지정하는 태그입니다(display: inline;).
기본적으로 텍스트 중앙에 줄이 그어져 화면에 표시됩니다(text-decoration: line-through).
속성 의미 값
cite 변경을 설명하는 리소스의 URI URI
datetime 변경이 일어난 유효한 날짜 Date

속성	의미	값
cite	변경을 설명하는 리소스의 URI	URI
datetime	변경이 일어난 유효한 날짜	Date

20. `<ins> </ins>`

새로 추가된(변경된) 텍스트 범위 설정(display: inline;).
기본적으로 텍스트에 밑줄이 그어져 화면에 표시됩니다(text-decoration: underline).
속성 의미 값
cite 변경을 설명하는 리소스의 URI URI
datetime 변경이 일어난 유효한 날짜 Date

속성	의미	값
cite	변경을 설명하는 리소스의 URI	URI
datetime	변경이 일어난 유효한 날짜	Date

김동현

Frontend Dev

이전 포스트

문자 콘텐츠

다음 포스트

인라인 텍스트

HTML5

1. `<a> </a>`

href 주소 표기법

WAI-AIRA API

2. `<abbr> </abbr>`

3. `<b> </b>`

4. `<mark> </mark>`

5. `<em> </em>`

6. `<strong> </strong>`

7. `<i> </i>`

8. `<dfn> </dfn>`

9. `<cite> </cite>`

10. `<q> </q>`

11. `<u> </u>`

12. `<code> </code>`

13. `<kbd> </kbd>`

14. `<sup> </sup>`

15. `<sub> </sub>`

16. `<time> </time>`

17. `<span> </span>`

18. `<br />`

19. `<del> </del>`

20. `<ins> </ins>`

문자 콘텐츠

멀티미디어

0개의 댓글

인라인 텍스트

HTML5

1. <a> </a>

href 주소 표기법

WAI-AIRA API

2. <abbr> </abbr>

3. <b> </b>

4. <mark> </mark>

5. <em> </em>

6. <strong> </strong>

7. <i> </i>

8. <dfn> </dfn>

9. <cite> </cite>

10. <q> </q>

11. <u> </u>

12. <code> </code>

13. <kbd> </kbd>

14. <sup> </sup>

15. <sub> </sub>

16. <time> </time>

17. <span> </span>

18. <br />

19. <del> </del>

20. <ins> </ins>

문자 콘텐츠

멀티미디어

0개의 댓글

1. `<a> </a>`

2. `<abbr> </abbr>`

3. `<b> </b>`

4. `<mark> </mark>`

5. `<em> </em>`

6. `<strong> </strong>`

7. `<i> </i>`

8. `<dfn> </dfn>`

9. `<cite> </cite>`

10. `<q> </q>`

11. `<u> </u>`

12. `<code> </code>`

13. `<kbd> </kbd>`

14. `<sup> </sup>`

15. `<sub> </sub>`

16. `<time> </time>`

17. `<span> </span>`

18. `<br />`

19. `<del> </del>`

20. `<ins> </ins>`