[HTML]텍스트 입력02 - <blockquote>, , , , , 그 밖에 텍스트 관련 태그

SolChan Kim·2024년 3월 21일

텍스트(Text) 입력

웹 사이트에서는 텍스트로 정보를 쉽게 전달할 수 있다.
- 신문, 블로그, 쇼핑몰 상세 페이지 등...
텍스트는 UTF-8문자 세트와 같은 컴퓨터 코드로 정의되는 글자를 뜻한다.

`인용문 : <blockquote>` 태그

다른 사람의 말 or 책의 내용을 인용할 때 큰 따옴표("")를 사용한하는 것처럼 웹에서는 <blockquote>태그를 사용하여 인용문을 만든다.
기본형 : <blockquote>인용문</blockquote>

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>인용문 사용하기</title>
</head>
<body>
  <h2 style="color: green;">수박(watermelon)</h2>
  <!--웹 편집기에서 줄을 변경해도 웹 페이지에서는 한 줄로 표시됨-->
  <p>수박(watermelon) 또는 서과(西瓜)는 쌍떡잎식물 박목 박과에 속하는 덩굴성 한해살이풀이며, 
    학명은 Citrullus lanatus. 전 세계에서 두 번째로 가장 많이 재배되는 과일이다.</p>
  <blockquote>
    대표적인 여름 제철 채소 또는 과일로 여름을 상징하는 이미지가 있다.<br>
    한 마디로 여름 과일의 대명사. 하지만, 들기가 무겁고, 자르기가 훨씬 힘든 과일이다.
  </blockquote>
</body>
</html>

`텍스트 굵게 표시 : , ` 태그

두 태그의 차이점 : 화면 낭독기의 기능에서 나타남
- 태그 : 경고, 주의사항처럼 중요한 내용을 강조할 때
- 태그 : 단순하게 글자만 굵게 표시할 때
기본 문법

<strong>굵게 강조할 내용</strong>
<b>굵게 표할 내용</b>

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>텍스트 굵게 표시</title>
</head>
<body>
  <h1 style="color: brown;">산행안전사고</h1>
  <h2>산에서 캠핑할 때</h2>
  <p>야생동물이나 곤충으로부터 피해를 보지 않도록 <b>주의</b>하고, <strong>뱀 등이 나타나면 절대로 공격을 하면 안 된다.</strong></p>
</body>
</html>

`기울인 텍스트 입력 : , ` 태그

태그 : 문장에서 흐름상 특정 부분을 강조할 때 사용한다.
태그 : 마음속의 생각, 용어, 관용구 등을 사용할 때 사용한다.
기본문법

<em>이텔릭체로 강조할 내용</em>
<i>이텔릭체로 표시할 내용</i>

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>기울인 텍스트 입력</title>
</head>
<body>
  <h1>레드향</h1>
  <p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
  <p>레드향은 <em>한라봉과 귤을 교배</em> 한 것으로</p>
  <p>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
  <p><i>비타민 C</i>와 <i>비타민 P</i>가 풍부해
    <strong>혈액순환, 감기예방</strong>등에 좋은 것으로 알려져 있다.</p>
</body>
</html>