html 문서 기본 구조
<!DOCTYPE html>
<html>
<head >
<meta charset="utf-8">
<title>문서의 제목을 쓰는 곳</title>
</head>
<body>
브라우저 화면에 표시할 내용을 작성하는 곳
</body>
</html><!DOCTYPE html>
문서의 첫 부분에서 문서 유형을 지정하는 단일 태그이다. 현재 표준으로 사용되고 있는 HTML 버전을 사용하기 위해 적어주는 타입이 바로 'html'이다.
<html>~</html>
문서 유형을 지정한 후 실제 문서가 시작되고 끝나는 것을 나타내는 태그이다. 에서부터 HTML 문서가 시작되고 에서 HTML 문서가 끝난다. 이 태그의 내부에 다양한 태그들이 포함되어 문서의 내용을 구성한다.
<head>~</head>
웹 브라우저 화면에는 보이지 않지만 웹 브라우저가 알야할 모든 정보들은 모두 이 태그에 들어간다.
<meta charset="utf-8">
문자 인코딩 및 문서 키워드 등에 대한 요약 정보를 기입하는 단일 태그이다. 문자 인코딩이란 한글을 표시하기 위해 문자 세트를 지정하는 작업으로, 영문과 한글을 모두 사용하기 위해 utf-8 방식을 사용하는 것이 좋다.
<title>~</title>
문서의 제목을 나타낸다. 콘텐츠는 브라우저 탭에 표시된다.
<body>~</body>
실제 브라우저 화면에 표시될 내용을 입력하는 태그이다. 여기에는 다음과 같은 유형의 태그들이 포함될 수 있다.
- 텍스트를 표시하는 태그
- 이미지를 표시하는 태그
- 각종 사용자 인터페이스(버튼, 입력란, 드롭다운 메뉴 등)를 나타내는 태그
텍스트 태그 사용 방법과 특징
- p 태그는 문단을 표시하는 태그이다.
- h1~h6 태그는 헤드라인을 표시하는 태그이며, 숫자가 작을수록 크다.
- 수평선 hr은 주제 변경이나 내용 구분 시에 사용하는 태그이다.
- HTML은 텍스트의 줄바꿈, 공백 등을 엔터와 스페이스로 처리하지 않는다.
- 스페이스는 한 번씩만 허용된다(연달아 입력할 경우 한 번 외엔 무시).
- 태그 br 은 줄바꿈을, 문자조합 는 공백을 나타낸다.
태그의 구분
- HTML 문서의 요소는 블록 레벨 요소와 인라인 요소로 구분할 수 있다.
- 블록 레벨 요소는 너비(공간)를 모두 차지하여 블록을 형성한다. ex)
태그,
태그
- 인라인 요소는 콘텐츠를 표시하기 위해 필요한 공간만 차지한다. ex) 태그, 태그, 태그
