05 문서구조

정보

💡 교재예제

1. HTML5기본구성

🔗MDN문서를 보자

head 요소에 포함할수 있는 요소들

요소명	설명
`<meta>`	HTML 문서의 설명, 키워드 문서의 작성자 지정
`<title>`	HTML 문서의 제목 지정
`<link>`	외부 CSS 파일을 연결할때 사용
`<style>`	내부 CSS 를 정의할때 사용
`<script>`	자바스크립트를 외부, 내부에 정의할때 사용

2. 유효성검사

HTML 유효성검사 : https://validator.w3.org/
CSS 유효성 검사 : http://css-validator.kldp.org/

3. 기본규칙

요소는 시작태그와 종료태그가 있다
요소는 제대로 중첩되어야 한다.
주석은 로 작성한다

4. 시멘틱 마크업 VS 논리적 순서 마크업

4-1 . 시멘틱 마크업

마크업시 유의미한 태그의 사용 ex0-2

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
  <title>Document</title>
8
</head>
9
<body>
10
  ~~타이틀~~
11
  <h1>타이틀</h1>
12
</body>
13
</html>

4-2 . 논리적 마크업

정보

👁️‍🗨️ 논리적 순서 마크업은 접근성과 관련이 있습니다. 웹접근성 엿보기 문서

4-5. 블록요소 VS 인라인 요소

태그는 블록과 인라인 요소 두가지의 유형이 있습니다.

유형	특징
블록요소	줄바꿈이 일어난다
	블록요소는 인라인요소를 포함할수 있다.
	블록요소는 블록요소를 포함할수 없다. (div는 제외)
	EX ) p, div, h1~h6, 목록태그, 테이블태그, form
인라인요소	줄바꿈이 안된다.
	인라인요소는 인라인요소를 포함할수 있다.
	인라인요소는 블록요소를 포함할수 없다.
	EX ) span, a, input, b, i, strong, img

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>블록 레벨 요소</title>
6
</head>
7
<body>
8
    <h1>블록 레벨 요소</h1>
9
    <h2>블록 레벨 요소 성질</h2>
10
    <p>줄 바꿈이 생깁니다.</p>
11
</body>
12
</html>

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>인라인 요소</title>
6
</head>
7
<body>
8
    <strong>인라인 요소</strong>
9
    <span>인라인 요소는 한 줄로 출력됩니다.</span>
10
</body>
11
</html>

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>블록 레벨 요소와 인라인 요소</title>
6
</head>
7
<body>
8
    <span>인라인레벨<h1>블록 레벨 요소</h1></span>
9
</body>
10
</html>

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>블록 레벨 요소와 인라인 요소</title>
6
</head>
7
<body>
8
    <div>인라인레벨<h1>블록 레벨 요소</h1></div>
9
</body>
10
</html>

정보

👁️‍🗨️ HTML5의 콘텐츠 모델 🔗https://www.w3.org/TR/2011/WD-html5-20110525/content-models.html