22/04/18 HTML 개요와 주요 개념

📚HTML 개요

📖 기본 문법 구조와 관계

요소의 구조 2가지
1. <시작태그 속성="값">내용</끝태그>
2. <빈태그 속성="값" />

요소(element)는 HTML을 구성하는 기본 단위이다.

기본적으로 <시작태그>와 </끝태그>의 쌍으로 이루어져 있고, 사이에는 내용이 들어간다. 내용없이 속성만으로 표현할 수 있는 태그를<빈태그 />라고 한다.

태그의 기능을 확장하기 위해 속성(attribute)과 값(value)를 이용하게 된다.

속성은 필수 속성과 선택 속성으로 나뉘며, 해당 요소를 사용하기 위해 무조건 작성해야하는 속성이 필수 속성, 필요에 따라서 작성하는 속성이 선택 속성이다.

<태그1>  				# 부모 요소 / 상위(조상) 요소
	<태그2>				# 자식 요소
		<태그3></태그3>	# 하위(후손) 요소
	</태그2>
</태그1>

<태그1>을 기준으로 <태그2>는 자식 요소, <태그3>은 하위(후손) 요소이다.

<태그2>를 기준으로 <태그1>은 부모요소, <태그3>은 자식 요소이다.

<태그3>을 기준으로 <태그1>은 상위(조상)요소, <태그2>는 부모요소이다.

📖 inline과 block 요소의 특징 (글자 vs 상자)

글자 > 인라인 요소(inline): 글자를 만들기 위한 요소
상자 > 블록 요소(block): 상자(레이아웃)를 만들기 위한 요소

※ CSS 설정에 밀접한 관련이 있으므로 중히 다뤄야한다.

요소가 화면에 출력되는 특징에 따라 글자와 상자로 구분할 수 있다.

[글자] 인라인 요소의 특징
1. 요소가 왼쪽에서 오른쪽으로 수평으로 쌓인다.
2. 컨텐츠의 크기에 맞춰 높이와 넓이가 자동으로 변화한다. 때문에 height와 width를 지정할 수 없다.
3. 여백(margin, padding)을 설정할 때 상하는 적용되지 않고, 좌우만 적용된다.
4. 인라인 요소는 블록요소를 자식으로 가질 수 없다.
5. 항상 글자의 크기에 맞춰 compact하게 유지하려고 한다.

[상자] 블록 요소의 특징
1. 요소가 위에서 아래로 수직으로 쌓인다.
2. 컨텐츠의 크기(heigth, width)를 지정할 수 있다.
3. 여백(margin, padding)을 상하좌우 다 설정할 수 있다.
4. 블록 요소는 블록요소/인라인요소 모두 자식으로 가질 수 있다.
5. 좌우 크기의 경우 항상 부모 요소의 크기만큼 최대한 늘어나려는 특징이 있다. 상하의 크기의 경우 컨텐츠의 크기에 맞춰 줄어드려는 특징이 있다.

인라인-블록(inline-block)의 특징
1. 요소가 수직으로 쌓인다. (인라인 특징)
2. height와 width를 지정할 수 있다. (블록의 특징)
3. margin과 padding을 상하좌우 지정할 수 있다. (블록의 특징)
※ 인라인-블록은 글자 요소긴 한데, 상자 요소가 가진 몇가지 특성을 가지고 있는 요소

📖 HTML 요소 정리

블록요소
<div></div>: 구분을 위한 요소
<h1~6></h1~6>: 제목(Heading), 숫자가 작을수록 커진다.
<p></p>: 문장(Paragraph)
<ul></ul>: 순서가 필요없는 목록의 집합(Unordered List)
<ol></ol>: 순서가 필요한 목록의 집합(Ordered List)
<hr />: 수평선 (horizon)

인라인요소
<span></span>: 구분을 위한 요소
<img/>: 이미지(image) 삽입, src와 alt는 필수속성
<a></a>: 다른/ 같은 페이지로 이동하는 하이퍼링크를 지정(Anchor), href는 필수속성
<label>: input의 제목
<br />: 줄바꿈(break)

상황에 따라 변화(inline, block)는 요소
input: 데이터 입력(input)을 위한 요소, type은 필수속성이다.

📖 전역 속성

title="설명" 	: 요소의 정보나 설명을 지정할 때 사용
style="스타일"	: 요소에 적용할 스타일을 지정할 때 사용
class="이름"		: 요소를 지칭하는 중복 가능한 이름
id="이름" 		: 요소를 지정하는 중복 불가능한(=고유한) 이름
data-이름="데이터값"	: 요소에 데이터를 넣어줄 때 사용 (JS에서 주로 사용)

요소 별로 사용할 수 있는 속성이 정해져 있는데, 그와 다르게 어떤 요소든 사용할 수 있는 속성을 전역속성이라고 한다.

※ 아래는 data-이름의 사용법을 간단하게 표현한 것이다.

<!-- html영역 -->
<div data-fruit-name="apple">사과</div>
<div data-fruit-name="banana">바나나</div>

// JS 영역
const els = document.querySelectorAll("div");
els.forEach(el => {
	// fruit-name을 fruitName으로 사용하고 있다.
	console.log(el.dataset.fruitName); 
});