들어가기 전에
웹 페이지를 만들기 위한 가장 기본이 되는 정보는 HTML 문서 구조입니다.
브라우저는 HTML 문서 구조를 통해 HTML 버전, 문서의 제목, 정보, 내용 등을 파악합니다.
그러므로 HTML 문서 구조를 올바르게 사용하는 것이 무엇보다 중요합니다.
문서 구조를 이루는 태그와 기본 구조를 알아보도록 하겠습니다.
핵심키워드
- <!doctype>
- <html>
- <head>
- <body>
- <meta>
학습하기
8) 문서의 기본 구조
HTML의 기본 구조
HTML의 기본 구조는 웹 문서를 작성할 때 반드시 들어가야 하는 기본적인 내용으로 크게는 문서 타입 정의와 <html>요소로 구분합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
<h1>Hello, HTML</h1>
</body>
</html>
문서 타입 정의
문서 타입 정의는 보통 DTD(doctype)라고 부릅니다.
이 문서가 어떤 버전으로 작성되었는지 브라우저에 알려주는 선언문이며 반드시 문서 내 최상단에 선언되어야 합니다.
<html>요소
문서 타입 선언 후에는 <html>태그가 나와야 하고, 자식으로는 <head>태그와 <body>태그가 있습니다.
<html> 태그의 lang 속성은 문서가 어느 언어로 작성되었는지를 의미합니다.
<head>태그에 위치하는 태그들은 브라우저 화면에 표시되지 않습니다.
대신 문서의 기본 정보 설정이나 외부 스타일 시트 파일 및 js 파일을 연결하는 등의 역할을 합니다.
<meta> 태그의 charset 속성은 문자의 인코딩 방식을 지정합니다.
<body>태그에는 실제 브라우저 화면에 나타나는 내용이 들어가며, 앞으로 우리가 다루는 태그들 대부분이 모두 여기에 해당이 됩니다.
위 코드는 가장 기본적인 문서 구조로, 보통은 이보다 더 많은 태그가 들어가게 됩니다.
참고 링크
- HTML doctype declaration
https://www.w3schools.com
- Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, and XML.
- HTML html tag
https://www.w3schools.com
- Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, and XML.
- HTML head tag
https://www.w3schools.com
- Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, and XML.
- HTML body tag
https://www.w3schools.com
- Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, and XML.
- HTML meta tag
https://www.w3schools.com
- Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, and XML.
- <강좌 추천> 예비 개발자의 좋은 시작, [부스트코스 : 웹 프로그래밍]
https://www.edwith.org
- 부스트코스는 NAVER 계열사 등과 함께 만들어가는 현장 중심 온라인 교육 프로그램입니다.
현업 전문가들이 고민하여 만들고 1:1 코드리뷰도 받을 수 있는 부스트코스에서 기업이 원하는 유능한 개발자로 boost하세요!
comment
완료
<!doctype html> 어떤 버전으로 작성되었는지 알려주는 것 → 최상단에 위치 해야 한다.
<html lang="ko"> 어떤 언어로 작성되었는지 알려주는 것
<head> 문서 제목<title>과 js 파일과 같은 것을 연결해줌
<body> 브라우저에 나타나는 내용
good
- html lang: 무슨 언어로 작성되어 있는지 알 수 있음.
- title: 웹 페이지의 제목을 담당함.
- html, head, body 는 문서를 만들 때, 기본적으로 갖고 와야 하는 구조이다.
1.3
2023년 12월 14일 목요일 학습완료!
doctype은 어떤 버전으로 작성되었는지 알려줌 -- 최상단에 위차함
<html>의 lang 속성은 어떤 언어로 작성되었는지 알려줌
내부에는<head>태그와<body>태그로 구성되어있음
<head>태그 : 문서 제목, 파일 연결
<body>태그: 선언 내용
처음배우신분들~~
저도 그랬지만 처음 입문하시는 분들은 메모장을 여시고 <!doctype html> ~중략~ </html> 까지 작성하신 뒤,
메모장 저장하실때 문서명을 연습.html 로 저장하시면 되요
이렇게 하셔도 웹페이지로 작성하신걸 열어보실 수 있어요
처음부터 프로그램으로 연습하면 코드가 잘 외워지지 않더라구요ㅠㅠ
메모장에 코드 작성하시면서 예를 들어 <h1>제목</h1> <!--h1 태그는 가장 큰 크기의 제목태그--> 라는 식으로 주석 까지 쓰면서 배우시면 조금 더 빠르게 외워진답니다
2023.01.06 혹시 저처럼 강의 5분쯤에 만드는 파일을 어떻게 만드는 건지 검색하고 고민하느라 힘들어하실 수강생분들께 알려드립니다! 2022.12.15일부로 강의에서 강사님께서 사용하고 계시는 ATOM 에디터가 종료되었습니다..ㅜㅜ 그러니 ATOM대신 Visual studio code와 같은 다른 html 에디터를 사용하실 것을 추천드립니다! 저는 비쥬얼스튜디오 코드 에디터에서 여러 패키지들을 다운받으니까 자동완성도 되고 아주 편리하더라구요:)
+) 추가로 VIsual studio와 Visual studio code는 같은 회사에서 만들었지만, 둘은 다른 프로그램이므로 이 점 주의하시길 바랍니다!
221023
221017
항상 독타입이 가장 먼저! html=html5, head+body
head - meta, title, link, style... → 표시 X, 문서 기본정보 설정, 외부 스타일시트, 자바스크립트 / *meta는 빈 태그
(meta - charset → 인코딩, UTF-8, 서버에 따라 다를 수 있음 / title - 탭 바 노출)
body - h1 등 대부분의 태그 → 표시 O
<숙제>
1. 더 많은 head 태그 알아보기
2. meta 태그 속성 더 알아보기
1. html 태그는 독타입 선언문과 html태그로 나뉨
2. 독타입 선언문은 반드시 가장 최상위에 노출돼야함. 그 아래에, 해당 코드가 어떤 언아로 표기된건지 알려줘야함.
3. html 태그는 헤드 태그와 바디 태그로 구성됨. 그 중 바디태그만 화면에 실제로 보임
4. 메타태그는 빈태그
5. 주석은 실제 화면에는 보이지 않음. 개발자들끼리 코드에 대한 설명/히스토리를 남겨두는 곳.
5:10 파일을 어떻게 만드는건지...
문서 타입 선언 후에는 <html>태그가 나와야 하고, 자식으로는 <head>태그와 <body>태그가 있습니다.
<html> 태그의 lang 속성은 문서가 어느 언어로 작성되었는지를 의미합니다.
<head>태그에 위치하는 태그들은 브라우저 화면에 표시되지 않습니다.
대신 문서의 기본 정보 설정이나 외부 스타일 시트 파일 및 js 파일을 연결하는 등의 역할을 합니다.
<meta> 태그의 charset 속성은 문자의 인코딩 방식을 지정합니다.
<body>태그에는 실제 브라우저 화면에 나타나는 내용이 들어가며, 앞으로 우리가 다루는 태그들 대부분이 모두 여기에 해당이 됩니다.
위 코드는 가장 기본적인 문서 구조로, 보통은 이보다 더 많은 태그가 들어가게 됩니다.
수강완료
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML 문서의 기본 구조</title>
</head>
<body>
<1>Hello, HTML</h1>
</body>
</html>
<!DOCTYPE html> 문서타입의 정의
<html lang="ko"> 언어 설정
<head>
<meta charset="UTF-8"> 문자 설정
<title>HTML</title> 브라우저의 탭바에 표시
</head>
<body>
<h1>Hello, HTML</h1> 실제 화면에 표시
</body>
</html>
드가자~
<html lang="ko"> 언어 설정
<meta charset="UTF-8> utf -8 보편적