728x90
HTML의 기본 구성 요소
태그
HTML 문법을 이루는 가장 작은 단위
<태그명> 혹은 <태그명></태그명>속성
태그에 어떤 의미나 기능을 보충하는 역할
<태그명 속성명=”속성값”>문법
- 콘텐츠가 있는 문법
시작 태그와 종료 태그 사이에 콘텐츠 작성<title>Hello World!</title>
- 콘텐츠가 없는 문법
시작 태그만 사용하여 콘텐츠가 없다는 의미로 빈 태그라고도 함.<br>
주석
실제로 작동하지 않는 메모
<!— —>로 사용HTML의 기본 구조
<!DOCTYPE html> <!-- DTD 문서형 정의-->
<html lang="ko"> <!-- html 문서의 시작 -->
<head> <!--head: 문서 정보 정의-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body><!-- 웹 브라우저에 표시할 내용 -->
<!--웹 페이지에 표시할 내용을 적습니다.-->
<p>나의 첫 번쨰 웹 페이지</p>
</body>
</html><!-- html 문서의 끝 -->DTD
웹 브라우저가 처리할 HTML 문서가 어떤 문서 형식을 따라야 하는 지 알려주는 것
위와 같이 작성하면 HTML5 문서 형식으로 인식함.
html 태그
HTML 문서의 시작과 끝을 정의
head 태그
HTML 문서의 메타데이터를 정의
메타데이터?
HTML 문서에 대한 정보
- meta 태그메타 데이터를 정의하는 데 사용 이 코드는 HTML 에서 허용하는 문자 집합을 정의함
<meta charset="UTF-8">
- title 태그HTML 문서의 제목을 정의하는 데 사용 (검색 되는데에는 중복되지 않은 제목이 중요함)
body 태그
웹 브라우저에 노출되는 내용을 작성하는 영역
HTML의 특징 파악하기
블록 요소와 인라인 요소
<p><hn> 처럼 사용 시 자동 줄바꿈이 되는 요소는
블록 요소<a> <span> 처럼 사용 시 줄바꿈이 안되는 요소는
인라인 요소부모, 자식, 형제 관계
어떤 태그 안에 존재하는 태그가 있다면 두 태그는 서로 부모 자식 관계
만약 자식 태그가 여러 개라면 해당 자식 태그들은 형제 관계
줄 바꿈과 들여쓰기
가독성을 위해 HTML 문서 작성 시 줄 바꿈과 들여쓰기를 습관화 하기
728x90
반응형
'Web > FrontEnd' 카테고리의 다른 글
| [FrontEnd] Ch.6 CSS 필수 속성 알아보기-2 (0) | 2024.07.17 |
|---|---|
| [FrontEnd] Ch.6 CSS 필수 속성 알아보기-1 (0) | 2024.07.15 |
| [FrontEnd] Ch.05 CSS 선택자 다루기 (0) | 2024.07.14 |
| [FrontEnd] CH.4 CSS 문법 살펴보기 (0) | 2024.07.10 |
| [FrontEnd] Ch.3 HTML 필수 태그 정리 (0) | 2024.07.09 |
