HTML 이란?
Hypertext Markup Language의 약자로 프로그래밍 언어는 아닙니다.
웹페이지의 구조를 작성할때 사용하는 마크업 언어입니다.
💡 웹브라우저가 읽을수 있게 사람이 웹페이지의 구조를 작성할때 쓰는 문법입니다
Element(요소)란?
Element의 특징
OpenginTag와CloseTag가 한쌍이 됩니다.- 이 한쌍을
element혹은node라고 부릅니다. ( DOM에서 이 용어는 정말 자주 쓰입니다. ) OpenginTag와CloseTag사이에Content를 담을 수 있습니다.Content는Text,Element등이 될 수 있습니다.Element는OpeningsTag,CloseTag,Content를 통틀어Element라고 합니다.
💡
<img />이미지 태그처럼 특별한 태그는 빈 요소(Empty elements) 라고 하며 Content가 없습니다.
Block vs Inline
HTML에는 크게 두가지 종류의 Element가 있습니다.
InlineElement 와 BlockElement 의 특징을 알아봅시다.
block Element
상자(레이아웃)을 만들기 위한 요소들
- tag와 tag사이의 강제 줄바꿈을 합니다 (자기 너비에 관계없이)
- 자체적인 크기와 여백을 가집니다
- 높이는 포함한 content 크기만큼 자동으로 줄어드는 성질을 가지고 있습니다.
- 가로는 포함한 content 크기만큼 자동으로 늘어나는 성질을 가지고 있습니다.
- 부모 요소의 한 줄을 독점합니다
- 타 인라인 요소와 블록 레벨 요소를 포함합니다.
divmainarticleasidefooterheaderformh1~h6divlinavulolpsection태그 등 하나의 영역을 차지하는 구조를 작성할때 사용합니다.
Inline Element
글자를 만들기 위한 요소들
- 요소가 수평으로 쌓입니다. 즉, 줄바꿈을 강제하지 않습니다. (공간 허용시, 다른 태그 옆에 배치가 가능)
- 포함한 content 크기가 요소의 크기를 자동으로 결정합니다. (자체적 크기 없음)
- 높이, 너비, 외부/내부 여백 설정 불가능 합니다.
- 내용부의 가로, 세로 정렬 설정 불가능 합니다.
- 인라인 태그는 항상 블록 태그내부에 위치합니다. (블록 레벨 요소 포함 불가)
spanastrongbuttonimginput태그 등 text 나 하이퍼링크 등을 나타낼 때 사용합니다.
inline-block Element
- inline 요소와 block 요소의 특징을 혼합한 요소입니다.
- 자체적인 크기와 여백을 가집니다.
- 줄바꿈을 강제하지 않습니다.
Semantics
: 문서를 보기만 해도 그 의미를 짐작할 수 있는 태그
💡 아무런 의미가 없는 div태그만을 사용하는것이 아니라 아래의 사진처럼
각 구획의 용도와 내용의 의미를 태그로써 알 수 있도록 하는 것이 좋다!
Attributes(속성) 이란?
opening tag에서 class를 지정해주는 부분이 있는데, CSS 스타일링할 때 쓰게 되는 부분입니다.
이 부분은 HTML에서는 Attribute라고 부릅니다.
- 속성은 요소에 실제론 나타내고 싶지 않지만 추가적인 내용을 담고 싶을 때 사용합니다.
- 요소 이름 다음에 바로 오는 속성은 요소 이름과 속성 사이에 공백이 있어야 되고, 하나 이상의 속성들이 있는 경우엔 속성 사이에 공백이 있어야 합니다.
전역 속성
1. title
요소의 정보나 설명을 지정하며, 해당하는 요소에 마우스 hover시 나타납니다.
2. style
요소의 적용할 스타일(CSS)을 지정합니다.
3. class
요소를 지칭하는 중복 가능한 이름입니다.
요소에 이름을 부여하는 이유는 CSS에는 요소를 선택하는 선택자의 개념이 있는데 선택된 부분에만 원하는 스타일을 적용시킬수 있고 더 나아가서 JS에 정확하게 제어하기 위해서 입니다.
4. id
요소를 지칭하는 고유한 이름입니다.
중복이 가능하지 않기 때문에 자주 사용되지는 않으나 중요한 위치에 이름을 부여할때는 고유해야하기 때문에id를 사용하는 것이 더 효율적입니다.
5. data
요소에 데이터를 지정합니다.
특정한 데이터를 DOM 요소에 저장해두기 위함이 목적이며, 화면에 안 보이게 글이나 추가 정보를 요소에 담아 놓을 수 있습니다.
