간단한 HTML 문서 만들기

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>내가 처음 만드는 HTML 문서</title>

</head>

<body>

<h1>시간이란..</h1>

<p>내일 죽을 것처럼 오늘을 살고<br>

영원히 살 것처럼 내일을 꿈꾸어라.</p>

<img src="images/first.jpg">

</body>

</html>

웹 브라우저는 웹 문서를 한 줄씩 읽으면서 해석한다. 

웹 문서는 아무리 길더라도 <!doctype>과 <html>, <head>, <body> 네 가지 태그를 이용해 문서의 시작과 끝을 표시한다.


웹 브라우저에서 확인! 

<h1> 태그를 사용한 부분에는 제목이, <p> 태그 부분에는 일반 텍스트 단락이, <img> 태그를 사용한 부분에는 지정한 이미지가 표시된다.


HTML 문서 기본 구조 살펴보기

<!doctype> - 문서 유형을 지정하는 선언문

<!doctype html>


<html> 태그 - 웹 문서 시작을 알리는 태그

<!doctype html>

<html lang="ko">

<head></head>

<body></body>

</html>

<html> 태그에는 lang이라는 속성을 사용해 문서에서 사용할 언어를 지정할 수 있다. 

de - 독일어, en - 영어, fr - 프랑스어, ja - 일본어, ko - 한국어, zh - 중국어

<html> 태그와 </html> 태그 사이에는 문서 정보를 지정하는 <head> 태그와 실제 화면에 보이는 문서 내용을 입력하는 <body> 태그가 포함된다.


<head> 태그 - 브라우저에게 정보를 주는 태그

<head>

<title>문서 제목</title>

<meta charset="utf-8">

<meta name="description" content="여기에 사이트에 대한 짧은 설명을 입력합니다">

</head>

웹 브라우저 화면에는 보이지 않지만 웹 브라우저가 알아야 할 정보들은 모두 <head> 부분에 입력한다. 

문서에서 사용할 외부 파일들도 이곳에서 링크한다.


- <title> 태그 - 문서 제목

<title> 태그에서 지정하는 내용은 거의 모든 웹 브라우저의 제목 표시줄에 표시되고 해당 페이지를 방문하는 방문자나 검색 엔진은 제목 표시줄의 제목을 보고 페이지 전체의 내용을 추측한다.


- <meta> 태그 - 문자 인코딩 및 문서 키워드, 요약 정보

<meta> 태그에서 가장 중요한 부분은 문자 인코딩을 지정하는 것이다. HTML5에서는 모든 언어를 표시할 수 있는 utf-8 방식을 사용한다.

또한 <meta> 태그를 이용해 문서에 대한 간단한 설명을 지정할 수 있는데 이렇게 지정한 짧은 설명은 검색 결과에 사이트 설명으로 표시된다.

* 국내 검색 사이트에서는 각 포털 내의 블로그를 중심으로 검색하기 때문에 <meta> 태그가 제 역할을 못한다. 구글 검색 엔진에서 이해할 수 있는 <meta> 태그에 대한 자세한 설명은 https://support.google.com/webmasters/answer/79812?hl=ko를 참고한다.


이외에도 <head> 태그 안에는 스타일 시트를 사용하기 위한 <style> 태그와 <link> 태그 등이 사용된다.


<body> 태그 - 실제 브라우저에 표시될 내용

<body>

<h1>시간이란...</h1>

<p>내일 죽을 것처럼 오늘을 살고<br>

영원히 살 것처럼 내일을 꿈꾸어라</p>

<img src="images/first.jpg">

</body>

대부분의 태그가 <body> 태그와 </body> 태그 사이에서 사용하는 태그들이다.


웹 문서를 작성하는 프로그램을 '웹 편집기(web editor)'라고 하고 웹 문서를 보는 프로그램을 '웹 브라우저(web browser)'라고 한다.


웹 브라우저 종류 : 크롬, 파이어폭스, 인터넷 익스플로러, 엣지, 사파리, 오페라

크롬 설치하고 기본 웹 브라우저로 정하기

1. www.google.com/chrome에서 크롬 브라우저를 설치



2. 주소 표시줄 오른쪽에 있는 Chrome 맞춤 설정 및 제어 버튼을 클릭한 후 설정을 선택하고 Chrome을 기본 브라우저로 설정


비주얼 스튜디오 코드 설치하고 살펴보기

3. www.visualstudio.com에서 Visual Studio Code 부분에서 Windows용 다운로드를 클릭하면 비주얼 스튜디오 코드에 대한 설명이 있는 페이지로 이동하면서 파일이 다운로드


1
2
3
4
5
6
7
8
<header></header>
<nav></nav>
<section>
    <article></article>
    <article></article>
</section>
<aside></aside>
<footer></footer>
cs

<header>

페이지 맨 위쪽이나 왼쪽에 위치하는 머리말이다.

<header></header>


<nav>

문서를 연결하는 내비게이션 메뉴이다.

<nav></nav>


<section>

콘텐츠 영역을 나눈다.

<section>

<article></article>

<article></article>

</section>


<article>

콘텐츠 내용을 넣는 부분이다.

<section>

<article></article>

</section>


<aside>

본문 이외에 내용을 표시한다.

<aside></aside>


<footer>

제작 정보와 저작권 정보를 표시한다.

<footer></footer>


HTML5 Shiv

IE8 이하 버전까지 고려하려면 html5shiv.js 파일을 사용한다.


HTML5 Shiv


'latest zip package'를 클릭해서 'html5shiv.js' 파일을 다운받는다. 

<head>

<!--[if lt IE 9]>

<script src="html5shiv.js"></script>

<![endif]-->

</head>


사실 컴퓨터 한다고 하면 무조건 인터넷! 브라우저라는 개념도 없던 시절에는 그저 기본으로 깔려 있는 인터넷 익스플로러가 전부였다. 언제부터였을까? 크롬을 알고 나서부터 여러 브라우저들을 사용하기 시작했고 지금은 크롬과 네이버 웨일을 주로 사용하고 있다.


웹 브라우저(web browser)는 웹 문서를 보는 프로그램이다. 다양한 웹 브라우저들 중에 어떤 웹 브라우저를 사용해야할지 고민이라면 다음 기준으로 선택해보는 건 어떨까? 특히 웹 개발을 마음 먹은 사람이라면 HTML5 지원 정도는 확인해 봐야 하지 않을까?


참고 사이트 : html5test.com


크롬


구글 크롬

HTML5 지원 정도가 가장 높은 만큼 최근 가장 많이 사용되는 브라우저이다.


네이버 웨일


네이버 웨일

소개된 브라우저 중 가장 최신 브라우저로 네이버에서 개발한 웹브라우저이다.


오페라


오페라

사파리와 비슷한 점유율로 다른 브라우저에 비해 사용하는 사람이 적음에도 불구하고 HTML5 지원 점수는 높다.


파이어폭스


모질라 파이어폭스

크롬이 있기 전까지는 개발자들이 자주 사용하는 웹 브라우저로 개발 도구나 부가 기능이 뛰어나다.


엣지


마이크로소프트 엣지

마이크로소프트에서 인터넷 익스플로러 대신 새로 개발된 브라우저로 윈도우 10 기본 브라우저이다.


인터넷 익스플로러


마이크로소프트 인터넷 익스플로러

HTML5 지원이 취약한데다 IE11을 마지막으로 더이상 개발되진 않지만 국내에선 많이 사용되는 브라우저이다.


+ Recent posts