CSS Position, Display

Position

속성은 태그를 어떻게 위치시킬지를 정의하며, 아래의 5가지 값을 갖습니다.

• static: 기본값, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정해 줄 수 없습니다.
• absolute: 절대 좌표와 함께 위치를 지정해 줄 수 있습니다.
• relative: 원래 있던 위치를 기준으로 좌표를 지정합니다.
• fixed: 스크롤과 상관없이 항상 문서 최 좌측상단을 기준으로 좌표를 고정합니다.
• inherit: 부모 태그의 속성값을 상속받습니다. 좌표를 지정 해주기 위해서는 left, right, top, bottom 속성과 함께 사용합니다.

position을 absolute나 fixed로 설정시 가로 크기가 100%가 되는 block 태그의 특징이 사라지게 됩니다.
출처

Display

inline과 block은 display의 property값이다!

<inline 요소>

<address>, <article>, <aside>, <blockgquote>, <canvas>,
<dd>, <div>, <dl>, <hr>, <header>, <form>,<h1>, <h2>, <h3>, 
<h4>, <h5>, <h6>, <table>, <pre>, <ul>, <p>, <ol>, <video>

<block 요소>

<a>, <i>, <span>, <abbr>, <img>, <strong>, <b>, <input>, 
<sub>, <br>, <code>, <em>, <small>, <tt>, <map>, <textarea>, 
<label>, <sup>, <q>, <button>, <cite>

출처

inline

inline은 주로 텍스트를 주입 할 때 사용 되는 형태입니다. 그렇기 때문에 기본적으로 block처럼 width값이 100%가 아닌 컨텐츠 영역 만큼 자동으로 잡히게 되며 라인이 새로 추가 되지 않습니다. 높이 또한 폰트의 크기만큼 잡힙니다.(line-height로 설정이 가능)

• width와 height를 명시 할 수 없다.
• margin은 위아래엔 적용 되지 않는다.
• padding은 좌우는 공간과 시각적인 부분이 모두 적용 되지만 위아래는 시각적으로는 추가되지만 공간을 차지 하지는 않는다.

block

block은 한 영역을 차지 하는 박스형태을 가지는 성질입니다. 그렇기 때문에 기본적으로 block은 width값이 100%가 됩니다. 그리고 라인이 새로 추가된다는 것을 알 수 있습니다.

• block은 height와 width 값을 지정 할 수 있다.
• block은 margin과 padding을 지정 할 수 있다.

inline-block

inline-block 은 말그대로 inline의 특징과 block의 특징을 모두 가진 요소입니다. inline-block의 특징은 다음과 같습니다.

• 줄바꿈이 이루어지지 않는다.
• block처럼 width와 height를 지정 할 수 있다.
• 만약 width와 height를 지정하지 않을 경우, inline과 같이 컨텐츠만큼 영역이 잡힌다.