[패스트 캠퍼스 강의] HTML 개요

 

      <태그>내용</태그>

시작(열린) 태그     종료(닫힌) 태그

 

부모요소, 상위요소

자식요소, 하위요소

 

빈(Empty) 태그 

내용을 채울 수 없기 때문에 속성이 필요한 경우가 많음. (필수속성)

ex) meta 태그는 닫힌 태그가 없음. 

<태그> vs <태그/> 

편리함      안전함

HTML5에서는 둘다 사용 가능. 

 

<태그 속성 = "값">내용</태그>

<img src="./cat.jpg" alt="고양이" />

 

글자와 상자

요소가 화면에 출력되는 특성, 크게 2가지로 구분.

인라인(Inline) 요소 : 글자를 만들기 위한 요소들.

블록(Block) 요소 : 상자(레이아웃)를 만들기 위한 요소들.

 

<span>

대표적인 인라인 요소. 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도. 

요소가 수평으로 쌓임. →

포함한 콘텐츠 크기만큼 자동으로 줄어듬. 

<span>Hello</span>
<span>World</span>

Hello World

 

- 글자 요소는 가로, 세로 사이즈를 지정할 수 없다. 

- 좌,우 여백는 추가되지만 위,아래 여백은 추가할 수 없다. 

- 내부에 블록 요소를 넣을 수 없다. (<span><div></div></span> 안됨)

 

<div>

대표적인 블록 요소. 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도.

특별한 의미가 없는 구분을 위한 요소 (Division)

요소가 수직으로 쌓임. ↓

부모 요소의 크기만큼 자동으로 늘어남. (가로)

포함한 콘텐츠 크기만큼 자동으로 줄어듬. (세로)

- 가로, 세로 사이즈를 지정할 수 있다.

- 상하좌우 여백을 추가할 수 있다.