반응형
[Web] Html 이란??!
웹의 기본중의 기본이라 말 할 수 있는!
HTML 에 대해서 설명을 해 볼까 합니다^^!
HTML 이란?
HTML Hypertext Markup Language 의 약자로 간략히 웹 문서를 만들기 위하여 사용하는 가장 기본적인 프로그래밍 언어의 한 종류입니다.
여기서 Hypertext 란 링크로서 한 문서에서 다른 문서로의 이동을 말하며, HTML 은 초기 이러한 하이퍼텍스트를 작성하기 위해 개발되었습니다~!
HTML 구조
HTML에서 사용하는 명렁어는 태그(tag) 라 하며, 꺽쇠갈호 '<>' 를 사용하여 나타내며, 일반적으로 시작태그와 마침(끝)태그의 구조를 가지고 있지만
예외로 마침태그 없이 시작태그로만 되어있는 태그도 있으며 이러한 종료 태그는 슬래쉬문자( / ) 로 되어있습니다~!
그럼 전체적인 구조를 한번 보면
이렇게 되어 있답니다~!
<html> ~ </html> 로 감싸고 있는 구조 안에 각각 <head> 와 <body> 태그가 들어있으며
그 안에는 다시 <meta> 태그와 <title> 태그로 / <p> 태그와 <img> 태그로 되어 있는 형식입니다.
여기서 <html> 태그 앞에 독타입(doctype)이 들어가게 되는데 이 독탑입은 문서형식을 지정하게 되는 부분입니다.
즉, 해당 구조로 태그를 작성 하셨음에도 불구하고 레이아웃이 깨지거나, 잘못된 오류 발생을 방지하기 위해
문서형식을 지정하게 되는 것입니다.
HTML5 에서는 이 DOCTYPE 이 아주 심플하게 지정을 할 수 있는데
<!DOCTYPE html>
이렇게 지정을 하시면 됩니다. 물론 다른 종류의 DOCTYPE을 지정하실 수 있으며, 자신에게 필요한 DOCTYPE을 지정하면 됩니다.
이 모습은 간략하게만 나타낸 형식으로 각각의 태그들에 대해 조금 더 자세히 알아보도록 하겠습니다.
HTML 태그
HTML 공통 특징
1. 태그는 대, 소문자 구분이 없습니다.
2. 모든 태그 명령들은 꺽쇠갈호( '<>' ) 로 구성되어 있습니다.
3. HTML의 확장자는 .html , .htm 입니다.
4. 문서 내에서의 공백은 한칸으로 인식합니다.
5. 주석문은 <!-- 여기가 주석 --> 으로 합니다.
<html> 태그
<html>은 이 문서가 html로 되어 있음을 브라우저(IE, CHROME, FF 등) 에게 알려주는 태그 입니다.
<head>태그
<head> 태그는 문서의 머리말로 이 태그 안에는 문서의 정보 및 문서의 제목 등이 들어가게 됩니다.
<body>태그
<body> 태그는 문서의 내용으로 본문에 해당됩니다. 즉, 지금 우리가 보고있는 이 사이트의 텍스트나 이미지 등이 본문안에서 명시된
내용을 보고 있는 거랍니다~! 이 태그 안에는 다양한 태그들로 구성되어 있으며 많이 쓰는 태그들에 대해 밑에서 알아보도록 하겠습니다.
기본 태그의 골격
기본적으로 태그는 속성을 가질 수 있습니다. 물론 예외적인 태그들이 있지만 지금은 기본적인 태그의 구성을 살펴보도록 하겠습니다.
Ex) <p id="~~" class="~~" name="~~"> 태그의 속성 </p>
예로 위와 같은 태그가 있다고 한다면 이 태그는 id값과 class 값과 name 값에 어떠한 단어를 가지고 있는 태그입니다. 즉, p 태그의 속성으로 id와 class와 name 이 들어있습니다. 물론, 실제로 저렇게 속성을 쓰는 경우는 없으며, 예제로서 보여드리는 부분입니다.
Ex) <img src="이미지경로" alt="대체텍스트" >
또 하나의 예로 <img> 태그의 경우 src 라는 속성이 필수적으로 들어갑니다. src 는 이미지의 경로를 적어주는 곳으로 예로 /images/img.jpg 라고 적어주게 됩니다. 여기서 alt 값은 필수적 요소는 아니지만 웹 표준을 위한 것으로서 이미지가 불러오지 못할 경우 이미지를 대신해 보여줄 대체텍스트를 적게 됩니다.
Ex) <a href="보낼 주소">보낼꺼임</a>
위와 같은 예제또한 <a> 태그는 필수적으로 href 속성을 가지게 됩니다. 이는 <a>태그에 감싸져있는 텍스트를 클릭시 보내질 주소를 적게 되는데, 예로 네이버로 링크를 연결할 시 보낼 주소에 www.naver.com 을 적으시면 됩니다.
아래에서는 기본적인 태그들에 대한 소개를 간략하게나마 살펴보도록하며, 이는 간단한 몸풀기로 이러한 태그들을 쓰는구나 라고 생각하시면 편할 듯 싶습니다!
이 부분부터는 머리말(<head>)안에 들어갈 태그입니다.
<meta>태그
<meta>태그는 문서의 정보를 나타내주는(설명해주는) 태그로서 다양하게 활용이 됩니다. 예를 들어 문서의 인코딩, 설명, 제작자 정보
등을 나타낼수 있으며 그 밖에 문서모드를 설정 혹은 뷰포트의 설정 등이 있습니다.
Ex) <meta name="description" content="설명">
<title> 태그
<title> 태그는 문서의 제목을 나타내주는 태그로서 <title> ~ </title> 사이에 문서의 제목을 입력하게 됩니다.
Ex) <title> 웹사이트 제목 </title>
<link> 태그
<link> 태그는 외부의 스타일시트를 불러오는 태그로서 스타일시트는 문서의 디자인(색상, 폰트, 배경, 레이어위치 등)을 모아놓은 것이다.
Ex) <link rel="stylesheet" type="text/css" href="경로">
이 부분부터는 본문(<body>)안에 들어갈 태그입니다.
<h1 ~ 6 >태그
<h1 ~ 6 >태그는 본문상에서 제목을 나타내주며, 각각 <h1>, <h2> ... , <h6> 로 나타낼수 있습니다.
Ex) <h1> HTML 이란? </h1>
<p>, <span>태그
<p>태그와 <span> 태그 모두 텍스트를 정의하는 태그입니다. 허나 두가지의 가장 두드러진 차이점은 <p>는 블록요소이고
<span>은 인라인 요소라는 점인데 이 부분은 p는 한줄을 차지하고 span는 한 부분을 차지한다라는 점입니다.
Ex) <p>나는 <span>000</span> 이다. </p>
등으로 나타낼수 있으며, 이 블록과 인라인 부분은 다음에 다시 언급하도록 하겠습니다~!
<a> 태그
<a> 태그는 링크태그로서 문서에서의 이동 및 다른 문서로 이동을 하게 하는 태그입니다. 간단하게 웹 사이트의 카테고리를 예를 들수 있습니다.
Ex) <a href="보낼주소" > 클릭시 해당 사이트로 이동합니다. </a>
<br>태그
<br>태그는 줄 바꿈 태그입니다.
Ex) <p>나는 000 입니다. <br> 이 문장은 줄바꿈이 됩니다. </p>
<img> 태그
<img>태그는 말 그대로 이미지를 불러오는 태그이며, 이미지 태그는 속성값 src 를 갖게 됩니다.
Ex) <img src="이미지경로" alt="이미지설명">
<ul>,<ol>,<dl>태그
세가지의 태그는 모두 목록 태그이며, <ul> 은 번호가 없는 목록 / <ol> 은 번호가 있는 목록 / <dl> 은 정의목록이며 각각은 하나이상의
하위태그를 포함하여야 하는데 이는 <ul>과 <ol>은 <li> 를, <dl> 은 <dt>, <dd> 를 갖게 됩니다.
Ex)
<ul>
<li> 번호 없는 목록입니다. </li>
</ul>
<ol>
<li> 번호 있는 목록입니다. </li>
</ol>
<dl>
<dt>용어를 정의합니다. 예를 들어 '수강신청'</dt>
<dd>용어를 설명합니다. 예를 들어 '00월 00일 까지 입니다.'<dd>
</dl>
<form>태그
<form>태그는 html에서 중요한 태그로서 게시판 혹은 로그인에서 사용되는 태그입니다. 이 태그는 text, password, checkbox, radio, submit, button등과 같은 <input>요소를 포함하고, select, textarea, fieldset, legend, label 태그들을 포함합니다. form 태그의 활용은 다양하게
나타나기 때문에 아래 예제에서는 간단하게만 보여드리도록 하겠습니다.
Ex)
<form method="POST 혹은 GET " action="보낼곳">
ID : <input type="text" name="userId" >
Pass : <input type="password" name="userpass">
<input type="submit" value="클릭">
</form>
<div>태그
<div>태그는 흔히 박스태그로서 레이아웃을 구성하거나 구성을 묶을때 사용하는 태그입니다.
Ex)
<div>
<p> 나는 000 이다. </p>
<img src="이미지경로" alt="나의 이미지">
</div>
-- 끝 --
[ 웹의 기초 HTML 이해하기 ]
-- 본 포스팅은 스터디의 목적으로 포스팅 되었습니다. 잘못된 정보가 있을시 댓글로 남겨주세요^^ --
(불펌을 금지 합니다)
반응형
'Web > Html' 카테고리의 다른 글
| [HTML] 기본 태그 정리 (319) | 2016.02.02 |
|---|---|
| [HTML] Meta 태그란 무엇인가?! (337) | 2016.02.01 |
