HTML 기본기 다지기

참고도서: 모던웹 HTML5 바이블. (한빛미디어)

웹의 역사

웹의 전체 명징은 World Wide Web입니다. 영어 단어의 첫번째 글자만을 모아서 www라고도 부르기도 합니다.

웹은 인터넷 네트워크망에서 동작합니다. 인터넷은 전 세계를 연결하고 있는 국제 정보 통신망 입니다.

웹은 1991년에 처음 등장하였습니다. 웹은 오래된 기술이고, 현재 가장 핫한 기술이기도 합니다.

인터넷의 시작
html의 버젼

html1 : 1991년 html4 : 1997년 html5 : 2014년

웹 2.0 시대

웹 2.0 이라는 용어는 2004 년 O’R eilly Media and Media Live International 에서 발표되었습니다.

웹, HTML 이해

인터넷과 웹에 대해서 알아 봅니다. 또한 웹에서 화면을 출력하는 방법과 HTML 문서에 대해서 알아 보도록 합니다.

HTML이란 무엇일까요?

HTML은 브라우저를 통하여 컴퓨터에 화면에 컨덴츠를 출력하기 위한 문서 포맷 구조 입니다.

포맷이란 무엇일까요?
브라우저란 무엇일까요?

HTML 버젼

웹의 HTML은 오래된 양식 포맷입니다. 현재는 HTML 버전 5.x를 기반으로 작성합니다.

HTML4 버젼
HTML5

HTML5가 나오기 까지 10년

HTML과 CSS와의 관계

HTML5 시대가 되면서 이제 웹사이트를 구현하기 위하여 CSS는 필수가 되었습니다.

CSS는 html의 골격에 디자인을 입히기 위한 스타일 시트 입니다.

웹사이트 꾸미기
인터렉티브한 웹사이트 구현
반응형 웹 디자인 구현

웹 표준이란

웹 표준은 어떻게 화면을 보여 주는 것인가가 아닌 무엇을 보여주는가를 중점으로 설계하는 것입니다.

실습준비

HTML 작성 및 실습을 하기 위해서는 브라우저와 코드편집기가 필요로 합니다.

브라우저 설치 : 크롬

크롬 브라우저는 최신의 HTML/CSS 스팩을 지원하고 있습니다. 또한, 다양한 개발자 도구가 지원 되기 때문에, 개발자에게 선호되는 브라우저 입니다.
편집기: vscode

html 코드를 작성하기 위한 텍스트 편집기 입니다.
웹서버 : 라이브서버

vs코드의 확장 기능을 통하여 간단한 웹서버를 구동해 봅니다.
운영하기 : 클라우드

실제로 웹사이트를 운영하기 위해서는 클라우드와 같은 외부의 서버가 필요로 합니다. 또한 이를 접속하여 관리할 수 있는 몇개의 도구들이 더 필요로 합니다.

Hello World 만들어 보기

무작정 사용해 보기

코드 작성규칙

HTML을 학습하기 전에 몇가지 코드 규칙을 알아두는 것이 좋습니다.

테그는 소문자로 사용합니다.
여는 테그와 닫는 테그
들여쓰기

HTML 구조

HTML 구조에 대해서 알아 봅니다.

UTF-8(BOM)

HTML5 구조

HTML4와의 차이점

doctype
html 태그
head 태그
body 태그

HTML 기본 테그

제목테그 : h1~6
단락테그 : p
줄바꾸기 : br
진하게 : b
이텔릭체 : i
링크 : a

개발자 도구

인터넷 웹 브라우저는 다양한 종류들이 존재 합니다.

브라우저 종류

인터넷 익스플로어
파이어폭스
크롬
사파리

개발자도구

최신의 웹브라우저는 개발자도구 들이 포함되어 있습니다. 개발자의 도구를 이용하면 작성한 html이 화면에 어떻게 출력이 되는지, 네트워크의 연결 상태는 어떤지를 한눈에 파악을 할 수 있습니다.

HTML란

html의 버전

기본적인 용어는 html 입니다. html5라는 용어는 기존의 html4와의 구분을 위해서 사용하는 용어 입니다.

표준

웹은 문서를 만들때 정햐진 규약이 있습니다. 규약에 맞는 웹문서를 만들어야 합니다.

다양한 브라우저가 있습니다. 표준에 맞게 작성된 문서가 정확하게 화면을 표시할 수 있습니다.

다양한 기기 지원

웹은 PC뿐만 아니라 모바일 기기에도 출력을 할 수 있도록 다양한 기기를 지원합니다.

인터렉티브 사이트

과거의 웹사이트는 단방향의 정보를 제공하는 페이지 였습니다. 하지만, 최근의 웹사이트는 사용자와 정보를 주고 받을 수 있는 양방향성의 웹사이트 입니다.

이를 인터렉티브 사이트라고 합니다.