HTML(HyperText Markup Language) : 웹 페이지의 뼈대를 구성하는 마크업 언어
트리 구조(tree structure)
: 태그 안에 태그를 넣고 들여쓰기(indent) 하는 것!
<html> <!--parent--> <head></head> <!--children--> <body></body> </html>
Element | Description |
---|---|
<html> | <html> 요소는 문서의 루트(최상단 요소)를 나타내며, '루트 요소'라고도 부른다. |
<head> | 기계가 식별할 수 있는 문서 정보(메타데이터)를 담는다. 🫙 문서가 사용할 title , script , style 에 대한 정보 |
<body> | HTML 문서의 내용을 나타내며, 한 문서에 하나의 요소만 존재할 수 있다. |
<head>
태그 안에 들어가는 메타데이터 태그들
Element | Description |
---|---|
<meta> | base , link , script , style , title 과 같은 다른 메타 관련 요소로 나타낼 수 없는 Metadata를 나타낸다. |
<title> | 브라우저/탭에 보이는 문서 제목을 정의한다. |
<base> | 문서 안의 모든 상대 URL이 사용할 기준 URL을 지정한다. 문서에는 하나의 요소만 존재할 수 있다. |
<link> | 현재 문서와 외부 리소스와의 관계를 명시한다. 🫙 CSS 연결, 사이트 아이콘(Fabicon), 앱 아이콘 연결 등 |
<style> | 문서에 대한 스타일 정보를 포함한다. |
Element | Description |
---|---|
<header> | 페이지나, 섹션의 가장 윗부분에 위치하며, 소개 및 탐색에 도움을 주는 콘텐츠를 나타낸다. 🫙 제목, 로고, 검색창, 상단바, 작성자 이름 등 |
<nav> | 내비게이션(navigation)의 약자, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용한다. 🫙 메뉴, 목차, 색인 등 |
<main> | 문서의 주요 콘텐츠를 나타낸다. |
<article> | 문서, 페이지, 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타낸다. |
<section> | 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용한다. |
<h1~6> | 6단계의 제목을 나타낸다. |
<aside> | 문서의 주요 내용과 간접적으로만 연관된 부분을 나타낸다. 🫙 사이드바, 광고창, 콜아웃 박스 |
<footer> | 페이지나, 섹션의 가장 윗부분에 위치하며, 추가적인 콘텐츠를 나타낸다. 🫙 작성자, 저작권 정보, 주소, 연락처, 관련 문서 등 |
<address> | 해당 문서와 관련된 사람, 단체, 조직의 연락처 정보를 나타낸다. |
section, article, div의 구분
- 독립적으로 구분해 배포하거나, 재사용할 수 있는 내용 :
<article>
ex. blog post, news article..- 서로 관계가 있는 내용 :
<section>
- 의미적으로 관계가 없는 내용 :
<div>
header와 h1의 차이
<header>
는 영역을 나눌 때 사용 ➡️ 제목, 로고, 검색창 등을 포함<h1>
은 제목 텍스트를 입력할 때 사용
Element | Description |
---|---|
<div> | 콘텐츠를 분할하는 요소로, CSS로 꾸미기 전에는 콘텐츠나 레이아웃에 어떤 영향도 주지 않는다 |
<ul> | Unordered list, 정렬되지 않은 목록을 나타낸다. |
<ol> | Ordered list, 정렬된 목록을 나타낸다. |
<li> | List, 목록 안의 항목을 나타낸다. |
<p> | Paragraph, 하나의 문단을 나타낸다. |
<hr> | Horizental rule, 구획 내 주제 변경, 분리시 사용하는 수평선 |
p와 div의 차이
- p : 단락이 나누어지며, 줄 바꿈 시 마진이 발생한다.
- div : 단지 영역을 구분할 뿐이며, 마진이 없다.
Element | Description |
---|---|
<a> | Anchor, href 속성을 통해 다른 URL로 연결하는 하이퍼링크를 만든다. |
<span> | 인라인 컨테이너로, 본질적으로는 아무것도 나타내지 않는다. |
<br> | Single line break, 줄바꿈을 한다. |
<strong> | 중대하거나 긴급한 콘텐츠를 나타낼 때, 텍스트를 볼드체로 표시한다. |
<i> | Italic, 어떤 이유로 주위와 구분해야 할 때, 텍스트를 이탤릭체로 표시한다. |
<u> | Underline, 틀린 단어나 고유 명사 등을 일반 텍스트와 구분해야 할 때, 텍스트에 밑줄을 표시한다. |
<small> | 덧붙이는 글이나, 저작권과 법률 표기를 할 때, 텍스트를 작게 표시한다. |
<s> | Strikethrough, 텍스트에 취소선을 표시한다. |
div과 span의 차이
<span>
은<div>
와 매우 유사하지만,
<div>
는 블록 레벨 요소인 반면,<span>
은 인라인 요소이다.
Element | Description |
---|---|
<img> | 문서에 이미지를 넣는다. |
<audio> | 문서에 오디오 콘텐츠를 넣는다. |
<video> | 비디오 플레이백을 지원하는 미디어 플레이어를 문서에 넣는다. |
<track> | audio , video 요소의 자식 태그로, 자막 등 시간별 텍스트 트랙을 지정할 때 사용한다. |
<map> | 이미지맵(클릭 가능한 이미지)을 정의할 때 사용한다. |
<area> | map 요소의 자식 태그로, 이미지의 핫스팟 영역을 정의하고 hyperlink를 추가한다. |
Element | Description |
---|---|
<form> | 정보를 제출하기 위해 대화형 컨트롤을 포함하고 있는 section을 나타낸다. |
<input> | 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성한다. 타입 : text, password, radio, checkbox, button, number, email, tel, file, image, time, date, range, search, submit, url 등 / input태그의 타입 MDN |
<textarea> | 멀티라인의 텍스트 편집 컨트롤을 나타낸다. |
<button> | 클릭 가능한 버튼을 나타낸다. |
<datalist> | 옵션 메뉴를 제공하는 컨트롤과 입력창을 나타낸다. |
<select> | 옵션 메뉴를 제공하는 컨트롤을 나타낸다. |
<optgroup> | select 요소의 자식 요소로 select 요소의 옵션들을 묶을 수 있다. |
<option> | select , datalist , optgroup 요소의 자식 요소로, 항목을 정의한다. |
<label> | 사용자 인터페이스 항목(text, checkbox..)의 설명을 나타낸다. input의 id속성과 label의 for 속성으로 서로 연결할 수 있다. |
datalist와 select의 차이
- datalist : 사용자가 입력창에 타이핑하여 옵션을 검색할 수 있다. (옵션이 매우 많을 때 사용)
- select : 만들어진 옵션에서 선택만 할 수 있다.
<meta />
<base />
<link />
<img />
<area />
<track />
<input>
<br />
<hr />
<col />
<embed />
<param />
<source />
<wbr />
name="value"
의 형태로 쓰인다.href
: 링크가 이동하는 페이지의 URL을 지정
<a href="https://www.w3schools.com">Visit W3Schools</a>
src
: 이미지의 경로를 지정
<img src="img_girl.jpg">
width
height
: 이미지의 너비와 높이를 지정 (px 단위)
<img src="img_girl.jpg" width="500" height="600">
alt
: 어떤 이유로 이미지를 표시할 수 없는 경우, 이미지에 대한 대체 텍스트를 지정
<img src="img_girl.jpg" alt="Girl with a jacket">
style
: 요소에 색상, 글꼴, 크기 등과 같은 스타일을 추가
<p style="color:red;">This is a red paragraph.</p>
lang
: 웹 페이지의 언어를 선언
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
title
: 요소에 대한 추가 정보를 정의하여 요소 위로 마우스를 가져가면 tooltip으로 표시
<p title="I'm a tooltip">This is a paragraph.</p>
❔ 학습 후 궁금한 점
- block, inline, inline-block의 차이는 무엇인지?
이 글은 아래 링크를 참고하여 작성한 글입니다.
https://developer.mozilla.org/ko/docs/Web/HTML/Element#%EC%96%91%EC%8B%9D
https://www.w3schools.com/html/html_attributes.asp
멋있어요 항상 응원합니다~~