모행

[웹프로그래밍 기초강좌 - HTML 04]

HTML 글자관련 태그 알아보기​

(HTML 텍스트테그)

(1) 제목 태그 (h1~h6)

- HTML 제목은 h1부터 h6 태그로 정의됩니다.

- <h1>는 주요 표제 (가장중요)에 사용되야하며, 그다음에 <h2>.....<h6> 까지 순서대로 사용되어야합니다.

- 검색엔진은 제목을 사용하여 웹 페이지의 구조와 내용을 색인합니다.

* 브라우저는 제목 앞뒤에 일부공백을 자동추가 합니다.

* 제목태그는 HTML 제목에만 사용해야합니다. 텍스트를 굴게 만들거나 크게 만들기 위해 사용하면 안됩니다.

- 각 HTML 제목 태그에는 기본 크기가 있습니다. ( 추후 CSS로 변경은 가능 )

​

<코드 작성>

  <h1>h1 글자 태그입니다.</h1>
  <h2>h2 글자 태그입니다.</h2>
  <h3>h3 글자 태그입니다.</h3>
  <h4>h4 글자 태그입니다.</h4>
  <h5>h5 글자 태그입니다.</h5>
  <h6>h6 글자 태그입니다.</h6>

<실행화면>

(2) 본문 태그

<예재코드>

  <p>안녕하세요 p태그입니다.
  줄바꿈을 해도 줄바꿈이 되지않습니다.</p>
  <hr />
  <p>
    안녕하세요. p태그입니다 <br />
    줄바꿈 확인하기.
  </p>
  <pre>
    안녕하세요 pre태그입니다.
    줄바꿈을 하면
    줄바꿈 한대로 출력됩니다.
  </pre>

<실행화면>

<a href="https://molra0000.tistory.com/">모행블로그 바로가기</a>

1.  앵커태그 <a>는 하이퍼링크를 정의합니다.
2.  href 속성으로 이동할 페이지의 url을 지정합니다.
3.  기본적으로 링크된 페이지는 현재 브라우저 창에서 표시됩니다. 이를 변경하려면 링크에 대해 다른 대상을 지정해야합니다
4. target 속성 지정으로 링크된 페이지를 여는 방법을 변경할 수 있습니다.

<예재코드>

<a href="https://blog.naver.com/molra0000" target="_self;">모행블로그 바로가기</a>
<a href="https://blog.naver.com/molra0000" target="_blank;">모행블로그 바로가기</a>
<a href="https://blog.naver.com/molra0000" target="_parent;">모행블로그 바로가기</a>
<a href="https://blog.naver.com/molra0000" target="_top;">모행블로그 바로가기</a>

* 각 속성별로 링크된 페이지를 여는 방법이 달라지니, 직접 코드를 작성하고 실행하여 확인을 해보셔야 합니다.

<예재코드>

<!--기본글자-->
<p>p태그 : Hello Wolrd!</p>
<!--<b>글자태그--> <hr>
<b>b태그 : Hello World!</b>
<!--<i>글자태그--> <br>
<i>i태그 : Hello World!</i>
<!--<small>글자태그--> <br>
<small>small태그 : Hello World!</small>
<!--<sub>글자태그--> <br>
<sub>sub태그 : Hello World!</sub>
<!--<sup>글자태그--> <br>
<sup>sup태그 : Hello World!</sup>
<!--<del>글자태그--> <br>
<del>del태그 : Hello World!</del>
<!--<ins>글자태그--> <br>
<ins>ins태그 : Hello World!</ins>

<실행화면>

1. 특수문자가 포함된경우 브라우저에서 웹소스의 일부로 인식하여 오류가 발생할 수 있기때문에 특수문자를 문자표현으로 대체하여 사용합니다.
2. 예를 들어 <>안에 코드 형식으로 쓰고 그대로 보여주고 싶어도 코드로 인식하여 화면에 표시가 안되는 경우가 발생하기때문에 사용됩니다.
3. 전체 특수 문자 표 보러가기 : https://dev.w3.org/html5/html-author/charref

- 사실 특수문자를 모두 외워서 사용할 필요는 없습니다.

- 이미 HTML을 실습하기위해 다운받은 ATOM에디터나 브라켓 등 에디터에서 자동으로 생성되어 선택할 수 있습니다.