🎈HTML
(=HyperText Markup Language), HyperText 기능을 가진 문서를 만드는 언어
HTML은 웹페이지의 구조를 만들고 정보를 표현하는데 사용되는 마크업 언어이다. HTML은 웹 콘텐츠의 뼈대 역할을 하며, 텍스트, 이미지, 링크 등 다양한 요소를 포함하여 웹 페이지의 구조와 내용을 정의한다.
우리의 몸을 예시로 들면) 만약 신이 우리의 몸을 만들 때 뼈대 -> 살 -> 피 순서대로 만든다고 가정한다면,
HTML은 뼈대의 역할을 한다. 즉 전체적인 구성과 구조, 내용을 만들어 내는 역할을 한다.
CSS는 살을 만드는 것을 빗대어 볼 수 있다. 겉 모습을 이쁘게 만들고 보기 좋게 만들어 시각적인 요소를 주는 역할을 한다.
JS는 피의 역할을 한다. 우리 몸의 주요 요소들이 서로 상호간에 유기적으로 작동할 수 있게 만드는 것과 같이 JS도 똑같이 HTML이나 CSS의 요소들에 각 기능을 제공해준다.
- HyperText : 텍스트의 정보에 대한 접근인 순차적 접근을 뛰어넘는다는 의미, 하이퍼 링크를 통해 문서 간 연결이 가능한 텍스트
- MarkUp : 표시를 해두는 것, 태그를 이용해 구조를 표현
- Markup Language : 문서 구조를 표현하는 태그 체계
HTML 기본 구조
모든 HTML 문서는 기본적으로 다음과 같은 구조를 가진다.
Vscode나 intelli J 등 코드 편집기에서 !를 적고 Tab 키보드를 누르면 아래와 같이 자동으로 생성해준다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html><!doctype html>: HTML5 문서임을 선언한다.<head></head>: 메타데이터, 제목, 스타일, 스크립트 등을 포함한다<title></title>: 문서의 제목을 지정한다.<body></body>: 실제 콘텐츠가 들어가는 부분이다.
기본요소
HTML 문서는 기본적으로 엘리먼트들의 모임이다. 엘리먼트는 아래 형식으로 명세한다.
<시작태그 속성1="속성값" ...속성n="속성값">내용</종료태그>
| 요소 | 의미 | 코드 예 |
|---|---|---|
| 태그 | '<'와 '>'로 둘러싸인 문자열 시작태그 <>와 종료태그 </>로 구성 | <title></title> |
| 내용 | 태그로 둘러싸인 문자열 | 웹문서 |
| 엘리먼트 | 태그와 내용을 포함한 전체 문자열 | <title>웹문서</title> |
| 속성 | 엘리먼트의 상세한 표현 설정 상항을 지시 시작 태그 안에 사용 | <title color></title> |
| 속성값 | 속성값(''또는 ""로 감싸야 함) | <title color="red"></title> |
🎈TAG
웹 페이지의 구조와 콘텐츠를 정의하는 데 사용되는 마크업 언어의 기본 구성 요소
HTML 태그는 요소를 감싸거나 특정한 형태로 표시하기 위해 사용되며, 일반적으로 꺽쇠 갈호로 둘러싸여 있다.
<>: 열기 태그</>: 닫기 태그<img>or<img />등 : 단독 태그
예시
<p></p>
<h1></h1>
<br/>태그의 종류
- 블록 (Block Element)
- 사용 가능하나 최대 너비를 가진다.
- 높이는 내부 컨텐츠 크기 만큼 설정된다.
- width, height로 크기를 지정할 수 있다.
- 여러개의 블록 요소들이 있을 때 수직으로 쌓인다.
<div></div>
<h1></h1>
<p></p>- 인라인 요소 (Inline Element)
- 너비와 높이를 내부 컨텐츠 크기만큼 설정된다.
- width, height로 크기를 지정할 수 없다.
- padding, margin으로 좌우에만 여백을 지정할 수 있다.
- 여러개의 인라인 요소가 있을 때 수평으로 쌓인다.
<img />
<span></span>- 인라인 블록(Inline-Block Element)
- 인라인 요소처럼 너비와 높이가 내부 컨텐츠 크기 만큼 설정 된다.
- 블록 요소처럼 width와 height로 너비와 높이를 설정할 수 있다.
- 블록 요소처럼 padding과 margin으로 상하좌우 여백을 지정할 수 있다.
- 인라인 요소처럼 여러개의 인라인 블록 요소가 있을 때, 수평으로 쌓인다.
- 인라인 블록 요소를 생성하기 위해서는 css의 {display : "inline-block"}으로 스타일 지정을 적용해야 한다.(따로 tag 존재 x)
주요 태그
텍스트 및 레이아웃 관련 태그
- 제목 태그:
<h1>~<h6> - 단락:
<p>, 줄:<br>, 강조:<strong>,<em>, 작게:<small> - 레이아웃:
<div>,<span>
링크/이미지/목록/테이블
- 링크:
<a> - 이미지:
<img> - 목록:
<ul>,<ol>,<li> - 정의 목록:
<dl>,<dt>,<dd> - 표 관련:
<table>,<caption>,<colgroup>,<col>,<thead>,<tbody>,<tfoot>,<tr>,<th>,<td>
폼 관련 요소
<form>,<fieldset>,<legend>- 입력 필드:
<input type="text"><input type="password"><input type="checkbox"><input type="radio"><input type="submit"><input type="button">
- 기타:
<label>,<textarea>,<select>,<option>,<button>
