[TIL] CSS : display property

eunnb05·2022년 4월 27일
0

Today I learned [TIL]

목록 보기
3/3

CSS display 프로퍼티 안에 다양한 값이 들어가지만, 이번 블로그에는 block, inline, inline-block 대해서만 다룰 것이다.

모든 HTML 요소는 CSS로 display 프로퍼티를 지정해주지 않아도 브라우저가 자동으로 default 값을 부여한다.

1. Block

디폴트 값이 block인 요소 : p, form, h1~h6, table, ul, ol, li, div, 등

block 요소들은 새 줄에서 시작하고 좌우로 최대한 늘어난다. 늘어나는 것을 멈추기 위해서는 width 설정해주면 된다.

block 요소를 inline으로 변경하려면 CSS에서 display 프로퍼티를 inline로 설정하면 된다.

2. Inline

디폴트 값이 Inline인 요소 : span, a, img, input, button, 등

inline 요소들은 같은 줄에 나란히 존재한다.

inline 요소를 block 요소로 변경하려면 CSS에서 display: block을 설정하면 된다.

위 예시에 "무계획이야." 만 inline 요소인 <span> 안에 넣어 두고 CSS에서 display 값으로 block을 설정하면 이렇게 다음 줄로 혼자 내려가게 된다.

3. Inline-block

inlineblock 요소들의 특징을 나눠가진 display 프로퍼티의 또 다른 값.

  • inline 답게 새로운 줄로 넘어가지 않고 다른 요소들과 나란히 한 줄에 위치한다.
  • block 답게 width, height, padding, margin을 적용해서 크기를 조절할 수 있다.

0개의 댓글