우당탕탕 개발일지
[두잇 HTML5+CSS3 웹표준의 정석] HTML Part1 본문
엑셀문서는 작성하는 프로그램과 작성한걸 보는 프로그램이 같다. 하지만 웹문서는 다르다.
웹문서를 작성하는 프로그램을 '웹 편집기(web editor)' 그리고 보는 프로그램을 '웹 브라우저(web browser)'라 한다.
여기서 웹 브라우저란?
기본으로 윈도우에 포함되어있는 인터넷 익스플로러, 엣지, 크롬, 파이어폭스 같은 프로그램을 칭한다.
HTML이란?
HTML의 약자는 HyperText Markup Language이며 하이퍼텍스트를 마크업하는 언어라는 뜻이다.
Hypertext: 링크를 눌렀을 때 즉시 다른 문서나 사이트로 이동할 수 있는 기능
Markup: 태그(tag)를 이용해서 문서의 어떤 부분이 제목이고 본문인지, 사진인지 링크인지 표시하는것을 말합니다.
HTML의 역사
초창기에는 웹브라우저에 텍스트와 이미지를 한줄씩 쓰는게 전부였지만 웹을 이용하는 사용자가 늘고 웹브라우저들이 늘어나면서 웹표준이 필요하게 되었다. '팀 버너스 리'가 W3C(World Wide Web Consortium)라는 단체를 설립하여 HTML 2.0, 3.0, 4.0까지 발표하였다. 하지만 점점 발전하는 웹으로 인해서 4.0 또한 그 흐름을 따라가기 어렵게되자 주요 브라우저 업체(애플, 구글, 오페라, 모질라 등)들은 HTML 확장을 목표로 WHATWG(Web Hypertext Application Technologies Working Group)을 구성하였다. 처음에 회의적이였던 W3G는 2007년에 받아들였고 그 이후에 HTML5라고 부르게되었다. 2014년 11월에 공식표준이 발표된 이후에 HTML이라 부르게 되었다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>내가 처음 만드는 HTML</title>
</head>
<body>
<h1>시간이란...</h1>
<p>내일 죽을 것처럼 오늘을 살고<br>
영원히 살 것처럼 내일을 꿈꾸어라</p>
<img src="images/first.jpg">
</body>
</html>HTML의 기본구조: <!doctype>, <head>, <body>, <html>
<head>에 작성된 것은 제목<title>을 제외하고 웹 브라우저 화면에 표시되지 않는다.
<!DOCTYPE html>:HTML5으로 작성된 문서라는 뜻으로 대문자인 <!DOCTYPE html>으로 사용되기도 한다.
<html lang="en">:문서에서 사용할 언어를 나타내는 코드이다. 만약 한국어를 사용할 경우 "en"대신 "ko"를 넣으면된다.
<meta http-equiv="X-UA-Compatible" content="IE=edge">: 인터넷 익스플로러(마이크로소프트에서 개발한 웹브라우저)는 최신 웹 기술이 사용된 웹문서를 제대로 읽지 못하기 때문에 현재 웹문서를 최신표준모드로 해석하라고 알려주는 코드입니다.
특수기호 사용하기
특수기호를 사용할 때에는 특수기호를 나타내는 표기법을을 사용해야하는데 이를 '엔티티 기호' 또는 '엔티티 이름'이라고 부릅니다.
엔티티 코드는 W3C에서 제공하는 엔티티 코드표에서 확인할 수 있습니다. 엔티티 코드 뒤에 오는 세미콜론(;)은 꼭 붙여야합니다.
'HTML & CSS > Do it! 시리즈' 카테고리의 다른 글
| [두잇 HTML5+CSS3 웹표준의 정석] CSS Part6 (0) | 2022.01.21 |
|---|---|
| [두잇 HTML5+CSS3 웹표준의 정석] CSS Part5 (0) | 2022.01.20 |
| [두잇 HTML5+CSS3 웹표준의 정석] HTML Part4 (0) | 2022.01.19 |
| [두잇 HTML5+CSS3 웹표준의 정석] HTML Part3 (0) | 2022.01.15 |
| [두잇 HTML5+CSS3 웹표준의 정석] HTML Part2 (0) | 2022.01.13 |