position

CSS에서 position 속성은 문서상에서 요소를 배치하는 방법을 지정한다.

• top
• right
• bottom
• left
  위 4가지 속성으로 요소를 배치한다.

position의 값(value)

• static: 기본값이다. 아무런 영향을 주지 않는다.
• relative: static 포지션을 기준으로 top, right, left, bottom에 의해 요소가 배치된다.
• absolute: relative 값을 가진 부모요소에 의해서 위치가 배치된다. (📌부모요소가 relative값이 없다면 최상위요소에 의해서 배치된다.)
• fixed: 요소를 고정된 위치에 배치할 때 사용한다. 페이지가 스크롤 되어도 요소의 위치는 같은 위치에 고정되어 있다. (마찬가지로 top, right, left, bottom에 의해 최종 위치가 결정된다.)
• sticky: fixed와 동일한 기능을 한다. 하지만 sticky는 사용자의 스크롤 포지션에 따라 요소가 배치된다.

position 예제

---

display property

display 는 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지를 결정한다.

값(value)

• {display: none;}
• {display: inline;}
• {display: block;}
• {display: inline-block;}

display: none

요소를 보이지 않게 하기위해서 사용한다. 화면 상에서 어떠한 영역을 차지하지 않고 완전히 삭제된 것처럼 보인다.

display: inline

요소의 전후 줄바꿈이 없어 한 줄에 다른 요소와 함께 나란히 배치할 때 사용한다.
대표적으로 <span>, <a>, <img>등의 태그가 있다.

📌inline 속성인 요소를 사용할 때는 width와 height값을 지정해도 무시된다.

display: block

요소의 전후 줄바꿈이 없이 다른 요소를 다른 줄로 밀어내고 요소 하나가 전체 한 줄을 차지한다.
대표적으로 <div>, <p>, <h1>태그 등이 있다.

block 요소는 inline 요소와 달리 width, height, margin, padding 속성이 모두 적용이 된다.

display: inline-block

inline 요소처럼 전후 줄바꿈이 없이 한 줄에 다른 요소들과 나란히 배치되지만, block 요소들처럼 width와 height 속성 지정 및 margin과 padding 속성 값들이 적용된다.

display 예제