block, inline, inline-block

dahyeyudev·2019년 11월 28일
1

block 레벨 요소

특성

  • 부모에 대해 width 100% 화면 크기 전체의 가로폭을 다 차지

  • 때문에 항상 새로운 라인에서 시작한다.

  • width, height, margin, padding 프로퍼티 지정 가능

  • block 레벨 요소 내에 inline 레벨 요소를 포함할 수 있다.

종류

div, h1~6, p, ol, ul, li, hr, table, form

inline 레벨 요소

특성

  • content의 너비만큼만 가로폭을 차지
  • 때문에 새로운 라인에서 시작하지 않고 문장 중간에 들어갈 수 도 있다. 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치한다.
  • width, height, margin-top, margin-bottom프로퍼티를 지정할 수 없다. 상하여백은 line-height 프로퍼티로만.
  • inline 레벨 요소 뒤에 공백(엔터, 스페이스)가 있는 경우, 정의하지 않은 space(4px)가 자동으로 지정된다.
  • inline 레벨 요소 내에 block 라벨 요소를 포함할 수 없다. 인라인 레벨 요소는 일반적으로 block 레벨 요소에 포함되어 사용된다.

종류

span, a, strong, img, br, input, select, textarea, button

inline-block 레벨 요소

block과 inline 레벨 요소의 특징을 모두 갖는다. inline 레벨 요소와 같이 한 줄에 표현되면서 width, height, margin 프로퍼티를 모두 지정할 수 있다.

  • 기본적으로 inline 레벨 요소와 흡사하게 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치시킬 수 있다. 옆에 올 수 있는거다.
  • block 레벨 요소처럼 width, height, margin, padding 프로퍼티를 모두 정의할 수 있다. 상, 하 여백을 margin과 line-height 두가지 프로퍼티 모두를 통해 제어할 수 있다.
  • content의 너비만큼 가로폭을 차지한다.
  • inline-block 레벨 요소 뒤에 공백(엔터, 스페이스 등)이 있는 경우, 정의하지 않은 space(4px)가 자동 지정된다. 이것을 회피 방법은 Fighting the Space Between Inline Block Elements를 참조하기 바란다.
span.a {
  display: inline; /* the default for span */
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

span.b {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

span.c {
  display: block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

이에 대한 화면 구성은

https://www.w3schools.com/css/tryit.asp?filename=trycss_inline-block_span1 를 참고하면 된다.

참고

https://poiemaweb.com/css3-display

0개의 댓글