[ Mark UP & Web ] "HTML" 작성을 위한 기본 요소.
∇ HTML의 기본 구성 요소들.
목 차
1. HTML의 태그 & 속성 & 문법 & 주석
2. HTML의 기본 구조
3. DTD와 HTML, head & body
4. HTML의 특징 파악하기.
1. HTML의 태그 & 속성 & 문법 & 주석.
∇ 태그.
- 웹 페이지를 구성하는 요소로는 텍스트*이미지*버튼 등 매우 다양하게 존재합니다.
- 태그는 이런 다양한 구성 요소들을 정의하는 역할을 하며,
" HTML 문서를 다루는 가장 작은 단위 " 입니다.
<태그명>
∇ 속성.
- 속성은 태그에 어떤 의미나 기능을 보충하는 역할을 합니다.
- 속성은 속성명 & 속성값으로 구성 됩니다.
< 태그명 속성명 = "속성값" >
∇ 문법.
- HTMl은 태그와 속성으로 문법을 구성합니다.
- 문법은 콘텐츠가 있는 문법과 컨텐츠가 없는 문법으로 구분됩니다.
○ 컨텐츠가 있는 문법.
- 컨텐츠 앞뒤를 태그로 감싸줍니다.
- 앞부분을 시작 태그, 뒤에 넣는 태그를 종료 태그라고 합니다.
- 시작태그, 종료태그, 컨텐츠를 합쳐서 '요소'라고 합니다.
○ 컨텐츠가 없는 문법.
- 앞뒤를 감싸야 할 컨텐츠가 없으므로, 시작 태그만 사용 합니다.
- '빈 태그'라고 부릅니다.
<br>
∇ 주석.
- 주석은 실행결과에는 표시되지 않지만, 프로덕트 개발 상에 필요한 설명 등을 남기고자 할 때 사용합니다.
- <!-- 주석 내용 -->
- 단, 주석을 사용하면 웹 브라우저상에는 아무것도 표시되지 않지만,
웹 브라우저의 소스 보기 기능으로는 주석을 볼 수 있기 때문에 보안상 중요한 내용은 넣으면 안됩니다.
2. HTML의 기본 구조
3. DTD와 HTML, Head&body&meta
∇ DTD [ Document Type Definition ] : 문서형 정의 구역.
- 웹 브라우저가 전달받아서 처리할 HTML 문서가 어떤 형식을 따라야 하는지 알려줍니다.
- HTML5 이후로는 항상 아래와 같은 형식으로 작성 합니다.
<!DOCTYPE html>
∇ html 태그.
- html 태그는 HTML 문서의 시작과 끝을 의미합니다.
- 모든 태그는 HTML 태그 안에서 작성되어야 합니다.
∇ head 태그(요소)
- head 태그는 HTML 문서의 메타데이터를 정의하는 영역입니다.
- 메타데이터란 HTML 문서에 대한 정보로서, 웹 브라우저에는 직접적으로 노출되지 않습니다.
- 보통 meta, link, style, script 등의 태그를 사용해 HTML 문서의 여러 정보를 정의합니다.
∇ body 태그(요소)
- body 태그는 웹 문서에 표기할 내용들을 작성하는 부분입니다.
- 해당 HTML 문서의 텍스트, 하이퍼링크, 이미지, 리스트 등과 같은
모든 콘텐츠를 포함하는 영역을 정의할 때 사용합니다.
- HTML 문서에는 단 하나의 <body> 요소만이 존재 가능합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>HTML 문서의 제목입니다.</title>
</head>
<body>
HTML 문서의 콘텐츠(contents) 영역입니다.
</body>
</html>
∇ meta태그
- meta 태그는 메타데이터를 정의하는데 사용합니다.
- 문서의 정보를 검색 엔진에 전달하는 역할을 합니다.
√ 문자 집합을 정의하는 메타 데이터
<meta charset="UTF-8">
√ 브라우저의 렌더링 엔진을 강제로 최신 렌더링 엔진으로 지정하는 메타데이터
<meta http-equiv="X-UA-Compatible" content="IE=edge">
√ 기기의 화면 너비에 맞추기 위해 사용하는 메타데이터 ( 반응형 )
<meta name="viewport" content="width=device-width, initial-scale=1.0">유저에게 보이는 화면 영역(뷰포트)는 반응형 UI에서 매우 중요한 역할을 합니다.
뷰포트는 웹페이지에서 스크롤바가 생성되는 기준점이 되기도 합니다.
√ 검색 엔진에 정보 전달.
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Starbucks" />
<meta property="og:title" content="Starbucks Coffee Korea" />
<meta property="og:description" content="스타벅스는 세계에서 가장 큰 다국적 커피 전문점으로, 64개국에서 총 23,187개의 매점을 운영하고 있습니다." />
<meta property="og:image" content="./images/starbucks_seo.jpg" />
<meta property="og:url" content="https://starbucks.co.kr" />
∇ title 태그
- title 태그는 HTML 문서의 제목을 지정하는데 사용 됩니다.
<title>My First Web Page !</title>
4. HTML의 특징 파악하기.
∇ 블록 요소와 인라인 요소.
√ 블록 요소.
- body 태그에서 사용하는 태그들 중 웹 브라우저의 공간 유무에 상관없이
h태그나 p태그처럼 사용 할 때 마다 줄 바꿈이 적용되는 태그가 있습니다.
- 이런 태그로 작성한 코드를 블럭 요소라고 합니다.
√ 인라인 요소.
-반대로, a태그나 span태그처럼 공간이 부족할 경우에만, 줄바꿈이 이루어지는 태그들은
인라인 요소라고 합니다.
∇ 부모-자식-형제 관계
∇ 줄 바꿈 & 들여쓰기
- 코드의 가독성을 위해 줄 바꿈과 들여쓰기를 잘 해야 합니다.
- 탭키 활용 -.> 일반적으로 2칸
'Web & MarkUp > MarkUP [ Html & CSS ]' 카테고리의 다른 글
| [ Web & Mark UP ] CSS 기본 정리. (0) | 2024.10.31 |
|---|---|
| [ Mark UP & Web ] "HTML" 필수 태그들 정리해보기 - [1] (3) | 2024.10.31 |
| [ Mark UP & Web ] HTML 기초 문법 미리보기. (0) | 2024.10.31 |