티스토리 뷰
HTML이란?
👓 HTML의 생김새
웹 페이지를 구성하는 요소 하나하나가 태그이다.
태그를 통해 요소의 종류를 명시하며, HTML5 웹 표준에 맞게 작성한다!<a>contents</a>
와 같이 작성하며,
앞의 <a>
는 여는 태그, </a>
는 닫는 태그, contents
는 내용 부분이다.
그리고 이것을 다 합하여 요소라고 한다!
일관성 있게 태그 이름을 소문자로 작성하는 것을 권한다.
🧣 빈 요소
내용이 없는 요소를 빈 요소라 부른다. (Empty elements)
닫는 태그를 명시하지 않아도 되며,
Self-Closing element, Void element, Single tag라고도 부른다.
<area>
,<base>
,<br>
,<col>
,<embed>
,<hr>
,<img>
,<input>
,<link>
,<meta>
,<param>
,<source>
등이 있다.
https://developer.mozilla.org/ko/docs/Glossary/Empty_element
🧢 요소의 중첩
요소 안에 다른 요소가 들어갈 수 있다.
❗ 1. 여러 요소가 중첩될 때에는, 열린 순서의 반대로 닫아야 한다!
❌
<p>안녕하세요!<strong></p>또야입니다!</strong>
⭕
<p>안녕하세요!<strong>또야입니다!</strong></p>
잘못 쓰면, 의도한 대로 화면에 표현되지 않는다.
❗ 2. 포함관계를 나타내기 위해 들여쓰기를 사용한다.
아래 코드에서 li는 ul에 포함된 관계이다.
<ul>
<li>원</li>
<li>투</li>
<li>뚜리</li>
</ul>
👘 주석
코드에 대한 메모를 하거나 사용하지 않는 코드를 숨길 때 사용한다.
아래와 같이 사용한다.
<--! comments -->
좋은 주석을 쓰는 방법도 검색하여 참고해보았다.
HTML 문서의 구조
<!DOCTYPE html>
<!-- 1️⃣ 나는 HTML5 문서이다! -->
<html>
<!-- 2️⃣ 나는 head와 body의 부모이자 root 요소! -->
<head>
<!-- 3️⃣ 나는 head, 웹브라우저가 인식할 수 있는 부분! -->
</head>
<body>
<!-- 4️⃣ 나는 body, 화면에 나타나는 콘텐츠 담당! -->
</body>
</html>
👔 HEAD 태그
HEAD
태그는 기계(웹브라우저)가 인식 가능한 메타데이터
이다!
문서의 속성을 지정해주는 부분이라고 보면 된다.
화면에 직접적으로는 표시되지 않는 부분이다.
메타데이터는 목적을 가지고 만들어진 데이터에 대한 데이터이다.
예로는 meta
, title
태그 등을 삽입 가능하다.
🥽 BODY 태그
HEAD
태그와는 다르게, 화면에 직접적으로 보여지는 콘텐츠를 담당한다!
하지만 HEAD
태그와 BODY
태그의 공통점은,
한 HTML 문서 당 하나씩만 존재 가능하다는 점!
정말 많은 특성이 있고, 더 이상은 쓰지 않는 특성도 있다. (속성명 변경 등의 이유로)
🐬 블록과 인라인
Block
요소는 팔을 벌려 너비 공간을 가능한 대로 차지!Inline
요소는 요소의 내용만큼만 차지!
대표적인 Block
요소 : <div>
, <p>
, <h1>
대표적인 Inline
요소 : <span>
, <a>
, <em>
❗ 인라인 요소는 블록 요소를 포함할 수 없다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>실습</title>
<style>
* {
font-size: 5vw;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<span>4</span>
<span>5</span>
<span>6</span>
</body>
</html>
위 코드를 실행해보면,
1 2 3은 아래로, 4 5 6은 우측으로 나열되며 표현된다.
❗ 실습해보자 ❗
가장 큰 예로 하이퍼링크에 대한 색상 변경이 있는데,
코드를 작성해 실습해보자!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>실습</title>
<style>
a:link {
/* 방문 전 */
color: blue;
}
a:visited {
/* 방문 후 */
color: red;
}
a:active {
/* 클릭 시 */
color: green;
}
</style>
</head>
<body>
<a href="https://likethefirst.tistory.com/">티스토리</a>
</body>
</html>
위 코드는 하이퍼링크를 클릭 전에는 blue
색상,
클릭 당시에는 green
색상, 방문 후에는 red
색상으로 지정해준다.
더이상 link
, alink
는 사용하지 않는다고 하니 참고할 것!
콘텐츠 카테고리
콘텐츠 카테고리에는
- 메타데이터 콘텐츠 - 메타데이터 요소
- 플로우 콘텐츠 - 거의 모든 요소
- 섹션 콘텐츠 - 구획을 나눌 때 사용
- 헤딩 콘텐츠 - 제목과 관련
- 프레이징(구문) 콘텐츠 - 텍스트 마크업
- 임베디드(내장) 콘텐츠 - 외부 소스 삽입
- 인터랙티브 콘텐츠 - 사용자와 상호작용
의 7가지가 있고, MDN 공식문서의 기술 요약에
이에 따른 분류가 나와 있으니 어떤 것인지 정도는 알아두고 가는 것이 좋겠다.
❗ 섹션 콘텐츠와 헤딩 콘텐츠는 포함관계에 있지 않다!
'Programming Language > HTML, CSS, JavaScript' 카테고리의 다른 글
[HTML/CSS] 메타데이터 요소 (0) | 2021.11.10 |
---|---|
[HTML/CSS] 텍스트 요소 (0) | 2021.11.09 |
[HTML/CSS] Visual Studio Code 알면 좋은 확장 프로그램, 단축키, 꿀팁 (4) | 2021.11.08 |
[HTML/CSS] HTML의 개요와 기본 개념 (0) | 2021.11.07 |
[HTML/CSS] 웹 접근성에 대한 고찰 (0) | 2021.10.12 |
- Thanks for comming.
- 오늘은
- 명이 방문했어요
- 어제는
- 명이 방문했어요