코드 그라데이션

2. 텍스트 입력하기 본문

Front/Mega-HTML

2. 텍스트 입력하기

완벽한 장면 2023. 5. 12. 00:49

1) <hn> 태그 : 제목을 나타냄.

  • h는 제목을 뜻하는 heading을 줄인 말이다.
  • n의 자리에는 1~6의 숫자가 들어가며 제목 텍스트를 크기별로 표시할 수 있다.
  • <h1> >>>>>> <h6> : 크기
  • 닫는 태그가 반드시 필요하다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>H태그</title>
</head>

<body>
    <h1>뉴진스</h1>
    <h2>민지</h2>
    <h3>해린</h3>
    <h4>다니엘</h4>
    <h5>하니</h5>
    <h6>혜인</h6>
</body>
</html>

 

실행 결과

 

2) <p> : 텍스트 단락 생성

  • <p>   </p> 사이에 텍스트를 입력하면 텍스트 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어진다.
  • 여기서 주의할 점은 편집기에서 줄을 바꾸더라도 웹 브라우저에서는 한 줄로 표시된다는 것.

3) <br> : 줄을 변경함

  • 단독으로 사용하므로 닫는 태그가 필요 없음.

예제 - h1 태그와 p 태그 사용

<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>Hello World</title>
    </head>
    <body>
        <h1>Hello!!</h1>
        <p>Java</p>
        <p>쉬워요</p>
        <p>스프링 쉬워요.</p>
    </body>
</html>

실행 결과

 

 

4) <blockquote> : 인용문 작성 시 사용

  • 다른 텍스트보다 약간 들여써짐.

예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>가사 소개 페이지</title>
</head>
<body>
  <h1>비밀정원</h1>
  <p>난 아직도 긴 꿈을 꾸고 있어</p>
  <p>그 어떤 이에게도 말하지 못했던 <br>아침 햇살이 날 두드리며 Hello 매일 머물렀다 가는데 모르지</p>
  <blockquote>
    내 안에 소중한 혼자만의 장소가 있어 <br> 
    아직은 별거 아닌 풍경이지만 <br> 
    조금만 기다리면 곧 만나게 될 걸
  </blockquote>
  <h2>조금만 기다리면 알게 될 거야</h2>
  <h2>너의 비밀정원</h2>
</body>
</html>

실행 결과

 

 

5) <strong> , <b> : 텍스트를 진하게(굵게) 표시

  • 전자는 중요한 내용을 강조해야 할 때,
  • 후자는 단순히 글자만 굵게 표시할 때 사용
  • 화면 낭독기는 전자를 강조해서 읽어 준다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <title>가사 소개 페이지</title>
</head>

<body>
  <h1>소원을 말해봐</h1>
  <p>니 맘속에 있는  <b>작은 꿈</b>을 말해 봐</p>
  <p>니 머리에 있는 이상형을 그려 봐<br>그리고 나를 봐 난 너의 Genie야 꿈이야 Genie야</p>
  <p>드림카를 타고 달려 봐<br> 넌 내 옆자리에 앉아 그저 내   <strong>이끌림 </strong> 속에 모두 던져</p>
  <h2>소원을 말해 봐</h2>

</body>
</html>

 

실행 결과

 

6) <em> , <i> : 기울인 텍스트 입력

  • 전자는 문장에서 흐름상 특정 부분을 강조하고 싶을 때 사용 (문장 중에서 특별히 강조하고 싶은 부분)
  • 후자는 마음 속의 생각이나 관용구에 사용(단순히 다른 텍스트와의 구별 위함)

예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>가사 소개 페이지</title>
</head>
<body>
  <h1>비밀정원</h1>
  <p>난 아직도 긴 꿈을 꾸고 있어</p>
  <p>그 어떤 이에게도 말하지 못했던 <br><i>아침 햇살</i>이 날 두드리며 Hello 매일 머물렀다 가는데 모르지</p>
  <p><em>내 안에 소중한 혼자만의 장소가 있어</em> <br> 
    아직은 별거 아닌 풍경이지만 <br> 
    조금만 기다리면 곧 만나게 될 걸</p>

  <h2>조금만 기다리면 알게 될 거야</h2>
  <h2>너의 비밀정원</h2>
</body>
</html>

 

실행 결과

 

 

다양한 텍스트 관련 태그

 

예제 - 다양한 텍스트 관련 태그 활용

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <title>가사 소개 페이지</title>
</head>
<body>
  <h1>하입 보이</h1>
  <p>잠에 들려고, 잠에 들려 해도 <b>니 생각</b> 또 새벽 세시 uh-oh.</p>
  <p>
    알려줄 거야 <em>they can't have you no more </em>봐봐, 여기 내 이름 써있다고<br>누가 내게 뭐래던 남들과는 달라 넌
  </p>
  <p>
    <i>Oh, baby</i>(baby) <i>예민하대</i>나 lately<br>
    너 없이는 매일 매일이<sup>yeah</sup> <ins> boy</ins> 눈을 감아<sub>ah-ah</sub>느껴봐<del>Take him to the sk-y-y-y-y-y</del> boy.
  </p>
  <h2>Hype boy 너만 원해</h2>
  <h2>Hype boy 내가 전해</h2>
</body>

</html>

 

실행 결과

 

 

예제 - 다양한 텍스트 태그 활용 문제 2

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>All태그</title>
</head>
<body>
    <h1>호랑이</h1>
    <p><small>aaa</small>aaaaaaaaaaaaa<strong>bbb</strong>aaaaaa</p>
    <p>cccccc<em>ddd</em>ccccccccc<br>eeeeeee</p>
    <p>ffffffffff<br>ggggggggggggg</p>
    <blockquote>
        hhhhhh
        <i>jjjjjj</i>iiiii<br>
        <b>oooooo</b>,xxxxxx
        <sup>1</sup> zzzzzz
        <del>wwwwwwwwww</del>
    </blockquote>
    <h2>강아지<sub>2</sub>강아지</h2>
    <h2>고양이</h2>
</body>
</html>

 

실행 결과

728x90

'Front > Mega-HTML' 카테고리의 다른 글

6. input 태그 (1)  (0) 2023.05.12
5. 폼 삽입하기  (0) 2023.05.12
4. 이미지, 오디오, 비디오, 하이퍼링크 삽입하기  (0) 2023.05.12
3. 목록과 표 만들기  (0) 2023.05.12
1. HTML 시작하기, 시멘틱 태그  (0) 2023.05.12
'Front/Mega-HTML' Related Articles more
Comments