[css] block, inline, inline-block

yoon1ee·2021년 1월 13일
0

[css] display에서 선택가능한 block, inline, inline-block에 대한 포스팅

block

block 속성을 가진 element는 각각의 element가 페이지의 왼쪽 끝에서 오른쪽 끝까지 너비를 가진다. 너비는 도화지 같은 개념으로, A4용지에 작은 그림을 그렸다고 가정할때 A4에 해당하는 개념이다.

그렇기때문에 block을 가진 element들은 "한줄"을 다 차지하게되고, 다른 element들과 한줄에 표시되지 않는다.

<header>
<footer>
<p>
<li>
<table>
<div>
<h1>
.
.

위의 tag들은 모두 block 속성을 가진다.

그 중 p 태그로 설명을하면,

<p>안녕 </p>
<p>나는 block</p>
<p>이야</p>

안녕
나는 block
이야

각 p 태그는 한줄씩 너비를 가지기때문에 자동 줄바꿈이 되서 표현된다.

하지만 block의 경우도 필요시 css에서 inline속성으로 변경이 가능하다
({ display: inline-block; } 혹은 { float: right/left; } 등 사용).


inline

inline 요소는 content가 있는 만큼만 너비를 가진다. 위의 A4용지 예에서 그림이 그려진부분 만큼의 영역의 개념이다.

<span>
<a>
<img>
.
. 

이중 span 태그로 예를들면,

<span>안녕 </span>
<span>나는 span</span>
<span>이야</span>

안녕 나는 span이야

위와같이 줄바꿈없이 한줄에 모두 표현이 된다.

inline은 width, height을 지정하더라도 이는 적용되지 않는다. 컨텐츠가 입력되는 동시에 그 고유의 크기가 정해지기 때문이다. margin과 padding은 좌,우간격만 적용된다.

하지만 inline도 { display: block; } 등의 css추가로 block의 속성을 가질 수 있다.


inline-block

inline 요소처럼 줄바꿈없이, 내용만큼의 너비를 가지며, 다른 요소들과 나란히 위치한다. 하지만 block의 속성 중 width, height, margin, padding 값이 모두 적용 가능하다.

<button>
<select>
.
.

0개의 댓글