앞서 살펴본 텍스트 입력과 관련된 태그를 계속해서 살펴보도록 하겠습니다. 기억이 나지 않는다면, 다시 한번 체크해 둡시다.

2. 내용 입력하기(1) - 텍스트 입력 1

이제부터 본격적으로 html 웹 문서 내에 내용을 입력하는 과정을 살펴보겠습니다. 우선은, 가장 기본 중의 기본이라 할 수 있는 텍스트 입력에 대해 살펴볼 것입니다. 굳이 설명이 필요한 내용인

nozeroslope.tistory.com

○ <blockquote> - 인용문

어떤 콘텐츠를 작성할 때, 다른 출처에서 직접인용을 하여 표시하게 되는 경우가 있습니다. 예를 들어 따옴표나 별도의 박스 형태로 누군가의 발언이나 논문의 단락을 직접 표시하는 경우가 있겠죠. 여러 가지 이유로, 브라우저 상에서 특정 단락이나 영역이 '인용문이다'라고 인식할 수 있는 방법이 있습니다. 바로 <blockquote> 태그를 사용하면 됩니다.

어떤 문장을 <blockquote> </blockquote> 태그 내에 작성하게 되면, 자동으로 인용문으로서 인식하고 들여 쓰기를 시행하게 됩니다. 스크린 리더(screen reader)에서도 구분하여 인식하게 됩니다. 예시를 살펴보겠습니다.

<h1>제목 샘플</h1>
<p>첫 번째 단락입니다. 예시는 이해가 되시나요?</p>
<blockquote>단락을 이런 식으로 구성하면서, 임의로 줄바꿈<br>을 넣을 수 있습니다.</blockqute>
<p>p태그와 br태그의 차이점을<br>잘 이해하면서 공부합시다.</p>

위와 같은 형태의 인용문 구분은, 티스토리 블로그 글 에디터를 사용해 보신 분이라면 익숙하실 것입니다.

○ , - 굵은 글씨

어떤 글씨를 굵게 표시하는 태그는 와 을 사용할 수 있습니다. 사실 사용자의 눈에는 두 가지 태그 모두 구분이 가지 않을 정도로 비슷한 결과를 보여줍니다. 두 태그의 차이는, 앞서 말했듯 스크린 리더(screen reader)에서 인식의 차이입니다. 태그는 스크린 리더에서 경고, 주의 등의 의미를 담아 강조해서 읽게 됩니다.

<h1>제목 샘플</h1>
<p>첫 번째 단락입니다. <b>예시</b>는 이해가 되시나요?</p>
<p>단락을 이런 식으로 구성하면서, 임의로 줄바꿈<br>을 넣을 수 있습니다.</p>
<p>p태그와 br태그의 <strong>차이점을</strong><br>잘 이해하면서 공부합시다.</p>

제목 샘플

첫 번째 단락입니다. 예시는 이해가 되시나요?

단락을 이런 식으로 구성하면서, 임의로 줄바꿈
을 넣을 수 있습니다.

p태그와 br태그의 차이점을
잘 이해하면서 공부합시다.

○ , - 기울인 글씨

흔히 워드프로세서 등에서 '이탤릭'으로 표시하는 기울인 글씨를 표시하는 태그입니다. 와 의 관계처럼, 이 역시 두 개의 태그가 존재합니다. 은 emphasis를 의미하고, 는 italic을 의미하죠. 굳이 의미를 부여하자면 은 의미적으로 '강조'하기 위해 사용하며 는 다른 텍스트와 구분하기 위해서 사용하는 태그입니다.

<h1>제목 샘플</h1>
<p>첫 번째 <em>단락</em>입니다. <b>예시</b>는 이해가 되시나요?</p>
<p>단락을 이런 식으로 구성하면서, 임의로 줄바꿈<br>을 넣을 수 있습니다.</p>
<p><i>p태그</i>와 <i>br태그</i>의 <strong>차이점을</strong><br>잘 이해하면서 공부합시다.</p>

○ 그 밖의 텍스트 관련 태그

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p><u>밑줄을 표시하는 태그는 u입니다.</u></p>
    <p><ins>새로운 내용 삽입 태그는 ins입니다.</ins></p>
    <p><del>삭제를 표시하는 태그는 del입니다.</del></p>
    <p><s>취소선을 표시하는 태그는 s입니다.</s></p>
    <p><code>function(){};</code></p>
    <p><abbr title="Internet Of Things">IOT</abbr></p>
    <p>참고한 내용을 표시할 때는, 출처 <cite>나무위키</cite> 이런식입니다.</p>
    <p>부가 정보를 조그맣게 표시할 때 씁니다<small>이런식으로</small></p>
    <p>아래 첨자를 써보죠. 물의 화학기호는 H<sub>2</sub>O 입니다.</p>
    <p>윗 첨자를 써보겠습니다. E=mc<sup>2</sup></p>
</body>
</html>

Document

밑줄을 표시하는 태그는 u입니다.

새로운 내용 삽입 태그는 ins입니다.

~~삭제를 표시하는 태그는 del입니다.~~

~~취소선을 표시하는 태그는 s입니다.~~

function(){};

IOT

참고한 내용을 표시할 때는, 출처 나무위키 이런식입니다.

부가 정보를 조그맣게 표시할 때 씁니다이런식으로

아래 첨자를 써보죠. 물의 화학기호는 H₂O 입니다.

윗 첨자를 써보겠습니다. E=mc²

'Programming > HTML+CSS' 카테고리의 다른 글

2. 내용 입력하기(3) - 표 생성하기 1 (0)	2023.02.24
2. 내용 입력하기(2) - 목록 생성하기 (0)	2023.02.23
2. 내용 입력하기(1) - 텍스트 입력 1 (0)	2023.02.22
1. HTML문서의 구조(2) - 시맨틱 태그 (0)	2023.02.20
1. HTML문서의 구조(1) - 기본 태그 (0)	2023.02.19

머리는 나쁘지만 공부가 취미입니다

2. 내용 입력하기(1) - 텍스트 입력 2

제목 샘플

'Programming > HTML+CSS' 카테고리의 다른 글

티스토리툴바

2. 내용 입력하기(1) - 텍스트 입력 2

제목 샘플

'Programming > HTML+CSS' 카테고리의 다른 글

'Programming/HTML+CSS' Related Articles

티스토리툴바