HTML 문서의 구성 요소
: 하나의 HTML 문서는 다양한 요소들의 조합으로 구성
요소 - <시작태크 속성명="속성값" ...>내용</종료태그>
: 속성
<p>HTML 웹프로그래밍</p>요소는 기본적으로 시작태그와 종료태그는 하나의 쌍을 이루는데
경우에 따라서는 종료태그없이도 사용되는 태그도 있다.
<img>,<hr>,<br> 등
전역 속성
: 속성인데 글로벌하다는 의미( 모든 태그에서 사용이 될 수 있다.)
class, id, style,lang, title 등
HTML 문서 작성 시 주의사항
1. 태그는 대소문자를 구분하지 않지 않지만 소문자 표기를 권고 한다.
2. 파일의 확장자는 반드시 htm, html로 지정
( 파일명.htm or 파일명.html)
3. 화이트페이스는 입력한 의도대로 적용되지 않음
-> 두 칸 이상의 연속된 공백은 하나의 공백으로 처리됨
3. 요소 안에 다른 요소를 포함할 수 있음(단. 안에 있어야함)
<요소명1> .. <요소명2> ... </요소명2> ... </요소명1> = O
<요소명1> .. <요소명2> ... </요소명1> ... </요소명2> = X
HTML 문서의 기본 구조
<!DOCTYPE html>
<html>
<head>
<title>/<meta>/<script>/<style>/<link>
</head>
<body>
문서의 본문 내용
</body>
</html>
<title> : 문서 제목
<meta> : 메타 데이터
<script> : 자바스크립트
<style>, <link> : CSS
∴ 문서유형 DOCTYPE 선언
:브라우저가 웹페이지를 올바르게 표시할 수 있도록 문서 형식을 알려주는 지시어
<!DOCTYPE html>
∴ 브라우저에게 HTML 문서의 시작과 끝을 알려주기 위한 태그
<html> ... </html>∴ 문서의 각종 정보와 문서 자체에 대한 설명을 포함하는 태그
<head> ... </head>
★ head 태그에 들어가는 태그
<title> ... </title> : 웹브라우저 상단(탭)에 HTML 문서의 제목을 표시할 때 사용
-> 즐겨찾기 제목으로도 사용된다.
<link> ... </link> : 별도 파일로 작성된 CSS 스타일을 웹 문서에 적용할 때 사용
-> <link rel="stylesheet" href="파일명.CSS">
문서의 body 부분에 포함가능하나 가급적 head에 사용하는 것이 용이
1. <meta>
: 웹 문서의 문자 인코딩 방식, 문서에 대한 간략한 설명, 문서의 키워드, 저작자 등의 다양한 정보를 표현
<문자 인코딩 방식>
<meta charset="UTF-8">
<문서에 대한 간략한 설명>
내용설명
<meta name="description"content="문서성명">
키워드
<meta name="keyword"content="키워드1, 키워드2 ...">
저작자
<meta name="author"content="웹문서작성자">
<CSS 와 자바스립트 삽입 (body부분에도 포함 가능)>
<style>
스타일 지정
</style>
<script>
자바스크립트 코드
</script>
2. <base>
: 웹 문서의 기본적인 URL 경로 지정
˙ body 부분 내의 상대경로로 표시된 URL을 절대 경로로 취급
<base href="http://cs.kpia.ac.kr/html">
<a href="http://www.kpia.ac.kr/html/ex.html">˙ 웹 페이지가 출력될 윈도우 지정( 연결된 문서가 새로운 창에서 열림)
<base target="blank">
<a href="ex.html">∴ 브라우저 화면에 실제로 출력해서 보여주려는 모든 내용을 포함하는 태그
<body> ... </body>HTML 문서의 작성과 실행
1. 텍스트 편집기를 이용한 문서 작성
2. 문서 저장
(메모장 활용 - 저장 -> 파일명.html / UTF-8/ 모든파일)
3. 문서의 실행 및 결과 확인
(크롬 브라우저를 사용)
4. 브라우저에서 문서의 소스 확인 방법
(우측 클릭 -> 단축 메뉴 -> 페이지 소스 확인)
5. 개발자 도구(HTML, CSS, 자바스크립트의 테스트 및 디버깅을 위한 도구)
(우클릭 -> 단축 메뉴 -> 검사)
'WEB > HTML' 카테고리의 다른 글
| 글자 스타일 지정 (0) | 2021.04.13 |
|---|---|
| 텍스트 표현 (0) | 2021.04.13 |
| 태그 (0) | 2021.04.12 |
| HTML 실습 - 사이트 완성 (0) | 2021.04.06 |
| HTML 실습1 :모델링을 HTML로 만들기 (0) | 2021.04.06 |
