HTML과의 첫 만남
- 웹 편집기(web editor): 웹 문서를 작성하는 프로그램
- 웹 브라우저(web browser): 웹 문서를 보는 프로그램
- HTML(HyperText Markup Language): 웹에서 자유롭게 오갈 수 있는 웹문서를 만드는 언어
- HTML과 CSS 소스: 웹 브라우저 화면에 내용을 표시할 때 어떻게 해야 하는지 미리 정해 놓은 약속
- HTML은 웹 표준 기술이다.
- 웹 표준은 각 브라우저에 맞게 사이트를 만들어야 하는 상황을 해결하기 위해 등장하였다.
- 웹 표준을 지켜 사이트를 제작하면 일반 사용자는 장소나 브라우저에 상관없이 쉽게 웹 사이트를 볼 수 있고, 웹 개발자와 디자이너는 시간을 절약할 수 있다.
- HTML5와 CSS3를 공부하는 이유
- 최신 표준에 맞는 웹사이트를 제작할 수 있다.
- 앱 화면을 디자인하기 위한 기초이다.
- 앱은 운영체제별로 따로 개발할 수도 있고(네이티브 앱), HTML5의 API를 사요애해 운영체제와 상관없이 실행하는 웹앱을 만들 수도 있다.
- 소스를 이용해 웹사이트와 블로그를 수정하기 쉽다.
- HTML의 역사
- 웹 사용자가 늘고 웹 브라우저가 점점 등장하면서 표준이 필요하게 되었다.
- 팀 버너스 리가 W3C(World Wide Web Consortium)라는 단체를 설립하고 HTML 2.0, 3.2, 4.0을 발표한다.
- 주요 브라우저 업체가 기존 HTML 문서도 지원하면서 최신 웹 환경에 맞게 기존 HTML을 확장하려고 WHATWG를 구성했다. W3C가 이를 받아들여 HTML5로 부르기 시작했다.
웹 브라우저와 웹 편집기
- 프론트엔드: 사용자와 직접 마주하는 부분을 가리키는 것으로 웹 브라우저 화면에 사이트 내용을 보여준다.
- 백엔드: 정보를 저장하고 관리하는 부분을 말한다.
HTML 기본 문서 구조
- 어디가 이미지고 어디가 텍스트인지 표시하는 것을 마크업이라고 한다.
- 마크업할 때 사용하는 약속된 표기법이 태그이다.
- 태그의 특징
- 태그는
<와>를 이용해 구분한다. - 태그는 소문자로 쓴다.
- 여는 태그와 닫는 태그를 정확히 입력한다.
- 웹 브라우저는 여는 태그에서 닫는 태그까지를 태그의 적용 범위로 인식한다.
- 적당히 들여쓴다.
- 여러 번 띄어쓰기를 하더라도 한 칸의 공백으로 인식한다.
- 속성과 함께 사용할 수 있다.
- 포함 관계를 명확히 한다.
- 태그는
실습
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<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>
<!doctype>: 문서 유형을 지정하는 선언문- 웹 브라우저에게 이제부터 처리할 문서는 HTML 문서이고 어떤 유형을 사용했으니 그 버전에 맞는 방법으로 해석하라고 알려준다.
- 과거 HTML4에서는 문서 유형이 여러가지였고 지정하는 소스도 길었다. 그러나 HTML5부터는 단 한 줄로 문서 유형을 선언한다. HTML4에서처럼 strict mode인지 transitional mode(호환모드)이닞 구별할 필요도 없다.
<html>: 웹 문서 시작을 알리는 태그- 문서 유형을 선언한 후 실제 문서 정보와 내용이 시작되고 끝나는 것을 표시하는 태그를 말한다.
lang이라는 속성을 이용해 문서에서 사용할 언어를 지정할 수 있다. 이를 명시하는 이유는 검색 사이트에서 특정 언어로 제한해 검색할 때 그 대상이 될 수 있기 때문이다. 또한 화면 낭독기가 문서를 낭독할 때 이 속성을 참고한다.
<head>: 브라우저에게 정보를 주는 태그<title>: 문서 제목- 방문자나 검색 엔진은 제목 표시줄의 제목을 보고 페이지 전체 내용을 추측한다.
<meta>: 문자 세트를 비롯한 문서 정보- 문자 세트 지정
1
<meta charset="UTF-8">
- 모바일 기기 고려: 스마트폰 등의 기기에서 웹 문서를 제대로 표시할 수 있도록 한다.
1
<meta name="viewport" content="width=device-width, initial-scale=1.0"
- 인터넷 익스플로러 브라우저 고려하기: 현재 웹문서를 최신 표준 모드로 해석하라고 알려준다.
1
<meta http-equiv="X-UA-Compatible" content="ie-edge">
- 검색 엔진 고려: 검색 엔진에서 참조하는 정보(키워드, 설명, 제작자 등) 지정
1 2 3
<meta name="keywords" content="html5, 웹표준"> <meta name="description" content="html5를 통해 웹 표준 공부하기"> <meta name="author" content="Kyunghee Ko">
body태그: 실제 브라우저에 표시될 내용웹 문서에서 특수 문자 및 기호 사용: 엔티티 기호 사용
| 문자 | 문자식 표현(Entity Code) | 숫자식 표현(Entity Number) | 설명 |
|---|---|---|---|
< | < | ‹ | 오른쪽을 향한 꺽쇠 괄호 |
> | > | › | 왼쪽을 향한 꺽쇠 괄호 |
& | & | & | And(그리고) 기호 |
" | " | " | 큰 따옴표 기호 |
| (공백) | |   | 공백 기호 |
웹 문서 만들고 업로드하기
호스팅 서버 준비하기
- HTML로 웹사이트를 만들고 그 내용을 다른 사람들이 볼 수 있도록 하려면 HTML로 만든 웹 문서를 모두 서버 컴퓨터로 옮겨야 한다.
- 개인이 웹 서버를 마련하기는 어렵기 때문에 서버의 일부 공간을 일정 금액을 내고 사용한다.
- 이것을 서버 호스팅 서비스 또는 웹 호스팅 서비스라고 한다,
- 우리는 클라이언트로서 웹 서버를 빌려 쓰면서 FTP 프로그램으로 인터넷에 업로드를 하고, 다른 클라이언트들이 웹 브라우저로 이제 HTML로 만든 웹에 접근할 수 있게 된다.
- 무료 호스팅 서비스는 닷홈에서 가능하다.
FTP 프로그램 설치
- 서버에 파일을 올리고 내릴 때 FTP 프로그램이 필요하다.
- 업로드(upload): 사용자 컴퓨터에서 작성한 웹문서와 파일을 서버로 옮기는 것
- 다운로드(download): 서버에 있는 파일들을 사용자 컴퓨터로 옮기는 것
- FTP(File Transfer Protocol): 서버와 클라이언트 간에 파일을 주고 받을 수 있게 해주는 파일 전송 프로토콜
- FTP 프로그램: 서버와 클라이언트 간 파일 전송을 쉽게 해준다.
- FTP 프로그램은 FileZila를 사용하면 된다.
블로그와 게시판에서 사용하는 HTML 태그
- 위지위그 편집기
- HTML 태그에 대해 잘 알지 못해도 마우스를 클릭해 이미지를 삽입하고 글자 크기나 색을 조절할 수 있는 편집기이다. 블로그에서 많이 사용한다.
- 위지위그 편집기에 입력된 내용은 편집기에서 HTML 태그로 자동으로 바꿔주는데 그러다보니 불필요한 태그가 추가되기도 한다.