HTML5 튜토리얼




HTML(Hypertext Markup Language)은 웹페이지를 만들기 위한 표준 마크업 언어입니다.

월드와이드웹(WWW, world-wide web)의 가장 기초적인 구성요소입니다.

HTML은 웹컨텐츠의 의미와 구조를 정의하는 기능을 합니다.

하이퍼텍스트(Hypertext)는 웹페이지 또는 웹사이트들을 서로 참조하고 연결하는 링크(link)를 말합니다.

HTML의 마크업(markup)은 태그를 통해 텍스트, 이미지 등의 내용을 표시함을 의미합니다.

HTML은 웹브라우저가 해석하여 텍스트, 이미지, 동영상 등의 내용을 화면에 표시합니다.

대표적인 웹브라우저로는 인터넷익스플로러, 엣지(Edge), 크롬(Chrome), 사파리(Safari), 파이어폭스(Firefox) 등이 있습니다.



목차


HTML5 편집


HTML은 일반적인 텍스트편집기로 작성할 수 있습니다.

윈도우에 포함된 메모장(notepad) 또는 Notepad++등의 텍스트편집기, 또는 Visual Studio Code 등의 개발툴도 사용될 수 있습니다.

Notepad++ 다운로드 링크입니다:Notepad++ 다운로드





HTML예제:

<!DOCTYPE html>

<html>

<head>

<title>웹페이지 제목 (웹브라우저 제목표시줄에 표시됨)</title>

</head>

<body>


<h1>강조 제목문장</h1>

<p>단락입니다.</p>


</body>

</html>


위 HTML을 텍스트편집기에 쓴 후 index.html파일로 저장하세요. (UTF-8인코딩)

index.html파일을 더블클릭하면 웹브라우저에서 내용이 표시될 것입니다.


HTML5 기초


HTML문서는 <!DOCTYPE html>로 시작합니다.

HTML문서는 DOCTYPE태그 뒤를 <html>과 </html>로 전체를 감싸야 합니다.

<head>태그는 웹문서제목과 스크립트, 스타일시트 등을 포함합니다.

<body>태그는 실제 문서내용을 포함합니다.





HTML예제:

<!DOCTYPE html>

<html>

<head>

<title>웹페이지 제목 (웹브라우저 제목표시줄에 표시됨)</title>

</head>

<body>


<h1>강조 제목문장</h1>

<p>단락입니다.</p>


</body>

</html>





요소 (Elements)

HTML 요소는 보통 시작태그와 종료태그, 그리고 그 안의 내용으로 구성됩니다.

<태그이름>내용</태그이름>

<br>처럼 종료태그나 안의 내용이 없는 태그도 있습니다.

요소는 중첩될 수 있으며, 대소문자를 구분하지 않습니다.





제목 (Headings)

챕터제목, 소제목 등은 <h1> ~ <h6>으로 쓸 수 있습니다.

h1은 가장 큰 제목이고 h6는 가장 작은 제목입니다.

h1~h3예제:

<h1>대제목입니다.</h1>

<h2>중제목입니다.</h2>

<h3>소제목입니다.</h3>

대제목입니다.

중제목입니다.

소제목입니다.





단락 (Paragraphs)

단락은 <p>태그로 쓸 수 있습니다.

일반적인 평문 텍스트입니다.

<p>예제:

<p>단락입니다.</p>

<p>평문 텍스트입니다.</p>

단락입니다.

평문 텍스트입니다.


HTML 속성 (HTML Attributes)


HTML요소는 HTML속성을 포함할 수 있습니다.

HTML요소는 요소에 대한 부가적인 정보를 담습니다.

속성은 속성명="값" 또는 속성명='값' 형태로 지정됩니다.


src속성:

<img src="image_url.jpg">

위 예제에서는 img요소의 src속성이 그림의 주소를 지정하고 있습니다.


HTML 제목


제목 (Headings)

챕터제목, 소제목 등은 <h1> ~ <h6>으로 쓸 수 있습니다.

h1은 가장 큰 제목이고 h6는 가장 작은 제목입니다.


h1~h6예제:

<h1>제목1입니다.</h1>

<h2>제목2입니다.</h2>

<h3>제목3입니다.</h3>

<h4>제목4입니다.</h4>

<h5>제목5입니다.</h5>

<h6>제목6입니다.</h6>

제목1입니다.

제목2입니다.

제목3입니다.

제목4입니다.

제목5입니다.
제목6입니다.

검색엔진은 웹페이지구조와 내용을 색인할 때 제목을 참조합니다.





가로선 (Horizontal Rules)

<hr>태그는 가로선을 그립니다. 주제 별로 내용을 시각적으로 나누기 위해 사용됩니다.

<h6>제목6입니다.</h6>

<p>내용입니다.</p>

<hr>

<h6>제목6입니다.</h6>

<p>내용입니다.</p>

제목6입니다.

내용입니다.


제목6입니다.

내용입니다.


HTML 단락 (HTML Paragraph)


HTML 단락

<p>...</p>로 단락을 정의할 수 있습니다.

