티스토리 뷰

Dev WEB /HTML

HTML 간단한 몇 가지 태그 사용해보기

Deok.ME 2015. 10. 14. 12:13



 지난번에는 간단히 HTML 문서를 만들어 봤는대요. 이번에는 몇가지 태그에 대해 알아보고 사용해보겠습니다.



2015/09/14 - [웹 개발/HTML] - HTML 이란? 첫 HTML 문서 작성하기



우선 HTML 문서는 아래의 기본적인 규칙들을 따라 주셔야 합니다.


 1. 문서의 처음은 <!DOCTYPE html> 로 정의해줄 것 ( 문서의 HTML 버전에 따라 다르지만 앞의 DOCTYPE html 는 HTML 5 임을 뜻합니다. )

 2. 문서는 <html> </html> 의 안에 넣어 주도록합니다.

 3. 사용자들이 보는 부분은 <body></body> 에 작성됩니다.

 4. 아래는 최종 결과 예제 파일 입니다.


html example.zip





이제 간단히 태그와 코드를 보도록 하겠습니다.


<!DOCTYPE html>
<html>
<body>

<!-- H 태그 : 굳이 번역하자면 표제 태그이지만 그냥 H 태그라고 부릅니다. -->
<h1>Heading Tag</h1>

<!-- 구문 태그 : 구문을 나타내는 태그이며 H 태그와 마찬가지로 P 태그라고 부릅니다. -->
<p>Paragraph Tags</p>

<!-- 이미지 태그 : HTML 에 이미지를 표시할때 사용하는 태그 입니다. -->
<img src='./php_logo.png'/>

</body>
</html>


 위의 문서에 간단히 주석과 함께 문서를 만들어 봤습니다. 

  * 주석이란? 주석은 개발자 혹은 다른 프로그램을 보는 사람이 프로그램에 관해 알아볼수 있도록 정보를 작성해 놓아 두는 것을 말하며 프로그램은 주석으로 처리된 부분을 처리 하지 않습니다.

  * img 태그는 해당 파일이 필요합니다. url 의 형태로 가져올 수 있습니다.


 주석에서 적어 놓은 것처럼 해당 태그들은 각각의 역할을 합니다. 아래는 위의 문서의 결과 입니다.



아래는 위에서 사용된 태그들에 관해서 간단히 알아보겠습니다.


H 태그 - Heading 


  HTML 에서 표제는 <h1> </h1> 부터 <h6> </h6> 태그 사이에 작성됩니다.


<h1>Heading Tag 1</h1>
<h2>Heading Tag 2</h2>
<h3>Heading Tag 3</h3>
<h4>Heading Tag 4</h4>
<h5>Heading Tag 5</h5>
<h6>Heading Tag 6</h6>


아래는 결과 입니다.



P 태그 - Paragraph 

  

  HTML 에서 구문은 <p> </p> 사이에 작성됩니다.


<p>Paragraph Tags</p>


  아래는 위의 p 태그의 결과 입니다.



Img 태그 - Image 


 Img 태그는 HTML 에서 이미지를 표시해주는 역할을 합니다. src 에는 이미지의 주소가 들어 갑니다.


<img src='./php_logo.png' title="PHP Logo" alt="PHP Logo" width="150" height="144"/>


 img 태그에는 src 뿐만 아니라 title ( 말풍선 ) alt ( 이미지가 없을때 나올 텍스트 ), width ( 강제로 지정할 가로 길이 ). height ( 강제로 지정할 세로길이 ) 과 같은 속성이 더 추가될 수 있습니다.


 아래는 결과 입니다. 마우스를 올려 놓고 있으면 아래와 같이 title 이 뜨는 것을 확인하실 수 있습니다.



 후에 각각의 태그들에 관해서 좀더 자세히 설명드리겠습니다. 아래는 예제 파일입니다.


html example.zip


즐거운 개발되시기 바랍니다.

저작자표시 비영리 변경금지

'Dev WEB > HTML' 카테고리의 다른 글

HTML 이란? 첫 HTML 문서 작성하기  (0) 2015.09.14
웹에서 Font Awsome 을 이용하여 특수문자 사용하기  (0) 2015.06.28
웹 한글 폰트 깔끔한 '나눔폰트' 를 구글 폰트에서 찾아서 사용하자  (0) 2015.03.07
HTMl Metatag 를 이용하여 다른 페이지로 이동 (리다이렉트) 시키기  (0) 2015.03.05
HTML DIV 와 같은 박스 요소 중앙에 배치하기  (0) 2015.03.03
공유하기 링크
댓글