[HTML/CSS][Ch5] 글자와 상자 (인라인 요소와 블록 요소)

글자와 상자

요소가 화면에 출력되는 특성.

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

대표적인 인라인 요소 span 태그

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

인라인 요소는 기본적으로 왼쪽에서 오른쪽으로 수평으로 쌓이는 특성을 가짐.

하나의 글자처럼 취급되기 때문에 줄바꿈을 하면 띄어쓰기가 생성됨.

 

가로/세로 사이즈가 자신이 포함한 콘텐츠 크기만큼 자동으로 줄어듬.

 

인라인 요소는 글자를 취급하는 요소이므로 가로/세로 사이즈를 가질 수가 없음.

 

 

margin, padding을 통해서 여백을 사용할 때, 좌/우는 가능하지만 상/하는 불가능함.

 

인라인 요소 안에는 블록 요소를 넣을 수 없다.

글자 안에는 상자를 넣을 수 없다.

글자 안에는 글자를 넣을 수 있다.

 

대표적인 블록 요소 div 태그

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

블록 요소는 위에서 아래로 수직으로 쌓이는 특성을 가짐.

가로 너비는 부모 요소의 크기만큼 최대한 자동으로 늘어남.

세로 너비는 자신이 포함한 콘텐츠 크기만큼 자동으로 줄어듬.

 

 

블록요소(상자)는 가로/세로 사이즈, 상/하/좌/우 여백을 지정할 수 있다.

 

블록 요소 안에는 인라인 요소를 넣을 수 있다.

상자 안에는 상자를 넣을 수 있다.

상자 안에는 글자를 넣을 수 있다.