p태그는 일반적으로 텍스트를 담습니다.


p태그 예제:

<p>단락1입니다.</p>

<p>단락2     입니다.</p>

단락1입니다.

단락2 입니다.


많은 공백(space)은 1개의 공백문자로 치환됩니다.





HTML 줄바꿈 (Line Break)

<br>태그는 줄바꿈을 표시합니다.

<p>첫번째 줄입니다.<br>다음 줄입니다.</p>

첫번째 줄입니다.
다음 줄입니다.





HTML pre 요소 (pre Element)

<pre>태그는 공백과 줄바꿈을 그대로 출력합니다.

<pre>

첫번째 줄입니다.

두번째 줄      입니다.

</pre>

첫번째 줄입니다.


두번째 줄      입니다.

HTML 주석 (HTML Comment)


HTML 주석 태그

<!-- 코드에 대한 설명을 쓰세요. -->

주석은 표시되지 않습니다. HTML코드에 대한 설명을 쓰기 위해서 사용합니다.





주석태그 예제:

<!-- 코드에 대한 설명을 쓰세요. -->

<p>단락입니다.</p>

단락입니다.



HTML 스타일 (HTML Style)


HTML 스타일 속성 (Style Attribute)

style속성을 통해 요소(element)의 모양을 설정할 수 있습니다.

<요소명 style="CSS변수:값;">

CSS는 스타일을 설정하는 언어입니다. 이 페이지에서는 기초적인 스타일만 다룹니다.





HTML 텍스트 색상

color변수는 텍스트색상을 지정합니다.

color style 예제:

<p style="color:blue;">단락입니다.</p>

단락입니다.





HTML 배경색

background-color변수는 HTML요소의 배경색을 지정합니다.

<p style="background-color:red;">단락입니다.</p>

단락입니다.





HTML 텍스트 크기

font-size변수는 텍스트크기를 지정합니다.

<p style="font-size:200%;">2배 크기 텍스트입니다.</p>

2배 크기 텍스트입니다.





HTML 폰트

font-family변수는 텍스트의 폰트를 지정합니다.

<p style="font-family:san-serif;">san-serif폰트 텍스트입니다.</p>

san-serif폰트 텍스트입니다.





HTML 텍스트 정렬

text-align변수는 텍스트의 가로정렬을 지정합니다.

left, center, right, justify(양쪽 정렬) 중 골라 사용할 수 있습니다.

<p style="text-align:right;">오른쪽 정렬 텍스트입니다.</p>

오른쪽 정렬 텍스트입니다.


HTML 글자체


텍스트의 글자체를 변경할 수 있는 요소(element)들이 있습니다.





HTML <b>, <strong> 태그

b요소는 텍스트를 강조체로 바꾸어 줍니다.

<b>태그 예제:

<b>강조체입니다.</b>

강조체입니다.




HTML <i>, <em> 태그

i요소는 텍스트를 이탤릭체로 바꾸어 줍니다.

<i>태그 예제:

<i>이탤릭체입니다.</i>

이탤릭체입니다.




HTML <mark> 태그

mark요소는 텍스트를 눈에 뛰는 색상으로 설정합니다.

<p><mark>mark</mark>단락입니다.</p>

mark단락입니다.





HTML <del> 태그

del요소는 텍스트에 취소선을 그어 줍니다.

<del>취소선 텍스트입니다.</del>

취소선 텍스트입니다.




HTML <ins> 태그

ins요소는 텍스트에 밑줄을 그어 줍니다.

<ins>밑줄 텍스트입니다.</ins>

밑줄 텍스트입니다.




HTML <sub> 태그

sub요소는 텍스트에 밑줄을 그어 줍니다.

<p><sub>아래첨자</sub>텍스트입니다.</p>

아래첨자텍스트입니다.





HTML <sup> 태그

sup요소는 텍스트에 밑줄을 그어 줍니다.

<p><sup>윗첨자</sup>텍스트입니다.</p>

윗첨자텍스트입니다.



HTML 색상


HTML색상을 색상명, RGB, HSL 등으로 지정할 수 있습니다.





색상명

색상명을 사용하면 RGB값을 외울 필요없이 색상을 지정할 수 있습니다.

색상명 예제 (background-color로 배경색 지정):

<p style="background-color:red;">red입니다.</p>

red입니다.

gray입니다.

orange입니다.

lime입니다.





텍스트 색상

color style로 텍스트색상을 지정할 수 있습니다.

color스타일 예제:

<p style="color:gold;">gold입니다.</p>

gold입니다.





테두리 색상 (Border Color)

border style로 테두리 색상을 지정할 수 있습니다.

<p style="border:solid orange;">orange입니다.</p>

orange입니다.





RGB값

색상은 RGB값으로 지정할 수도 있습니다.

<p style="background-color:rgb(255,128,128);">rgb색상입니다.</p>

rgb색상입니다.





HEX값

색상은 16진수값으로 지정할 수도 있습니다.

<p style="background-color:#FF8080;">hex색상입니다.</p>

hex색상입니다.



Next





One Line Message