본문 바로가기
Web + 디자인/Publishing + 코딩

HTML 기초 #1

NOEUL's 2016. 5. 1. 20:29


언제 다시 업데이트 될지 모르는 HTML 강좌입니다.


처음글은 HTML의 기본 지식과 태그의 요소에 대해 알아보도록 하겠습니다.




01. HTML의 기본 지식.


## HTML이란?


책이나 웹에서 HTML의 정의에 대해 설명한 글들은 긴 서술형으로 설명하는 경우가 많은데, 쉽게 한마디로 요약하자면 웹문서입니다. 홈페이지의 내용을 보여주기위한 문서이죠. 한글을 보여주기 위한 문서는 hwp, MS Word를 보여주기 위한 문서는 doc 이런것처럼 웹페이지의 내용을 보여주기 위한 문서가 바로 html입니다.

html의 확장자는 html과 htm으로 나뉘는데 두개의 차이점은 없고, 예전에는 htm문서도 사용되었으나 현재는 보통 html로 통일하고 있습니다.


__

## HTML문서를 제작하기위한 프로그램?


하드코딩(직접 코드를 작성하는 방식)을 하시거나 배우시려는 분들은 굳이 다른 프로그램이 필요없이 윈도우와 맥에 기본적으로 설치되어 있는 텍스트 편집기(NotePad)를 이용하시면 됩니다.

허나 이러한 기본 편집기는 하이라이팅기술(코드에 대해 색상으로 표현되는 기술)이 없기에 문서가 길어지게 된다면 수정하려는 부분을 검색하기 힘들 수 있습니다.


__

## 제작된 HTML문서 미리보기.


보통 윈도우에서는 인터넷 익스플로러, 맥에서는 사파리 브라우저가 해당 문서를 열어줍니다.

웹코딩을 하시는 분들은 대부분 여러 브라우저를 설치하여 테스트 하는 경우가 많습니다. 그 대표적인 브라우저로는 구글의 크롬, 파이어폭스, 오페라 브라우저 등이 있습니다.


__

## 홈페이지 제작 및 퍼블리싱에 필요한 기초


전문적인 HTML문서를 제작하기 위해서는 콘텐츠과 스타일을 이해하셔야 합니다.

- 콘텐츠 : 웹에서의 콘텐츠는 문서의 내용에 해당되며, 이는 html문서에 저장하게 됩니다.

- 스타일 : 웹에서의 스타일은 웹문서의 모양을 잡아주는 역할을 하게되며, 이는 css문서에 저장하게 됩니다.


홈페이지는 보통 텍스트와 이미지, 스타일문서, 스크립트문서 등으로 이루어져 있으며, 이들의 조합으로 코딩이 이루어집니다. 이 내용들에 대해서는 추후 따로 설명드리도록 하겠습니다.




02. 홈페이지 제작 기초.


홈페이지는 약속된 명령어를 이용하여 제작하여야 합니다. 이 명령어들을 태그(tag)라고 부르며 가장 기본적인 코드는 아래와 같이 표현되어야 합니다.


:: HTML5를 표현하기 위한 기본 구성.

<!doctype html>
<html lang="ko">
<head>
    <title>HTML기초</title>
    <meta charset="utf-8" />
</head>

<body>
Hello World
</body>
</html>


<!doctype html>

문서 형식 선언 (해당 문서는 HTML이고 HTML5로 제작되었습니다.)


<html lang="ko">

html문서를 시작하며 언어는 한글입니다.


<head>

문서의 정의를 시작합니다.(head는 문서의 정보, 스타일, 스크립트 등등을 정의 하기 위한 공간입니다.)


<title> ~ </title>

홈페이지 제목은 'HTML기초' 입니다.


<meta charset="utf-8" />

문서는 'uft-8'로 인코딩 되어있습니다.


</head>

문서의 정의를 끝냅니다.


<body>

본문을 시작합니다.


Hello World

홈페이지 내용(여기서는 Hello World)을 웹브라우저에 보여줍니다.


</body>

본문을 끝냅니다.


</html>

html문서를 끝냅니다.



<< :: < 중요 > :: >>


<!DOCTYPE>

__

HTML 문서 형식에 관한 버전 정보(DTD)를 설정합니다. 웹표준에서는 반드시 모든 HTML 문서의 맨 앞에 있어야하며, HTML 문서의 구성 요소는 아니지만 <!DOCTYPE>에 따라 스타일 속성과 태그가 변하게 되니 알아두시면 좋습니다.



<!DOCTYPE>의 종류.

__

HTML 5

HTML 5 문서는 DTD를 필요로 하지 않습니다. 그리고 HTML 5에 새로 추가된 태그를 사용할 수 있습니다.

<!DOCTYPE HTML>


__

