문서구조

교재예제

코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.

구문

Info: 💡 교재예제

1. HTML5기본구성

🔗MDN문서를 보자

html pdf

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

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  ~~타이틀~~
  <h1>타이틀</h1>
</body>
</html>

4-2 . 논리적 마크업

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

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

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

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

ex1-1.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>블록 레벨 요소</title>
</head>
<body>
    <h1>블록 레벨 요소</h1>
    <h2>블록 레벨 요소 성질</h2>
    <p>줄 바꿈이 생깁니다.</p>
</body>
</html>

ex1-2.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>인라인 요소</title>
</head>
<body>
    <strong>인라인 요소</strong>
    <span>인라인 요소는 한 줄로 출력됩니다.</span>        
</body>
</html>

ex1-3_before.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>블록 레벨 요소와 인라인 요소</title>
</head>
<body>
    <span>인라인레벨<h1>블록 레벨 요소</h1></span>
</body>
</html>

ex1-3_after.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>블록 레벨 요소와 인라인 요소</title>
</head>
<body>
    <div>인라인레벨<h1>블록 레벨 요소</h1></div>
</body>
</html>

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

문서구조

교재예제

코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.

구문

Info: 💡 교재예제

1. HTML5기본구성

🔗MDN문서를 보자

html pdf

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

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  ~~타이틀~~
  <h1>타이틀</h1>
</body>
</html>

4-2 . 논리적 마크업

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

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

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

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

ex1-1.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>블록 레벨 요소</title>
</head>
<body>
    <h1>블록 레벨 요소</h1>
    <h2>블록 레벨 요소 성질</h2>
    <p>줄 바꿈이 생깁니다.</p>
</body>
</html>

ex1-2.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>인라인 요소</title>
</head>
<body>
    <strong>인라인 요소</strong>
    <span>인라인 요소는 한 줄로 출력됩니다.</span>        
</body>
</html>

ex1-3_before.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>블록 레벨 요소와 인라인 요소</title>
</head>
<body>
    <span>인라인레벨<h1>블록 레벨 요소</h1></span>
</body>
</html>

ex1-3_after.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>블록 레벨 요소와 인라인 요소</title>
</head>
<body>
    <div>인라인레벨<h1>블록 레벨 요소</h1></div>
</body>
</html>

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