HTMl 소스에서 공백이나 괄호 같은 문자들을 소스 기호로 인식하지 않고 그대로 화면에 표시하려면 특수 기호를 사용해야 합니다.
화면 표시 |
특수 기호 |
& |
$amp; |
(공백 한 칸) |
|
< |
< |
> |
> |
" |
" |
| |
| |
( |
( |
) |
) |
, |
, |
- |
- |
' | ´ |
<출처> Do it! HTML5+CSS3 웹 표준의 정석
| [HTML 입문] 텍스트 관련 태그 ② (0) | 2017.03.21 |
|---|---|
| [HTML 입문] 텍스트 관련 태그 ① (0) | 2017.03.20 |
| [HTML 입문] HTML 문서 기본 구조 (0) | 2017.03.18 |
| [HTML 입문] 웹 브라우저와 웹 편집기 (0) | 2017.03.17 |
| [HTML 입문] HTML은 무엇일까요? (0) | 2017.03.17 |
HTML 문서는 일반 문서와 달리 정해진 형식에 맞추어 내용을 입력해야 합니다. 소스가 길든 짧든 HTML 문서에는 반드시 필요한 모든 구조가 포함되어 있습니다. 아래의 예제를 통해 HTML 문서의 기본 구조를 살펴보겠습니다.
1. <!doctype> - 문서 유형을 지정하는 선언문
<!doctype html>
현재 문서가 HTML5 언어로 작성된 웹 문서라고 알려주는 것입니다. HTML에서는 대소문자 구별이 없지만 doctype를 좀 더 강조하기 위해 <!DOCTYPE html>처럼 대문자로 사용하기도 합니다.
2. <html> 태그 - 웹 문서 시작을 알리는 태그
<html lang="ko">
실제 문서 정보와 내용이 시작되고 끝나는 것을 표시하는 태그입니다. <html> 태그에서는 lang이라는 속성을 사용해 문서에서 사용할 언어를 지정할 수 있습니다.
코드 |
de |
en |
fr |
ja |
ko |
zh |
언어 |
독일어 |
영어 |
프랑스어 |
일본어 |
한국어 |
중국어 |
<html> 태그와 </html> 태그 사이에는 문서 정보를 지정하는 <head> 태그와 실제 화면에 보이는 문서 내용을 입력하는 <body> 태그가 포함됩니다.
3. <head> 태그 - 브라우저에게 정보를 제공하는 태그
웹 브라우저 화면에는 보이지 않지만 웹 브라우저가 알아야 할 정보들은 모두 <head> 부분에 입력합니다. 문서에서 사용할 외부 파일들도 이곳에서 링크합니다. 문서 정보를 표시하기 위해 사용할 수 있는 주요 태그들은 다음과 같습니다.
<title>문서 제목</title>
- <title> 태그에서 지정하는 내용은 웹 브라우저의 제목 표시줄에 표시됩니다.
<meta charset="utf-8">
- <meta> 태그는 화면에 글자를 표시하는 문자 인코딩 방법을 비롯해 웹 문서 키워드 등을 지정할 수 있습니다.
- HTML5에서는 한글과 영문을 비롯해 모든 언어를 표시할 수 있는 utf-8방식을 사용합니다.
<meta name="description" content="여기에 사이트에 대한 짧은 설명을 입력합니다">
- <meta> 태그를 이용해 문서에 대한 간단한 설명을 지정할 수 있습니다.
4. <body> 태그 - 실제 브라우저에 표시될 내용
<body> 태그와 </body> 태그 사이에 실제 브라우저에 표시될 내용을 입력합니다. 대부분의 태그가 <body> 태그와 </body> 태그 사이에서 사용하는 태그들입니다.
<출처> Do it! HTML5+CSS3 웹 표준의 정석
| [HTML 입문] 텍스트 관련 태그 ② (0) | 2017.03.21 |
|---|---|
| [HTML 입문] 텍스트 관련 태그 ① (0) | 2017.03.20 |
| [HTML 입문] 웹 문서에서 특수 기호 사용하기 (0) | 2017.03.20 |
| [HTML 입문] 웹 브라우저와 웹 편집기 (0) | 2017.03.17 |
| [HTML 입문] HTML은 무엇일까요? (0) | 2017.03.17 |
일반 문서와 웹 문서는 큰 차이점이 있습니다. 일반 문서는 내용을 입력하는 프로그램과 그 내용을 확인하는 프로그램이 같지만 웹 문서는 문서를 작성하는 프로그램과 그 내용을 보는 프로그램이 서로 다릅니다. 웹 문서를 작성하는 프로그램을 '웹 편집기(Web Editor)'라고 하고 웹 문서를 보는 프로그램을 '웹 브라우저(Web Browser)'라고 합니다.
웹 브라우저의 종류
브라우저 이름 |
제조업체 |
특징 |
크롬 |
구글 |
빠른 업데이트를 통해 HTML5표준에 가장 발 빠르게 대응하고 있어 최근 가장 많이 사용되고 있는 브라우저입니다. HTML5 지원 정도가 555점 만점에서 525점으로 가장 높은 점수를 받고 있습니다. |
파이어폭스 |
모질라 |
일반 사용자들보다 개발자들이 주로 사용하는 웹 브라우저로 개발 도구와 부가 기능들이 뛰어납니다. |
인터넷 익스플로러 |
마이크로소프트 |
HTML5에 대한 지원은 취약하지만 아직까지도 국내에서 많이 사용되고 있는 브라우저입니다. 윈도우 7 서비스팩1부터 지원하기 시작한 IE11을 마지막으로 더 이상 개발되지 않고 있습니다. |
엣지 |
마이크로소프트 |
마이크로소프트에서 인터넷 익스플로러 대신 HTML5를 지원하기 위해 새로 개발해 윈도우 10에서 기본으로 사용하는 웹 브라우저입니다. |
이 외에도 애플의 '사파리'나 오페라 재단의 '오페라' 브라우저도 있습니다.
웹 편집기의 종류
웹 문서를 만들 때 HTML 태그를 입력하는 프로그램을 '웹 편집기'라고 합니다. 웹 편집기에 HTML 소스를 입력하면 그 내용을 웹 브라우저로 읽는데 이 웹 편집기는 메모장이든 전문 편집기 프로그램이든 텍스트를 입력할 수 있는 프로그램이면 모두 가능합니다.
편집기 종류 |
특징 |
텍스트 편집기 |
윈도우의 메모장이나 매킨토시의 텍스트 편집기, 한글, 워드를 이용해서 웹 문서를 작성할 수 있습니다. 사용자가 태그를 일일이 직접 입력해야 하기 때문에 HTML 태그와 속성을 알고 있어야 하고 입력할 때 오류가 발생하기 쉽습니다. |
웹 편집기 |
웹을 위한 전용 편집기입니다. 태그와 속성, 일반 텍스트 등을 서로 다른 색으로 표시해주어 소스를 읽기 쉽고 편집기에 따라 태그나 속성의 일부만 입력하더라도 전체를 완성해주기 때문에 오타로 인한 오류를 줄일 수 있습니다. 윈도우용 - 노트패드++(무료), 에디트 플러스(유료) 맥용 - 텍스트메이트(무료), 코다(유료) 공용 - 드림위버(유료), 비주얼 스튜디오 코드(무료) |
통합개발환경(IDE) |
웹 IDE는 웹 편집기의 편리함과 함께 사용자에게 필요한 기발 환경을 한꺼번에 구축하고 사용할 수 있게 해줍니다. 웹 IDE 프로그램에는 비주얼 스튜디오 2015(무료, 유료), 웹스톰(무료), 서브라임 텍스트(무료, 유료) 등이 있습니다. |
웹 기반 코드 편집기 |
웹 상에서 소스 코드를 입력하고 결과를 바로 확인할 수 있는 편집기입니다. 웹 코딩을 위한 시스템 환경을 만들거나 별도의 편집기 프로그램을 이용하지 않고 브라우저 화면에 코드를 입력하고 결과를 볼 수 있는 장점이 있습니다. 팀 작업을 하면서 여러 팀원들과 소스를 공유하는 데도 유용하고 초보자의 코딩 연습용으로도 좋습니다. Codepen(http://codepen.io/)이나 JSFiddle(https://jsfiddle.net/), Liveweave(http://liveweave.com/), Plunker(http://plnkr.co/) 등이 있습니다. |
<출처> Do it! HTML5+CSS3 웹 표준의 정석
| [HTML 입문] 텍스트 관련 태그 ② (0) | 2017.03.21 |
|---|---|
| [HTML 입문] 텍스트 관련 태그 ① (0) | 2017.03.20 |
| [HTML 입문] 웹 문서에서 특수 기호 사용하기 (0) | 2017.03.20 |
| [HTML 입문] HTML 문서 기본 구조 (0) | 2017.03.18 |
| [HTML 입문] HTML은 무엇일까요? (0) | 2017.03.17 |
HTML이란?
컴퓨터에서 사용하는 모든 파일에는 각각 고유의 형식이 있습니다. 예를 들어 엑셀의 확장자는 ＊.xlsx이고 한글의 확장자는 ＊.hwp입니다. 웹의 경우도 마찬가지입니다. 웹 사이트에서 사용할 문서는 ＊.html(또는 ＊.htm) 확장자를 붙여 다른 문서와 구분합니다.
HTML은 하이퍼텍스트 마크업 랭귀지(Hypertext Markup Language)의 줄임말로 그대로 해석하면 하이퍼텍스트를 마크업하는 언어입니다. '하이퍼텍스트'란 웹 사이트에서 링크를 클릭해 다른 문서나 사이트로 즉시 이동할 수 있는 기능을 말하고 '마크업'이란 태그(tag)를 사용해 문서에서 어느 부분이 제목이고 본문인지, 어느 부분이 사진이고 링크인지 표시하는 것을 말합니다. 즉, 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어가 HTML이라고 정리할 수 있습니다.
웹 편집기의 소스에서 꺾쇠 괄호(<, >)로 묶인 부분이 'HTML 태그(tag)'이고 이렇게 태그를 붙이는 것을 '마크업'이라고 합니다. 이 꺾쇠 괄호 안의 내용은 웹 브라우저 화면에 나타나지 않습니다.
- HTML5를 웹 표준 기술이라고 하는데 웹 표준은 웹 사이트를 만들 때 지켜야 하는 약속들을 정리한 것이다.
- 웹 표준을 지켜 사이트를 제작하면 일반 사용자는 장소나 브라우저와 상관없이 쉽게 웹사이트를 볼수 있고 웹 개발자와 디자이너들은 시간을 절약할 수 있다.
- 대부분의 웹 브라우저에서 HTML5를 지원하게 되면서 'HTML'이라고 부르게 되었다.
- HTML5 표준안부터는 웹 브라우저 업체들이 함께 참여하고 있기 때문에 표준안이 업그레이드될 때마다 웹 브라우저 업체에서 발 빠르게 수용하고 있다. 현재 표준안 명세(HTML 5.1)는 http://www.w3c.org/TR/html에서 확인할 수 있고 진행 중인 명세(HTML 5.2)는 https://w3c.github.io/html/에서 확인할 수 있다.
<출처> Do it! HTML5+CSS3 웹 표준의 정석
| [HTML 입문] 텍스트 관련 태그 ② (0) | 2017.03.21 |
|---|---|
| [HTML 입문] 텍스트 관련 태그 ① (0) | 2017.03.20 |
| [HTML 입문] 웹 문서에서 특수 기호 사용하기 (0) | 2017.03.20 |
| [HTML 입문] HTML 문서 기본 구조 (0) | 2017.03.18 |
| [HTML 입문] 웹 브라우저와 웹 편집기 (0) | 2017.03.17 |