The HTML 4.01 Strict DTD

Traditional DTD에서 deprecated된 요소와 <frameset> 관련 요소 및 속성을 제외한 가장 엄격한 DTD입니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


__

The HTML 4.01 Transitional DTD

Strict DTD에서 deprecated 요소와 속성을 포함합니다. 권장되지 않는 요소나 속성을 문서에 포함할 필요가 있을 때, 하위 호환성을 위해 이 선언문을 사용하면 됩니다. Frameset관련 요소는 포함되지 않습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


__

The HTML 4.01 Frameset DTD

Traditionl DTD에 frameset을 포함합니다. Frameset을 적용한 문서에서는 이 선언문을 사용해야 합니다. 가장 느슨한 문서 형식입니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">


__

The XHTML 1.0

XHTML 1.0에서는 HTML 4.01의 DTD와 유사하게 3가지 DTD 중 하나를 사용할 수 있습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">


__

The XHTML 1.1

XHTML 1.1에서는 하나의 DTD만 정의할 수 있습니다. 이것은 기존의 XHTML 1.0 Strict DTD를 기본으로 합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">



03. HTML의 명령어 태그란?

태그는 '<'와'>' 사이에 들어가는 명령어로써 크게 여는태그(Opening Tag)와 닫는태그(Closing Tag)로 이루어진 태그, 자신이 스스로 닫는 태그(Self Closing Tag) 두 종류로 나뉘고 세부적으로는 인라인요소(inline)와 블록(block)요소로 구분됩니다. 이 외에 인라인블록(inline-block)이라는 요소가 있는데 자신이 인라인블록(inline-block)의 요소를 갖는 태그는 없음으로 세부적인 요소에서는 제외됩니다.


__

여는태그와 닫는태그의 구조

영역을 지정하여 사용할 수 있는 태그들입니다. 흔히 우리말로 여기서부터 여기까지라는 의미를 담고있습니다. 중요한 점은 닫는태그 앞에는 필히 '/'(슬러시)가 들어가야 하며 '/'(슬러시)가 들어간 닫는태그에서 해당 태그의 영역은 종료됩니다. 만약 닫는태그가 제대로 이루어지지 않는다면 홈페이지의 레이아웃이 망가질 수 있습니다.


대표 태그

  • <div>박스</div>
  • <p>문단</p>
  • <a>링크</a>

__

스스로 닫는 태그의 구조

자기 자신이 주최되는 태그들이며 자체적으로 의미를 부여하기에 다른 태그로 대처할 수 없습니다. 이 태그는 웹표준의 구조상 태그 뒤에 '/'(슬러시)가 붙도록 되어있습니다만 '/'를 붙이지 않아도 레이아웃은 망가지지 않습니다.


대표 태그

  • <img /> : 이미지를 불러온다.
  • <br /> : 다음내용을 한줄 내린다. 단, 문단을 나누지는 않는다.
  • <embed /> : 미디어콘텐츠(음악,동영상,플래시 등)를 불러온다.

__

인라인요소

닫는태그 이후의 내용이 다음줄로 내려가지 않고, 이어지는 태그로써 넓이값과 높이값을 지정할 수 없다. 한글문서로 따지자면 글의 내용 일부를 굵게(Bold) 만들수 있는데 그러한 종류의 태그를 인라인요소라고 할 수 있습니다.


__

블록요소

태그 자체가 가로의 모든 공간을 차지하는 태그로써 넓이값과 높이값을 지정할 수 있다. 한글문서로 따지자면 표를 만들고 글자처럼 취급을 누르면 해당 표가 따로 공간을 차지하는데 이렇게 가로로 완전한 공간을 차지하는 태그를 블록요소라 할 수 있습니다.


__

인라인블록요소

IE8부터 적용된 요소로써 해당 요소를 가진 태그는 없고, 직접 스타일로 명시해주어야만 쓸 수 있다. 해당 요소의 특징은 인라인요소와 같이 내용의 일부로써 닫는태그 이후의 내용이 다음줄로 내려가지 않으며 블록요소처럼 넓이와 높이값을 지정해 줄 수 있습니다.



## HTML 기초 #1 끝.


저작자표시 비영리 동일조건

'Web + 디자인 > Publishing + 코딩' 카테고리의 다른 글

HTML 기초 #2 [HTML Tag]  (0) 2016.07.20
[JavaScript] 사이트 주소 URL 앞에 'www' 붙이기  (0) 2016.06.08
Highlight Code JavaScript TEST  (0) 2016.04.29
Javascript를 이용한 주소(URL)변경.  (0) 2016.04.27
Tistory '#2' 스킨 수정 및 기능추가  (0) 2016.04.27

'Web + 디자인/Publishing + 코딩' Related Articles

티스토리툴바