HTML이란?

• Hyper Text Markup Language
• 웹 페이지를 위한 Markup 언어
• HTML은 Tag를 이용해 작성
• Tag는 요소(elements)와 속성(attributes)으로 구성
• Tag는 일반적으로 여는 Tag와 닫는 Tag로 이루어짐
• Tag는 중첩이 가능함

<div><p>중첩이 가능하다</p></div>

중첩된 Tag의 순서가 중요함 (대칭이 맞아야 함)

Block 요소 vs Inline 요소

#Block 요소

• 기본적으로 블록 레벨 요소는 부모 요소의 전체 공간을 차지하여 블록을 만듦
• 상자를 쌓는 것처럼 볼 수 있다
• 블록 레벨 요소는 언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지함

## Block 요소 종류

div h1 ~ h6 ul ol li form p

# Inline 요소

• 인라인 요소는 요소를 구성하는 태그에 할당된 공간만 차지함

## Inline 요소 종류

span a button i input img label select

시맨틱 마크업

• 아무런 효과를 주지 않음
• Block 요소임
• 데이터를 직관적으로 표현하기 위해 사용
• 검색 엔진 최적화를 위해 사용
• 유지 보수가 쉬워짐

시맨틱 요소 종류

header : 제목, 로고, 검색 폼, 작성자 이름 등

nav : 메뉴, 목차 등

h1 ~ h6 : 구획 제목을 나타냄

section : 독립적인 구획을 나타냄

article : 게시판, 블로그 글, 뉴스 기사 등

aside : 사이드바, 콜아웃 박스

footer : 작성자, 저작권 정보, 관련 문서 등

Block 요소와 Inline 요소를 같이 쓰면 어떻게 될까?

<div>1</div>
<span>2</span>
<span>3</span>
<div>4</div>

block 요소는 한 전체를 차지하고 inline 요소들 끼리 붙어 있음
inline 요소 뒤에 자리는 있으나 block 요소는 전체를 차지해야 하기 때문에 다음 줄로 표현됨

• inline 속성을 가진 요소들은 width, height, margin, padding이 적용되지 않음
• inline-block 속성을 주어서 사용하거나 block 속성을 주어서 사용하자

label 요소

• for 속성에 input의 id 값을 넣어주면 label을 클릭하게 되면 input으로 focus를 옮겨줌

See the Pen label by cloudcoke (@cloudcoke) on CodePen.

label 이용

• label을 이용해 체크가 된 항목을 강조할 수 있다

See the Pen display none by cloudcoke (@cloudcoke) on CodePen.

1. inline 속성을 사용

See the Pen css_inline_style by cloudcoke (@cloudcoke) on CodePen.

2. head에 style 태그 사용

See the Pen Untitled by cloudcoke (@cloudcoke) on CodePen.

3. css 파일 생성

See the Pen Untitled by cloudcoke (@cloudcoke) on CodePen.