[CSS] position, inline / block / inline-block

CSS3로 HTML 태그가 출력되는 위치 지정

 - HTML 태그는 웹 페이지에 작성된 순서와 달리 배치 가능

 - Display, position, left/right/top/bottom, float, z-index-visibility

블록 박스와 인라인 박스 (HTML 기준)

 - HTML 태그는 인라인 태그와 블록 태그로 나뉜다.

 - 인라인 태그는 인라인 박스로 출력

 - 블록 태그는 블록 박스로 출력

 

박스 유형의 결정 : display 프로퍼티 (CSS 기준)

display: block 블록 박스	display:inline 인라인 박스	display:inline-block 인라인 블록 박스
항상 새 라인에서 시작, 새 라인으로 넘어감	새 라인에서 시작 불가, 라인 안쪽(inline)에 있음
블록 박스 내에만 설치	모든 박스 내 배치 가능
옆에 다른 요소 배치 불가	옆에 다른 요소 배치 가능
width, height로 크기 조절 가능	width, height로 크기 조절 불가	width, height로 크기 조절 가능
padding, border, margin 조절 가능	margin-top, margin-bottom 조절 불가 (margin-left, margin-right는 가능)	padding, border, margin 조절 가능

 

display : block

 - <span>을 블록 박스로 지정

 

display : inline

 - <div>를 인라인 박스로 수정

 

display : inline-block

 - <div> 인라인 블록 박스로 수정

normal flow

 - 웹 페이지에 나타난 순서대로 HTML 태그 배치

 - position 프로퍼티를 이용하여 normal flow 무시 가능

position 프로퍼티를 이용한 배치 방법

 - 정적 배치 -> position : static (Default), 문서의 기본 flow에 위치, top, left, bottom, right값 부여 가능

 - 상대 배치 -> position : relative, 문서의 기본 flow를 기준으로 상대적인 위치를 갖는다.

 - 절대 배치 -> position : absolute, 기본 flow를 벗어나서 절대 좌표와 함께 위치를 지정

 - 고정 배치 -> position : fixed, ViewPort 기준, 브라우저 크기에 따라 같이 변함, 브라우저를 기준으로 위치가 고정된다

 - 유동 배치 -> float : left 혹은 float : right

 - 상속 배치 -> position : inherit, 부모 요소의 position값을 상속받음

position 프로퍼티를 사용할 때, 태그의 위치와 크기

 - top, bottom, left, right, width, height 프로퍼티로 지정

 - 배치 방법에 따라 다르게 사용됨

상대 배치, position : relative

자신의 normal flow의 기본 위치에서 left, top, bottom, right 프로퍼티의 값만큼 이동한 상대 위치에 배치

프로퍼티의 이름은 그 방향으로 가는게 아니고 기준점을 의미 (right이면 normal flow의 오른쪽 선 기준으로 왼쪽으로 이동)