<!DOCTYPE html>
- HTML5 문서를 선언하는 구문
- 생략가능, 하위 호환성을 위해 작성 권장
<html> ~ </html>
- HTML5 문서의 시작과 종료
- 언어 속성을 사용하여 주된 언어 값 설정 가능
<head> ~ </head>
- 웹 페이지의 정보를 정의
- <title>태그와 javascript, 스타일시트 등을 정의
<body> ~ </body>
- HTML5 문서의 본문을 작성
- HTML5 문서의 작성 규칙
- 태그 이름은 대소문자를 구분하지 않음
> 따라서 소문자로 작성할 것을 권장 - 본문 내 연속된 공백이나 줄 바꿈은 하나의 공백으로 처리
> 엔터, 탭, 스페이스바 대신 특수 문자를 사용 권장 - 태그의 포함 관계를 표현하기 위해 들여쓰기 적용
> 문서의 구조를 명확하게 작성(들여쓰기 및 줄 바꿈) - 주석은 <!-- 로 시작해서 -- 로 끝냄
> 소스코드를 설명하거나 불필요한 부분을 일시적으로 사용하지 않기 위해 사용
- 태그의 분류
- 미리 정의되어 있는 태그
- 사용자가 변경할 수 없으며 사용 용도에 맞게 사용(구조 기술 태그, 멀티미디어 태그)
문서의 제목: <h1> ~ </h1>
문서의 구분선: <hr> ~ </hr>
단락 구분: <p> ~ </p>
중요한 문장: <strong> ~ </strong>
줄 바꿈: <br> - 사용자가 직접 정의하여 사용하는 태그
- 사용자가 태그를 직접 설계하고 HTML 문서에 포함하여 작성(의미적 태그, 비의미적 태그)
- 태그의 속성
1. 속성이란?
- 태그의 종속적인 정보를 표현하기 위해 사용
- 태그 없이 단독으로 사용할 수 없음
- 속성="값" 형태로 작성
2. 글로벌 속성
- 모든 태그에 공통적으로 사용 가능한 속성
- 미리 정의된 속성 예제
- 특수 문자 처리
| 특수문자/키보드 | 특수이름 | 아스키코드 |
| < | < | < |
| > | > | > |
| & | & | & |
| Ⓒ | © | © |
| Ⓡ | ® | ® |
| # | # | # |
| 스페이스바(space bar) | |   |
- 웹 문서의 레이아웃
- 화면을 분할하거나 배열하여 구성하는 것
- HTML5 웹 표준에서는 각 영역을 구분하는 구조적 태그 요소를 정의하여 사용
<header>
HTML5 문서의 머리말 영역으로 중요한 정보를 표시
(예 : 사이트의 제목, 로고 등)
HTML5 문서의 머리말 영역으로 중요한 정보를 표시
(예 : 사이트의 제목, 로고 등)
<nav>
내비게이션(navigation) 영역으로 웹 사이트 내에 분류된 다른 영역으로 이동할 때 사용
내비게이션(navigation) 영역으로 웹 사이트 내에 분류된 다른 영역으로 이동할 때 사용
<section>
문서의 영역을 구성할 때 사용. <header>, <article> 태그 등을 포함할 수 있음
문서의 영역을 구성할 때 사용. <header>, <article> 태그 등을 포함할 수 있음
<article>
독립된 주요 콘텐츠 영역을 정의. 하나의 <section> 태그 내에 여러 개의 <article> 태그를 구성할 수 있음
독립된 주요 콘텐츠 영역을 정의. 하나의 <section> 태그 내에 여러 개의 <article> 태그를 구성할 수 있음
<aside>
주요 콘텐츠 이외에 남은 콘텐츠를 표시
(예 : 사이드 바(sidebar) 등).
주요 콘텐츠 이외에 남은 콘텐츠를 표시
(예 : 사이드 바(sidebar) 등).
<footer>
사이트의 자세한 정보를 표시
(예 : 저작권 정보, 관리자 정보, 회사 정보 등)
사이트의 자세한 정보를 표시
(예 : 저작권 정보, 관리자 정보, 회사 정보 등)
'데이터 청년 캠퍼스(2022) > 배운 내용 정리' 카테고리의 다른 글
| 6.29(수) CSS 3 (0) | 2022.06.29 |
|---|---|
| 6.28(화) HTML(2) (0) | 2022.06.29 |
| 6.28(화) 데이터 플랫폼 이론(3) (0) | 2022.06.28 |
| 6.28(화) 데이터 플랫폼 이론(2) (0) | 2022.06.28 |
| 6.27(월) 데이터 플랫폼 이론 (0) | 2022.06.27 |