[날마다 3분 CSS] 글자와 상자

인라인 & 블록

HTML 요소가 화면에 출력되는 특성은 크게 2가지로 구분된다

 

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

 

인라인 요소 (inline)

💬특징

• 요소들이 수평으로 쌓임 ( 가로로 한줄로 )
• 포함한 콘텐츠( content ) 크기만큼 자동으로 줄어듬 ( 상하좌우 )
• 크기값 가질 수 없음 ( 사이즈 지정 불가능 width, height )
• 상하 마진 적용 불가능 ( 좌우 마진은 가능 / 좌우 패딩도 가능, 패딩의 경우 상하는 넓어지게 보이는 것 뿐 적용x  )

 

인라인 태그는 하나의 글자라고 생각하면된다, 글자는 가로와 세로 사이즈를 가질 수 없기 때문에
style 태그를 통한 가로 높이는 먹지 않는다
또한 글자요소들은 ( span, 등,, )  좌우 여백은 가능하나 위아래는 불가능하다

인라인 요소 안에는 블럭 요소를 사용할 수 없다, 글자안에 상자를 넣지 못한다!!!

💫실습

See the Pen span&div by Zookeeper0 (@zookeeper0) on CodePen.

 

TIP!! 인라인 요소에 사이즈 지정하는법
display: block; 또는 display: inline-block; CSS 속성을 통해 블럭 요소로 바꿀 수 있다.
반대의 경우도 마찬가지이다.

자주 쓰는 인라인 요소들
span, a, em, b, strong, video, audio 등,,,

 

---

블록 요소 (block element)

 

💬특징

• 요소들이 수직으로 쌓임 ( 세로로 밑으로, 한줄에 한개씩 )
• 부모 요소의 크기만큼 자동으로 늘어남( width를 지정해주지 않는한 최대 가로 너비 )
• 크기값 가질 수 있음 ( 가로 너비 & 세로 길이 지정 가능 )
• 상하좌우 마진 & 패딩을 가질 수 있음
• 레이아웃을 작업하는 요소로 적합

블럭요소는 가로넓이는 최대한 부모사이즈만큼 늘어나려고 하고 세로 넓이는
인라인 요소와 같이 포함한 콘텐츠 크기만큼 자동으로 줄어든다

💫실습

See the Pen div by Zookeeper0 (@zookeeper0) on CodePen.

위코드와 같이 첫번째 div태그와 같이 width(너비)를 지정해주지 않는한

최대 가로 너비와 콘텐츠 크기만큼의 높이를 가지는 것을 볼 수 있다.

 

자주쓰는 블록 요소들
div, p , ul, ol, li, h1~h6, form, header, nav, footer, section, article, aside, table, th, td, figure, figcaption, caption, blockquote