[CSS] 레이아웃의 모든것

position 속성 - relative, absolute, fixed

Posotion 속성은 아래의 목록에서 하나의 키워드 값을 선택해 지정 할 수 있다.

1. Relative

요소를 문서흐름에 따라 배치하고, 자기 자신을 기준으로 top,right,bottom,left의 값에 따라 오프셋을 적용한다.

• z-index의 값이 auto가 아니라면 새로운 쌓임 맥락을 생성.

2. absolute

요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않는다. 최종 위치는 top, right, bottom, left 값이 지정한다.

3. fixed

요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃 공간도 배정하지 않는다.

inline, inline-block, block

1. inline

• display 속성이 inline으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다.
• inline 엘리먼트로 span,a,em 태그들이 있다.
• HTML 페이지에 쉽고 빠르게 CSS 룰을 삽입 할 수 있다.
• 웹사이트 테스팅을 하거나 변경에 대한 미리보기, 빠르게 고칠 수 있는 장점이 있다.
• 별도의 문서로 외부 스타일을 만들거나 업로드 할 필요가 없다.

2. inline-block

• inline 속성이란, 줄을 바꾸지않고 다른 요소와 함께 한 행에 위치하려는 성향이 있다.
• 상,하단 외부여백 (margin-top,margin-bottom) 속성을 정의해도 적용되지 않는다.
• 너비와 높이 속성이 적용되지 않는다. 인라인 요소의 너비와 높이는 태그가 품고있는 내부 요소의 부피에 맞춰진다.
• 인라인 속성을 가진 태그끼리 연속으로 사용되는 경우에는 최소한의 간격을 유지하기 때문에, 좌,우에 약간의 외부여백이 자동으로 발생한다.

3. Block

• 대부분의 HTML 엘리먼트는 block 이다.
• block 속성은 inline과는 달리 한줄에 나열되지 않고, 그 자체로 한 줄을 차지한다.
• header, footer, p, li, table, div, h1 등이 모두 block 요소에 해당하는 태그들이 있다.
• 블록 속성을 가지고 있는 태그는 기본적으로 너비 100% 속성을 가지고 있다.
• 화면의 가로 폭을 모두 차지하기 때문에, 다음 요소가 양 옆으로 붙을 공간이 없어 자연히 줄넘김이 된다.