🤔 html이란?
📖정의
HTML이란 Hypertext Markup Language의 약자로 프로그래밍 언어는 아니지만
웹 페이지와 그 내용을 구조화하기 위해 사용하는 마크업 언어입니다.
즉, 웹 브라우저를 통해 사용자에게 보여지는 웹문서를 작성하기 위한 언어입니다.
Hyper Text
웹 페이지를 다른 페이지로 연결하는 링크
웹 페이지는 HTML 문서라고도 불리며, HTML 태그들로 구성되며,
각각의 HTML 태그는 웹 페이지의 디자인이나 기능을 결정하는데 사용됩니다.
기본구조
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <!-- HEAD 영역 -->
5 </head>
6 <body>
7 <!-- BODY 영역 -->
8 <body>
9 </html>-
<!DOCTYPE html>: html 문서 타입 명시 (html5) -
html: 웹페이지의 시작과 끝, 페이지 전체의 컨텐츠를 감싸는 루트(root) 요소 (최상위 요소) -
head: 웹브라우저 화면에 직접적으로 나타나진 않는 웹페이지의 정보- meta tag : 문서의 일반적인 정보와 문자 인코딩을 명시
- title
-
body: 웹 브라우저 화면에 나타나는 모든 콘텐츠
요소(Element)
요소의 구조
1 <h1>This is Title!</h1>
2 <h2>fix you</h2>
3 <p>
4 HTML 소개 / 1. HTML은 어떻게 생겼을까
5 </p>- 여는 태그 (opening tag) : <요소의 이름>
- 닫는 태그 (Closing tag) : </요소의 이름> (여는 태그와 동일한 요소의 이름)
- 내용 (Content) : 요소의 내용 (실질적으로 보여지는 부분)**
- 요소 (Element) : 여는 태그, 닫는 태그, 내용을 통틀어 요소(element)라고 합니다.
태그의 경우 대소문자를 구분하진 않지만, HTML5에서는 모두 소문자로 작성하는 것을 권장
빈태그(empty tag)
이미지(image),수평선(hr),줄바꿈(br)등 종료태그 없이
시작태그만을 가지는 태그를 빈태그라고합니다.<img>태그같은 경우 종료태그는 따로 가지지 않지만
해당 요소의 내용이 끝났다라는 의미로 꺽쇠를 닫기전 (/) 슬래시를 기재해 주기도합니다.
기능상으로는 있어도 없어도 상관없지만 협업에 있어 원활한 소통과 이해를 돕기위해
한가지의 방식으로 통일하여 사용하는 것이 좋습니다.
예시
1 <br>
2 <hr>
3 <img src="http://image.url/images/icon.jpg"/>
4 <meta charset="utf-8">
5 <input type="text" name="name">
<br> </br> 동일하게 작동📌 일관성 있게 코드 작성하기
요소의 중첩
- 요소 안에 다른 요소가 들어가는 포함관계를 성립할 수 있다.
- 이렇게 여러 요소가 중첩될 경우에는 열린 순서의 반대로 닫혀야만 한다.
- 이렇게 서로의 포함관계(부자관계)를 구분하기 위하여 들여쓰기를 사용한다.
예시
1 <html>
2 <head>
3 <title>요소의 중첩</title>
5 </head>
6
7 <body>
8 <h1>요소안에 <strong>다른 요소가</strong> 들어 갈 수도 있습니다 </h1>
9 <ul>
10 <li>하나</li>
11 <li>둘</li>
12 <li>셋</li>
13 </ul>
14 </body>
15 </html>블록 레벨 요소 vs 인라인 요소
tag가 정의될때 블록인지 인라인인지 정의되어 태어남. 하지만 변경이 가능하다.
법칙에 대한 이야기 (문서의 흐름에 따라 배치)
1️⃣ 블록(Block)
- 블록 레벨 요소는 언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지한다. (부모가 허용한 최대한의 가로너비)
- 상자를 아래로 쌓는 것!
2️⃣ 인라인(Inline)
- 인라인 요소는 줄의 어느 곳에서나 시작할 수 있습니다.
- 바로 이전 요소가 끝나는 지점부터 시작하여, 요소의 내용(content)만큼만 차지한다.
📌 포함규칙
- 같은 형태의 다른 요소를 안에 포함할 수 있다.
(블록>블록, 인라인>인라인)
- 대부분의 블록 요소는 다른 인라인 요소도 안에 포함하라 수 있다.
- ❗️ 인라인 요소는 블록요소를 포함 할 수 없다.
주석 (Comments)
- 브라우저는 주석을 무시하여 사용자가 주석을 보이지 않게 한다.
- 주석의 목적은 코드에 메모를 추가하거나, 혹은 사용하지 않는 코드를 임시로 처리하기 위함이다.
기록은 기억을 이긴다 🐾