02. HTML 문서의 기본구조
1. HTML 문서의 기본 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>문서의 제목</title>
</head>
<body>
문서의 내용
</body>
</html>
- <!DOCTYPE>: html 종류와 버전, html5에서는 dtd참조 필요 없음
* DTD(Document Type Definition): https://en.wikipedia.org/wiki/Document_type_definition
- <html lang="ko">......</html>: 모든 html문서는 <html>로 시작하여 </html>로 끝난다.
- <head>......</head>: 문서의 각종 정보와 문서 자체에 대한 설명
- <body>......</body>: <body>와 </body> 사이에 문서의 내용을 넣는다.
2. HTML 요소의 구성
http://www.ktword.co.kr/test/view/view.php?m_temp1=5414
- 요소(Element): html의 모든 구성요소
- 구성: 요소는 기본적으로 시작태그(tag), 내용(content), 종료태그로 구성된다.
- 태그(tag): 정보 검색을 쉽게 할 수 있도록 부여하는 키워드나 단어
보통은 시작태그와 종료태그로 구성되지만, 일부는 시작태그만 있는 경우도 있다.(예. img, br, hr 등)
- 속성(attriute): 시작태그에만 사용, 추가적인 정보를 제공하여 명령을 구체화 속성명="속성값"의 형태로 기술, 여러 개의 속성이 있는 경우 공백으로 구분
3. HTML 문서 작성시 주의사항
- 태그(tag): 대소문자 구분하지 않음
- 파일 확장자: 파일명.htm 또는 파일명.html
- 공백: 두 개 이상의 연속된 공백은 하나의 공백으로 처리
- 태그의 중첩: 허용되지 않음, 태그 내에 다른 태그를 포함할 수 있지만, 각 태그는 중첩되어서는 안된다.
4. HTML 문서의 작성/실행
- HTML 문서의 작성: 에디터를 사용하여 HTML 문서를 작성. 위 '1. HTML 문서의 기본 구조' 참조.
- 저장: 문서를 파일명.htm 또는 파일명.html 형태로 저장.
- 실행: 해당 문서를 더블클릭
참조
* 페이지 소스 보기: 마우스 오른쪽 버튼 -> '페이지 소스 보기' 선택
* 개발자 도구: HTML, CSS, 자바스크립트(Java Script)를 테스트, 디버깅
https://surviveasdev.tistory.com/entry/크롬-개발자도구Chrome-devtools-사용법-간단히-알아보기
- 마우스 오른쪽 버튼 -> '검사' 선택, F12, Ctrl + Shift + I로 개발자 도구 메뉴를 불러 올 수 있다.
5. HTML/CSS/Java Script의 관계
HTML 웹 문서의 구성 = HTML + CSS + Java Script
- HTML: 웹 문서의 뼈대, 문서의 내용
- CSS: 문서의 표현, 디자인
- Java Script; 문서의 동작
#HTML5
#html
#web
#웹
#HTML기본구조
#HTML요소의구성
#HTML문서작성시주의사항
#html문서의작성실행
#웹브라우저개발자도구
세상을 링크하라!!! 모든 링크를 한 자리에...
링크닷컴: https://linkdotcom.mycafe24.com/
유용한 링크, 링크닷컴 #무료 #링크사이트 #링크사이트
컴퓨터 및 일반 유용한 링크들을 모아 놓았습니다. 지금 바로 확인하세요!
linkdotcom.mycafe24.com
'웹프로그래밍 > HTML5' 카테고리의 다른 글
| [HTML5] 04. 텍스트 요소들 (5) | 2023.12.29 |
|---|---|
| [HTML5] 03. Head 요소 (0) | 2023.12.29 |
| [HTML5] 01. 웹 (0) | 2023.12.29 |
| [HTML5] HTML 태그 목차 (1) | 2023.12.29 |
| [HTML5] HTML5 Tag (1) | 2023.12.29 |
