[CSS] 레이아웃(Lay-out) -Display 편(inline, inline-block, block)

Hi! I'm JENNIE·2022년 6월 24일
0

HTML / CSS

목록 보기
3/4
post-thumbnail

🤔 Display 란?

: 웹 페이지 상에서 요소들을 어떻게 보여줄지 결정하는 속성.
➪ 레이아웃을 결정하는 중요한 CSS 속성⭐️

  • <display-inside>
    : 안쪽 요소들 display를 결정
    • flow
    • flow-root
    • table
    • flex
    • grid
    • ruby

  • <display-outside>
    : 바깥쪽의 다른 요소들과의 display를 결정
    • inline
    • inline-block
    • block

💡 오늘은 <display-outside>만 알아봅시다

1. inline

: 해당 내용(html요소의 content)의 영역 만큼을 차지하는 속성

  • 요소들이 줄바꿈 없이 한 줄에 나란히 배치된다.
  • width, height 등을 지정해도 무시된다. ➪ 🚨 content의 크기 만큼만 공간을 차지하기 때문
  • <span>, <a>, <img>

2. block

: 해당 줄의 모든 너비를 차지하는 속성

  • 요소들이 언제나 새로운 줄로 줄바꿈된다.
  • 기본적으로 width = 100% 속성을 가져 줄바꿈이 되는 것.
  • width, height, margin, padding 등이 모두 지정된다.
  • 모양을 쉽게 제어할 수 있어 화면 구성, 레이아웃에 많이 사용한다.
  • <h1>-<h6> , <form>, <p>, <li>, <table>, <div>

3. inline-block

: inline + block 하이브리드 속성

  • 기본적으로 inline처럼 줄바꿈 없이 배치된다.
  • but! block처럼 width, height 등의 지정이 가능하다.

    💡 내부적으로는 block의 규칙을, 외부적으로는 inline의 규칙을 따름

  • <input> , <button>
span {
  display: inline-block; 📌
  background: yellow;
  width: 200px;
  height: 50px;
  margin: 20px;
  padding: 10px;
}  
  • 위의 예시처럼 명시적으로 css에 display: inline-block; 을 지정한다.
  • 주로, <span>과 같은 inline 태그의 너비, 길이를 지정하거나 원하는 위치에 배치하고 싶을 때 사용한다.

4. none

: 해당 요소를 화면에서 보이지 않게 해준다.

📍참고사이트
HTML, CSS 관련 내용 개인 정리(CSS display, float)
CSS 레이아웃을 배웁시다

profile
Front-End Developer

0개의 댓글