[코딩 공부_22] CSS, display 속성에 대하여

CSS에서 가장 중요하고 가장 많이 실수하는 부분이라고 하는 display 속성에 대하여 알아보자!

① inline → span, a, em, br, b, strong, mark, video

<style>
span {
  background: yellow;
  width: 200px;
  height: 50px;
  margin: 20px;
  padding: 10px;
}
</style>

<span>SPAN</span>

- 전후 줄 바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다.

(한줄에 여러 개 배치)

** width와 height 속성을 가질 수 없다

** 상하 마진을 가질 수 없다 (but 패딩은 가능)

② block → div, table, header, nav, footer, section, article, aside, p, bolockquote, ul, ol, li, td, th, form, hr, h1~h6

<style>
    div {
        background: yellow;
        width: 200px;
        height: 50px;
        margin: 20px;
        padding: 10px;
    }
</style>

    <h1>H1 hello</h1>
    <div>DIV</div>
    <p>Page</p>

- 한줄에 한개만 배치가 된다

- 기본 너비값은 100% (100%일 경우엔 굳이 witdh: 100%를 할 필요가 없다!!)

- 크기값을 가질 수 있다

- 상하좌우 마진이 있다(패딩 가능)

③ inline-block → img, input, button, font-awesome

<style>
span {
  display: inline-block;
  background: yellow;
  width: 200px;
  height: 50px;
  margin: 20px;
  padding: 10px;
}
</style>

<a>hello</a>
<span>SPAN</span>
<em>EM</em>

- 한줄에 여러개 배치가 된다

- 기본 너비값은 컨텐츠의 너비값이다

- 크기값을 가질 수 있다

- 상하좌우 마진이 있다(패딩 가능)

** display: inline-block으로 지정해주어야 한다

* inline-block을 이용하면 여러개의 엘리먼트를 한줄에 정확히 원하는 너비만큼 배치할 수 있기 때문에 레이아웃에 활용할 수 있다!

오늘은 display속성에 대해 알아봤다!

다른 건 몰라도 display 속성은 꼭 외우고 사용하면 실수가 없을 것이다!

헷갈리겠지만

display: inline은 텍스트 처럼

display: block은 쌓이는 상차처럼 생각하면 더 쉽다!!

BEE_STUDY