[html] html이란 무엇일까?

1. html
2. tag
3. block과 inline
4. 종속 태그
5. html 문서 구조

1. html

- hyper text markup language

- 웹페이지가 어떻게 구조화 되어 있는지 브라우저가 알 수 있도록하는 마크업 언어이다.

- 공간을 만들고, 무엇으로 채울지 결정하는 언어이다.

2. tag

- html은 수많은 tag들로 이루어져 있다.

- 고유 기능에 맞게 브라우저에서 보여준다.

- 시작 태그 + 내용 + 종료 태그 = 요소 (element)

- 고유한 기능을 가지고 있고, 속성과 값을 이용하여 부가적인 기능을 추가할 수 있다. 예를 들면, input에 button, radio, checkbox 등 부가적인 기능들이 존재한다.

- 또한 중첩이 가능하다.

- 빈태그 : 내용과 종료 태그 없이 사용할 수 있는 태그이다. self closing tag라고 불린다.

<strong> // 굵게
<u> // 밑줄
<i> // 기울이기
<br> // 줄 바꿈
<hr> // 수평선 긋기
<button> // 버튼
<textarea> // 여러 줄, 입력창
<img> // 이미지
<video> // 비디오

3. tag의 특징

1. block vs inline

- 2개의 차이는 tag size에 따라서 결정된다.

- block : 내용과 상관없이, 가로 너비 모두 차지한다. 가로 너비 변경해도 변경되지 않는다.

- inline : 내용, 즉 자기 너비만큼 차지한다. 가로 너비 변경하면 변경된다.

2. 종속 태그

- 서로가 있어야 작동이 가능한 태그를 의미한다. 의존성이 있는 태그이다.

- select와 option인 선택 태그

- ol, ul와 li인 목록 태그

- 부모, 자식 태그로 서로 의존한다.

4. html 문서 구조

- 최소한의 문서 구조가 있어야 체계화가 된다. 협업 시에도 편리하다.

- head : 검색 엔진을 위한 영역이다. title과 meta가 있다.

- body : 브라우저에서 보이는 영역이다.

<header>
<nav>
<section> // 내용
<article>
<footer>
<div> // 모든 곳에 이용 가능하다

div는 모든 곳에 이용 가능하지만, 위의 태그들을 이용하는 것이 코드를 이해하기 쉽다. 협업에 용이하다.

5. 정리

html	tag
1. 웹페이지가 어떻게 구조화 되어 있는지 브라우저가 알 수 있게 하는 마크업 언어이다. (브라우저는 코드 실행기이다.) 2. 공간을 만든다. 3. 그 공간에 무엇을 채울지 결정하는 언어이다.	1. html은 수많은 태그로 이루어져 있다. 2. 고유한 기능을 가지고 있다. 3. 속성과 값을 이용하여 부가적인 기능을 추가할 수 있다. 4. 중첩 가능하다.

tag

1. block과 inline : 보기에는 동일해보이는 경우가 있지만, 사실은 아예 다르다. 2. 종속 태그 : 서로 의존하는 태그를 의미한다.

위의 그림은 브라우저에서는 동일하게 보이지만, 다른 경우이다.