HTML display 속성 활용법

오늘은 왜 이렇게 일하기 싫을까요...

블로그를 핑계 삼아 잠시 포스팅하면서 쉬어야 겠습니다.

HTML 작성시 가장 기본이 되는 개념이랍니다.

가장 많이 사용하는 display의 값은 3가지가 있는데요.

1) block

block이란 줄을 바꾸지 않고 좌측부터 우측까지 모든 영역을 차지하게 되는 성질입니다.

예를 들어서 아래와 같은 코드를 작성하게 되면

<div style="display: block; background: pink"> First Block </div>
<div style="display: block; background: deepskyblue"> Second Block </div>
<div style="display: block; background: lawngreen"> Third Block </div>

아래와 같은 화면이 출력됩니다.

이렇게 한줄 한줄 쌓아지는 성질을 block이라고 합니다.

2) inline

inline 이란 한 라인에서 하나씩 쌓이는 성질을 inline이라고 합니다.

아래와 같은 코드를 작성하게 되면

<div style="display: inline; background: pink;"> First Block </div>
<div style="display: inline; background: deepskyblue"> Second Block </div>
<div style="display: inline; background: lawngreen"> Third Block </div>

아래와 같은 화면이 출력됩니다.

3) inline-block

inline-block 이란 해당 영역은 block으로 잡지만 inline형태로 배치합니다.

아래와 같은 코드가 있으면 

<div style="display: inline-block; background: pink;"> First Block </div>
<div style="display: inline-block; background: deepskyblue"> Second Block </div>
<div style="display: inline-block; background: lawngreen"> Third Block </div>

다음과 같이 출력이 됩니다.

눈치가 빠르신 분들은 아실테지만,

inline 형태와 많이 비슷한걸 알 수 있어요.

다만 각 블럭의 중간에 여백이 생겨요. 블럭의 영역으로 잡혀서 그런가 봐요.

가장 중요한 점은 display 형태는 배치와 영역을 설정해주는 것! 

그래서 레이아웃을 구성 할 때 가장 중요한 요소랍니다. ( 물론 position과 float 등 다른 요소에 의해도 변형될 수 있어요.)

그런데 퍼블리싱 작업을 할 때 일일히 display 속성을 잡아 주어야 할까요 ?

각 태그들에는 기본적으로 부여되는 display 값이 있어요 ( 개발자의 귀찮음이란..ㅎㅎ)

div, p 태그는 block 값을

img 태그는 inline-block 값을

span, a 태그는 inline 값을 가지고 있습니다.

(갑자기 생각하려니까 다른 태그가 생각이 안나요 ㅠㅠ)

이 외에도 display 값에는 table, table-cell, flex 등 여러 요소가 많아요

CSS 잘 쓰지 않는 속성이 참 많습니다.. 

활용만 한다면 몇 줄의 코딩을 한 속성으로도 표현 할 수가 있는데 

대부분의 개발자들은 쓰는 속성들만 쓰실 거에요.. 저도 그렇구...

html과 css는 개발자 도구로 확인 할 수 있으니 

사이트 돌아다니다가 문득 '어떻게 만들었지?' 라는 생각이 들면 한번씩 확인해 보세요 ^^

다들 즐거운 코딩 하세요 ~ :)