WEB-HTML-HTML 내용 입력하기

카테고리 : WEB >> Html


HTML에 내용 입력하기

내용 입력하기

<hn> 태그 : 제목을 나타내는 태그

다른 텍스트보다 크고 굵게 표현이 가능한 제목 태그 <h1>이 가장 큰 태그이고 <h6> 순으로 점점 크기가 작아진다.

  • 기본형
<hn> 제목 입력하기 </hn>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="YooJin Lee">
  <title>제목 태그</title>
</head>
<body>
  <h1>h1태그입니다.</h1>
  <h2>h2태그입니다.</h2>
  <h3>h3태그입니다.</h3>
  <h4>h4태그입니다.</h4>
  <h5>h5태그입니다.</h5>
  <h6>h6태그입니다.</h6>
</body>
</html>

줄 바꾸는 <br> 태그와 단락을 만드는 <p> 태그

  • 기본형
<p> 내용을 입력하기 </p>
<br>
  • <p> 단락 태그를 사용한 경우
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="YooJin Lee">
  <title>제목 태그</title>
</head>
<body>
  <p>안녕하세요??</p>
  <p>동해 물과 백두산이 마르고 닳도록
    하느님이 보우하사 우리나라 만세.
    무궁화 삼천리 화려 강산
    대한 사람, 대한으로 길이 보전하세.</p>
</body>
</html>

  • <br> 태그를 사용하여 원하는 위치에 줄바꿈 사용하기
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="YooJin Lee">
  <title>제목 태그</title>
</head>
<body>
  <p>안녕하세요??</p>
  <p>동해 물과 백두산이 마르고 닳도록
    하느님이 보우하사 우리나라 만세.
    무궁화 삼천리 화려 강산
    대한 사람, 대한으로 <br>길이 보전하세.</p>    //<br>태그 사용하기
</body>
</html>

인용 태그 <blockquote>

다른 텍스트보다 약간의 들여쓰기가 들어간다.

  • 기본형
<blockquote> 인용문 삽입하기 </blockquote>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="YooJin Lee">
  <title>제목 태그</title>
</head>
<body>
  <p>안녕하세요??</p>
  <p>동해 물과 백두산이 마르고 닳도록
    하느님이 보우하사 우리나라 만세.</p>
  <blockquote>무궁화 삼천리 화려 강산
    대한 사람, 대한으로 <br>길이 보전하세.</blockquote>
</body>
</html>

텍스트 굵게 표시하기 <strong>, <b> 태그

구분하는 이유 : 화면 낭독기의 기능 차이

  • 기본형
<strong> 굵게 강조 </strong>    //경고문 같은 중요한 내용을 강조 표시
<b>굵게 표시</b>                //단순 글자 굵게 표시

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="YooJin Lee">
  <title>제목 태그</title>
</head>
<body>
  <p>안녕하세요??</p>
  <p>동해 물과 <b>백두산이</b> 마르고 닳도록  //백두산 강조 표시
    하느님이 보우하사 우리나라 만세.</p>
  <blockquote>무궁화 삼천리 화려 강산
    <strong>대한 사람,</strong> 대한으로 <br>길이 보전하세.</blockquote>      //대한 사람 강조 표시
</body>
</html>

텍스트 기울이기 <em>, <i> 태그

  • 기본형
<em>이탤릭채로 강조할 텍스트</em>      // 특별히 강조하고 싶은 부분
<i>이탤릭채로 기울일 텍스트</i>        // 관용구, 생각 등 기울이고 싶은 부분

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="YooJin Lee">
  <title>제목 태그</title>
</head>
<body>
  <p>안녕하세요??</p>
  <p>동해 물과 <b>백두산이</b> 마르고 닳도록
    하느님이 보우하사 <em>우리나라 만세.</em></p>   //em 기울이기 태그 사용
  <blockquote><i>무궁화 삼천리</i> 화려 강산        //i 기울이기 태그 사용
    <strong>대한 사람,</strong> 대한으로 <br>길이 보전하세.</blockquote>
</body>
</html>

부가 정보처럼 텍스트 작게 표시 <small> 태그

<p>10000원 <small>(부가세 별도)</small></p>

아래 첨자 표시 <sub>, 위 첨자 표시 <sup> 태그

<p>CO<sub>2</sub></p>
<p>E = mc<sup>2</sup></p>

밑줄 표시 <u> 태그

<p><u>하하</u>안녕하세요???</p>

출처

  • (고경희, ⌜Do it! HTML+CSS+자바스크립트 웹 표준의 정석⌟, 이지스퍼블리싱, 2021)을 학습하고 개인 학습용으로 정리한 내용입니다.

© 2021. All rights reserved.

Powered by __YJ__