내용이 안 보인다면 쿠키/캐시를 지우고 새로고침 하세요!
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

게시글

강좌3 - HTML&DOM - 2년 전 등록 / 8달 전 수정

HTML 제목, 문단, 서식, 줄, 주석 태그

조회수:
0
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

안녕하세요. 이번 시간부터 본격적으로 태그들에 대해 알아보겠습니다. 태그 종류가 많으니까 오늘은 글에 대한 태그를 먼저 하겠습니다. 웹사이트는 대부분 정보를 담고 있는만큼, 태그로 글을 알맞게 표현하는 게 매우 중요합니다.

제목

제목부터 알아보겠습니다. 제목 태그는 중요도에 따라 h1, h2, h3, h4, h5, h6이 있습니다. h1이 제일 중요한 거고요. h6가 제일 중요하지 않은 제목입니다. 크게 h1은 제목, h2는 부제목, h3은 소제목 이런 식으로 생각하시면 될 거 같습니다. 제목의 위 아래에는 자동으로 공백이 생깁니다.

<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>

문단

문단은 글의 한 문단과 일치합니다. 제 포스팅도 문단들로 이루어져 있습니다. 문단 위 아래에는 자동으로 공백이 생깁니다.

<p>가나다라마바사아자차카타파하ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz</p>
<p>가나다라마바사아자차카타파하ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz</p>

주석

주석은 HTML 문서에 대한 설명을 적는 부분입니다. 또는 임시로 태그를 보이지 않게 하기 위해서도 사용합니다. 웹 페이지상에는 보이지 않지만 소스에는 보입니다. 페이지가 복잡해지면 주석을 달아 설명을 적어두세요. <!-- 로 시작해서 -->로 끝납니다. 여러 줄을 한 번에 주석으로 만들 수도 있습니다.

<!-- 주석입니다 -->
<!-- <p>저는 보이지 않습니다</p> -->

줄에 관한 태그입니다. HTML은 엔터를 인식하지 않습니다. 아무리 엔터를 쳐도 띄어쓰기 하나로 인식되기 때문에 엔터에 해당하는 태그를 넣어주어야합니다. 엔터에 해당하는 태그는 br이고 가로줄에 해당하는 태그는 hr입니다.

<p>엔터를 아무리쳐도
띄어쓰기 한 칸
</p>
<hr />
<p>br을 사용하면<br /><br />한 줄도 여러 엔터</p>

서식

서식 태그는 단어나 문자의 서식을 결정합니다. 여러 종류가 있고 종류마다 용도가 다르기 때문에 주의깊게 보셔야합니다. 참고로 b와 strong, i와 em은 무슨 차이가 있냐 하시겠지만 브라우저가 인식할 때 조금 다릅니다. b와 i는 그저 굵은 글씨, 기울어진 글씨일 뿐이지만, strong와 em은 각각 브라우저가 중요한 내용이라고 인식합니다.

<b>굵은 글씨</b><br />
<strong>굵고 중요한 글씨</strong><br />
<i>기울어진 글씨</i><br />
<em>기울어지고 중요한 글씨</em><br />
<q>짧은 인용문</q><br />
<blockquote>인용문</blockquote><br />
<small>조금 작은 글씨</small>
<mark>하이라이트</mark>
<del>삭제된 글씨</del>
<ins>밑줄 글씨</ins>
<sub>아래첨자</sub>
<sup>위첨자</sup><br />
<address>연락처</address><br />
<cite>작품 제목</cite><br />
<abbr title="JavaScript">JS</abbr> <!-- 약어를 표현합니다. 태그 위에 마우스를 올리면 title 속성의 설명이 뜹니다. -->
<pre>
  <code>
    var <var>hello</var> = "world";
    var <var>html</var> = "wonderful";
  </code>
<pre> <!-- code 태그는 컴퓨터 코드를 표현합니다. pre 태그는 공백을 그대로 표현합니다. var 태그는 변수를 표현합니다 -->
<kbd>인풋</kbd>
<samp>아웃풋</samp>

지금까지의 태그들이 어떻게 HTML으로 표현되는지 한 번에 보여드리겠습니다. 사실 디자인은 CSS가 담당하기 때문에 너무 신경쓰지 않으셔도 됩니다. 다만 용도에 맞는 코드를 사용하세요. HTML5에서부터는 브라우저가 HTML에서 어떤 부분이 무슨 역할을 하는지 태그를 통해 인식하기 때문에 적절한 태그를 사용하는 게 중요합니다.

undefined

다음 시간에는 링크, 이미지, 테이블, 리스트에 대해 알아보겠습니다!

투표로 게시글에 관해 피드백을 해주시면 많은 도움이 됩니다. 오류가 있다면 어떤 부분에 오류가 있는지도 알려주세요! 잘못된 정보가 퍼져나가지 않도록 도와주세요.
Copyright © 2016- 무단 전재 및 재배포 금지

댓글

2개의 댓글이 있습니다.
일 년 전
안녕하세요 홈페이지 제작을 배워볼려고 들어와서 하고있는데 메모장에 붙혀놓고 html으로 확장자변경하면 한글로 써져있는부분이 ��Dz 이런식으로 나오네요.. 이건 어떻게해결해야하나요??
일 년 전
head 태그 안에 <meta charset='utf-8' />을 넣어주셔야 합니다.
2년 전
kbd 와 samp 가 뭐하는 태그인지 잘 모르겠네용
2년 전
사실 거의 쓰이지는 않는데요. 키보드 입력를 나타날 때 kbd태그를 쓰고 console.log같은 컴퓨터에서 보여주는 결과를 나타날 때는 samp태그를 씁니다.