웹프로그래밍/html

HTML의 기본구조와 태그사용방법

zelkova 2016. 2. 23. 14:34

<목차로 돌아가기>



HTML의 기본구조


HTML 웹 문서는 크게 머리부, 몸체부로 나눌 수 있다

소스에서<html>, <head>와 같이 산형괄호(<>)로 묶인 것을 태그라고 한다. 이러한 태그들은 사용 용도가 정해져 있어 필요한 곳에 가져와서 사용하면 된다.

 

대부분의 태그는 여는 태그(<태그명>)와 닫는 태그(</태그명>)로 구성되어 적용 범위를 제한한다

아래의 소스가 가장 기본적인 골격이다. 


  1. <HTML><!-- HTML 문서의 시작을 알려줌-->
  2. <HEAD><!-- 머리부의 시작을 알려줌-->
  3.     <TITLE> 제목이 표시됨  </TITLE>
  4. <HEAD>
  5. <BODY> <!-- 몸체부의 시작을 알려줌-->
  6. 가나다라 마바사 아자차카타파하
  7. </BODY> <!-- 몸체부의 끝을알려줌-->
  8. </HTML> <!-- HTML 문서의 끝을 알려줌-->

html기본틀.txt


<html> ... </html>

HTML문서 형식으로 작성되었음을 나타내고 문서의 시작과 끝을알려준다. 홈페이지 문서를 만들 때 제일 먼저 <html> 태그를 적고 ,가장 마지막에 </html> 태그로 닫아줘야 한다. 실행결과에는 변화를 주지 않고 주석과 같이 홈페이지의 시작과 끝을 알려줍니다.



<head>...</head>

머리부임을 알려주는 태그로, <html> 태그의 실행 결과에 변화를 주지 않는다. , <head> 태그 사이에 문서 정보를 입력해 문서 전체를 변화시킬 수 있다. <head> 태그 사이에는 <title>, <meta>, <style>, <script> 태그 등을 삽입할 수 있다.

 


<title>...</title>

타이틀 바에 표시할 문자를<title> 태그와 </title> 태그 사이에 입력한다. <title> 태그 사이에 입력한 내용이 브라우저 상단의 파란색 제목 표시줄에 나타난다.

 


<body>...</body>

몸체부의 시작과 끝을 알려주고 실질적으로 브라우저에 표시될 문서를 기록하는 곳이다. 홈페이지에서 보이는 대부분은 <body>태그 사이에 기록한다. 문자, 그림, 표와 같은 실제로 문서를 구성하게 될 구성 요소를 <body> 태그 사이에 입력한다.



 

HTML 태그 사용방법


태그란

태그는 여자들이 화장할 때 사용되는 다양한 미용 도구에 비유할 수 있다. 맨 얼굴에 각종 미용도구를 이용해 화장하듯이 흰 종이에 검은색 글자만 가득한 홈페이지 문서를 다양한 태그로 화려하게 장식할 수 있다.

 

, 태그는 문서읙 구조와 형태를 표현하는 명령어로서, 브라우저에게 화면에 나타낼 문서를 설명한다. 태그는 산형괄호(<>)안에 <head>처럼 표시해 구분한다.

 

HTML문서에서 사용하는 태그의 형식은 크게 세가지다.

지금은 맛보기 이고 다음 포스팅글에서 자세하게 다루겠습니다.^^

 

복합 태그

내용에 태그를 적용한다.

<태그명> 내용</태그명>

<b> 글자체를 굵게 <b>



속성을 가지는 태그


내용에 태그의 속성을 적용한다.

<태그명 속성값=> 내용 </태그명>

<font size=2> 글자 크기를 2로 </font>



단독 태그


태그가 입력된 곳에서 태그 명령이 적용된다.

<태그명>

<br> 줄 개행(줄바꿈) 태그



태그의 사용 규칙

① 대부분의 태그는 <태그명>...</태그명>과 같이 여는 태그와 닫는 태그를 함께 사용한다.


② 태그명과 속성명, 속성명과 속성명 사이는 한칸씩 띄워준다. 그 외 공백을 두어서는 안된다.


③ 속성명의 값은 ‘=’ 기호를 사용하여 표시한다.


