Display Property
display property는 다음과 같은 속성을 가진다
| 속성 | 설명 |
|---|---|
| block | block 속성을 가지도록 함 |
| inline | inline 속성을 가지도록 함 |
| inline-block | inline-block 속성을 가지도록 함 |
| none | 엘리먼트 자체를 화면에 표시하지 않음 |
block
block은 항상 새로운 라인에서 시작하고 화면 크기 전체의 가로폭 (width: 100%)을 차지한다.
또한, block은 width, height, margin 프로퍼티 지정이 가능하다.
block의 대표적인 엘리먼트는 div h1~h6 p ol ul li hr table form이 있다.
inline
inline은 새로운 라인에서 시작하지 않고 다른 엘리먼트와 함께 한 행에 위치할 수 있다. 너비는 content의 내용만큼 가로폭을 차지한다.
inline은 block과 다르게 width, height, margin-top, margin-bottom 프로퍼티 지정이 불가능하다.
inline의 대표적인 엘리먼트는 span a strong img input select 등이 있다.
inline-block
inline-block은 이름처럼 block과 inline의 특징을 모두 갖는다.
inline 레벨 엘리먼트와 같이 한 줄에 표현되면서 width, height, margin 프로퍼티를 모두 지정할 수 있다. inline-block은 inline처럼 content의 내용만큼 가로폭을 차지한다.
Position
static
static은 position 포로퍼티의 기본값이고 position 프로퍼티를 지정하지 않으면 static으로 지정된다.
엘리먼트의 배치 순서에 따라 위에서 아래로, 왼쪽에서 오른쪽 순으로 배치되고 부모 엘리먼트 내에 자식으로 있을 때는 부모 엘리먼트의 위치를 기준으로 배치된다.
static에서는 top, bottom, left, right를 사용할 수 없다.
relative
relative와 static의 차이점은 top, bottom, left, right의 동작 여부이다.
absolute
absolute는 relative absolute fixed 프로퍼티가 선언되어 있는 부모 혹은 그 상단의 엘리먼트를 기준으로 위치가 결정된다.
엘리먼트에게 absolute 속성을 선언하게 되면, block 레벨 엘리먼트의 width는 inline 엘리먼트와 같이 content에 맞게 변화되므로 적절한 width를 지정해야 한다.
fixed
fixed는 부모 엘리먼트와 관계없이 브라우저의 viewport를 기준으로 위치를 정한다.
엘리먼트를 기준으로 하는게 아니기 때문에 브라우저를 스크롤해도 항상 같은 좌표에 위치한다.
Float
float는 블록 레벨 요소를 가로 정렬하기 위해 사용하는 기법이다. 요즘엔 flex가 있기 때문에 더 쉽게 정렬이 가능하지만, flex를 지원하지 않는 브라우저는 float를 사용해야 한다.
float는 원래 위처럼 이미지와 텍스트가 있을 때, 이미지 주위를 텍스트로 감싸기 위해 만들어진 것이다.
float를 사용할 때 position: absolute를 주어주면 이동이 불가능하다.
| 속성명 | 설명 |
|---|---|
| none | 요소를 더 있게 하지 않는다(기본값) |
| right | 요소를 오른쪽으로 이동시킨다. |
| left | 요소를 왼쪽으로 이동시킨다. |
float를 사용하여 정렬할 때 left를 쓰면 왼쪽부터 쭉 가로정렬이 되고, right를 사용하면 오른쪽부터 쭉 가로 정렬이 된다. 오른쪽 같은 경우 위처럼 원래 순서와 다르게 역순으로 출력이 된다.
Overflow
overflow는 자식 엘리먼트가 부모 엘리먼트의 영역을 벗어났을 때의 처리방법을 결정한다.
| 속성명 | 설명 |
|---|---|
| visible | 영역을 벗어난 부분을 표시(기본값) |
| hidden | 영역을 벗어난 부분을 보이지 않게 함 |
| scroll | 영역을 벗어난 부분이 없어도 스크롤을 표시함 |
| auto | 영역을 벗어난 부분이 있을때만 스크롤 표시 |
