HTML 웹 프로그래밍을 위한 준비물
HTML 문서 작성의 기초
HTML 문서의 구성요소
- 하나의 HTML 문서는 다양한 요소들의 조합으로 구성
HTML 문서 작성 시 주의사항
1. 태그는 대소문자를 구분하지 않음
- <HTML> = <Html> = <html> → 소문자 표기를 권고
2. 파일의 확장자는 반드시 htm 또는 html로 지정
- 파일명.htm, 파일명.html
3. 화이트스페이스는 입력한 의도대로 적용되지 않음
- 두 칸 이상의 연속된 공백은 하나의 공백으로 처리
4. 요소 안에 다른 요서를 포함할 수 있음
- <요소명1> .... <요소명2>.....</요소명2>.....</요소명1>
HTML 문서의 기본 구조
<!DOCTYPE html>
<html>
<head>
문서 제목(<title>), 메타 데이터(<meta>),
자바스크립트(<script>), CSS(<style>, <link>)
</head>
<body>
문서의 본문 내용
</body>
</html>문서유형 DOCTYPE 선언
- 브라우저가 웹페이지를 올바르게 표시할 수 있도록 문서 형식을 알려주는 지시어
<html> ...... </html>
- 브라우저에게 HTML 문서의 시작과 끝을 알려주기 위한 것
<head> ..... </head>
- 문서의 각종 정보와 문서 자체에 대한 설명을 포함
** 브라우저를 통해 화명에 표시되지 않은
*** <title>, <style>, <link>, <script>, <meta>, <base> 태그
<body> ..... </body>
- 브라우저 화면에 실제로 출력해서 보여주려는 모든 내용을 포함
헤드 부분에 들어가는 내용
<title> ..... </title>
- 웹브라우저 상단(탭)에 HTML 문서의 제목을 표시할 때 사용
** 즐겨찾기 제목으로도 사용
<link> ..... </link>
- 별도 파일로 작성된 CSS 스타일을 웹 문서에 적용할 때 사용
** <link rel="stylesheet"href="파일명.css">
*** 문서의 body 부분에 포함 가능
<meta>
- 웹 문서의 문자 인코딩 방식, 문서에 대한 간략한 설명, 문서의 키워드, 저작자 등의 다양한 정보를 표현
헤드 부분에 들어가는 내용
<base>
- 웹 문서의 기본적인 URL 경로 지정
** body 부분 내의 상대 경로로 표시된 URL을 절대 경로로 취급
브라우저에서 문서의 소스 확인 방법
사이트에서 마우스 <우 클릭> → <페이지 소스 보기>
개발자 도구 (HTML, CSS, 자바스크립트의 테스트 및 디버깅을 위한 도구)
사이트에서 마우스 <우 클릭> → <검사> → 웹문서 동작 및 문제 확인 가능
정리하기
1. HTML이란?
1) 인터넷상에서 사용되는 웹페이지 정보를 표현
2) 특징과 역사
• 1991. 팀 버너스-리 개발 → 2014. HTML5
2. HTML 문서 작성을 위한 준비
1) 문서 작성을 위한 편집기
2) 문서 실행을 위한 웹브라우저
3. HTML 문서 작성의 기초
1) 문서는 하나 이상의 요소들로 구성
• <시작태그 속성명=“속성값“ …> 내용 </종료태그>
2) HTML 문서 작성 시 주의사항
3) HTML 문서의 기본 구