position속성

• 웹 문서 안 요소들을 어떻게 배치할 지 정하는 속성이다.
• position 속성은 상속되지 않는다.
• 텍스트, 이미지를 원하는 위치로 배치할 수 있고 어떤 방식으로 놓을지 결정할 수 있다.

relative

이전 요소(부모 요소)에 자연스럽게 연결하여 위치를 지정

absolute

담겨있는 박스안에서 원하는 위치를 지정해 배치.
(부모요소에 relative요소가 없다면 브라우져 상단 왼쪽0,0로 위치값 변경)

fixed

지정한 위치에 고정하여 배치.(인터넷 이벤트 광고 같은거)
스크롤 해도 위치가 변하지 않는다.

---

display property속성

• 화면이 렌더링 되었을 때 특정 영역이 표시되는데 성질을 부여하는 property이다.

inline

주로 텍스트 주입 할 때 사용, 컨텐츠 영역 만큼 width값 자동설정.

• 줄 바꾸지 않고 다른 요소와 함께 한 행에 위치하려는 성향.
• width,height 지정 못함.
• margin은 위아래 적용 안됌.
• padding은 좌우는 공간과 시작 모두 적용, 위아래는 시각만 적용.

inline요소

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

inline-block

inline의 특징과 block의 특징을 모두 가짐.

• 줄바꿈 안됌.
• block처럼 width와 height를 지정 못함.
• width와 height를 지정하지 않으면 inline과 같이 컨텐츠만큼 영역이 잡힘

block

한 영역을 차지하는 박스형태를 가진 성질, 기본적으로 width 100%이다.

• hetght와 width값 지정할 수 있다.
• margin과 padding을 지정할 수 있다.

block요소

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