글자와 상자(inline과 block)

글자와 상자

 

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

 

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

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

 

inline 요소

-<span></span> :대표적인 인라인 요소 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 용도 

• 요소가 수평으로 쌓임
• 줄바꿈 하게 되면 띄어쓰기가 된다 
• 가로 세로 사이즈가 포함한 콘텐츠 크기만큼 자동으로 줄어듦 
• 가로 세로 사이즈를 지정할 수 없다
• margin, padding은 위아래 여백 추가 불가, 좌우 가능 
• 인라인 요소 안에는 블록 요소를 사용할 수 없다 (예외가 있긴 함)
• 인라인 안에 인라인 가능하다 

 

block 요소

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

• 요소가 수직으로 쌓임
• 가로 사이즈는 부모 요소의 크기만큼 자동으로 늘어남 
• 세로 사이즈가 포함한 콘텐츠 크기만큼 자동으로 줄어듦 
• 가로 세로 사이즈를 지정할 수 있다 
• 내부 외부 여백 추가 가능하다 
• 블록 안에 블록 블록 안에 인라인 가능 

 

---

keypoint

block 요소는 레이아웃을 잡아주며 inline 요소는 콘텐츠의 크기만큼 적재적소에 사용할 필요

 

느낀 점

인라인 안에 블록 들어가는 예외 상황 찾아보기 

 

 

오늘의 학습 만족도 

⭐⭐⭐⭐⭐