④ 값이 숫자이거나 한 단어일 경우는 큰따옴표(“ ”)를 생략할 수 있지만 값이 두 단어 이상일 경우는 반드시 “”로 묶어서 표시한다.

<font size=7 face="arial black" color=blue>어서옵쇼!</font>


⑤ 태그에는 <font>태그처럼 속성이 있는 태그와 <b> 태그처럼 속서이 없는 태그가 있다.


⑥ <font> 태그처럼 여러 속성 중 반드시 하나 이상 사용해야 하는 태그와 <p> 태그처럼 속서이 있지만 생략해도 되는 태그가 있다.


⑦ <p>,<br>태그와 같이 여는 태그만 독립적으로 존재하는 태그도 있다.


⑧ 태그를 중첩해서 사용할 경우 열어준 순서와 반대로 가장 마지막에 입력한 태그부터 닫아준다.

<태그1><태그2>내용</태그2></태그1>


  1. <html>
  2. <head>
  3.    <title>태그사용해보기</title>
  4. </head>
  5. <body>
  6.    <font size=2><b>HTML을 연습해 봅시다^^</b></font>
  7.     br태그를 안쓰면 이렇게됨
  8.    <br> br태그를 쓰면 이렇게 한칸 내려가구요^^
  9. </body>
  10. </html>

태그 실행해 보기.txt



<HEAD>태그 사이에 사용하는 태그

대부분의 태그는 <body>사이에 기록한다. 하지만 <head>태그 사이에 기록하는 <title>, <meta>, <script>, <style> 태그를 간략히 알아보자.


<title> 태그


홈페이지를 대표할 수 있는 문서 제목을 지정한다.

<title>문서 제목</title>

주로 문서 내용을 나타내는 제목을 적어준다. <title> 태그에 기록되는 제목은 웹 브라우저의 타이틀 바에 표시되며다른 사용자가 내 홈페이지를 [즐겨찾기]에 추가할 대 등록되는 이름이기도 하다.

 


<meta>태그


문서 정보를 포함하는 태그로사이트 이동화면전환 효과 등 다양한 기능을 포함한다.

<meta 속성명=속성의 종류 속성명=>

<meta>태그는 문서가 로딩되면서 문서의 몸체부를 읽기 전에 먼저 실행되어야 하는 몇 가지 기능을 기록하는 곳이다홈페이지 문서의 글자크기를 제어하고검색엔진에서 내 홈페이지가 검색되도록 하며현재 페이지에서 일정한 시간이 지나면 다른 페이지로 자동으로 이동하도록 하는 등 다양한 역할을 한다.

 


<Style> 태그


문서 전체의 레이아웃을 결정하여 문서에 통일감을준다.

<style type="text/css">

<!--

스타일 형식

//-->

</style>

 

스타일 서식은 <head> 태그 사이에 정의하거나 태그에 style 속성을 지정하여 정의하는데대부분 <head> 태그 사이에 정의한다.

 

스타일시트는 글자색글자체배경색문서 여백행간 등 다양한 서식을 제한없이 사용할 수 있고 홈페이지 문서 전체에 반영할 수 있어 홈페이지를 통일감 있고 일관성있게 한다스타일 시트는 문서 전체의 레이아웃을 결정하므로 <head> 태그 사이에 정의해 먼저 읽혀지도록 한다.


HTML의 기초를 공부하고 Style 태그를 공부하는것이 이해가 빠르다.



<javascript> 태그


페이지를 역동적으로 변화시킨다.

<script language="javaScript">

<!--

스크립트 내용

//-->

</script>


자바스크립트는 HTML 문서와 함께 존재하며 정적인 홈페이지를 역동적으로 변화시킨다실행 시기에 따라서 <body> 태그 사이에 기록하기도 하지만 <head> 태그 사이에 정의하는 것이 보편적이다.


HTML, CSS를 기초를 공부하고 javascript를 공부하는것이 이해가 빠르다.

 



참조

네이버

google

인터넷 프로그래밍 입문

 

반응형

'웹프로그래밍 > html' 카테고리의 다른 글

HTML - 이미지맵  (0) 2013.08.20
html-Meta(장면전환 효과)  (0) 2011.11.27
HTML  (0) 2011.11.26
html-form-(txt,pw)  (0) 2011.03.21
HTML - FORM태그  (0) 2011.02.11