본문으로 바로가기

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

category Dev WEB /HTML 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


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

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

댓글을 달아 주세요

튜토리얼북
블로그 이미지 눈싹 님의 블로그
VISITOR 오늘525 / 전체556,032