Position
위치 값을 조정하는데 사용하는 속성
-
static: 기본 값
-
relative: 원래 위치하는 곳에서 상대적인 위치를 나타낸다.
상대적인 위치는 top, left등의 값을 지정하여 변경할 수 있다. -
absolute: 나머지 요소들이 absolute를 준 요소를 무시한다. 하늘에 떠 있다고 생각하면 된다.
자신의 부모 중에 기준점이 static이 아닌 요소에서 찾는다. -
fixed: absolute와 비슷하지만, 스크롤이 생겨도 고정되어있다.(고정된 배너등을 표시할 때 사용)
z-index
position이 static이 아닌 것들끼리는 겹칠 수 있다.
어떤 것이 위로 나오게 할지 나타내는 것이다.
기본적으로는 나중에 선언된 요소가 위로 나타난다.
기본 값은 모두 z-index:0 이고 커질 수록 우선순위가 커진다.
같은 레벨의 요소들끼리 비교한다. 부모의 z-index가 낮으면 본인의 z-index값이 아무리 커도 소용없다.
Float
하늘에 떠 있는듯이 배치된다. position과 달리 top, left 로 위치를 조정할 수는 없고, margin을 사용해서 배치한다.
float 끼리는 겹치지 않는다
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Layout-float</title>
<style>
.wrap > div {
border: 1px solid black;
width: 100px;
height: 100px;
margin: 10px;
float: left;
}
</style>
</head>
<body>
<div class="wrap">
<div>first</div>
<div>second</div>
<div>third</div>
</div>
</body>
</html>
문제점
-
자신의 자식들 중에 float를 가진 자식들을 자식으로 인식하지 못한다.(float가 하늘에 뜬 것 처럼 배치되기 때문에)
-> 상위 엘리먼트에overflow: auto나overflow: hidden값을 준다. -
같은 레벨에 속한 엘리먼트 중 float가 존재하는 경우 float값이 없는 엘리먼트가 float값을 가진 엘리먼트를 인식하지 못한다.
-> float값이 없는 같은 레벨에 속한 엘리먼트에clear: left(float가 left인 경우) 나clear: right(float가 right인 경우) 값을 준다.clear: both(left, right 모두 적용하는 경우) 값을 줘도 된다.
Flex
반응형 웹에서 쉽게 배치할 수 있다.
container에 적용
-
display: flex 컨테이너 속성을 적용하겠다는 뜻
display: flex(block 속성의 컨테이너) ordisplay: inline-flex(inline 속성의 컨테이너) -
flex-direction: items의 배치 방향
flex-direction: roworflex-direction: column -
flex-wrap: items의 묶음
flex-wrap: nowrap(묶지 않음) orflex-wrap: wrap(묶음) -
justify-content: 배치 방향의 정렬 방법
justify-content: flex-start(시작점으로 정렬)
justify-content: flex-end(끝점으로 정렬)
justify-content: center(가운데 정렬) -
align-content: 교차 축의 정렬방법. flex-wrap를 이용해 items가 2줄 이상이고 여백이 있는 경우만 사용할 수 있다.
align-content: stretch(교차축을 채우기 위해 item을 늘림)
align-content: flex-start(시작점으로 정렬)
align-content: flex-end(끝점으로 정렬)
align-content: center(가운데 정렬) -
align-items: 교차축의 items 정렬 방법. items가 한 줄일 때 사용
align-items: stretch(교차축을 채우기 위해 item을 늘림)
align-items: flex-start(시작점으로 정렬)
align-items: flex-end(끝점으로 정렬)
align-items: center(가운데 정렬)
items에 적용
-
flex-grow: item의 너비 증가 비율. 숫자가 클수록 너비를 많이 차지. 0일 때는 효과 없음.
flex-grow: 2 -
flex-shrink: item의 너비 감소 비율. 숫자가 클수록 너비가 감소. 0일 때는 효과 없음
flex-shrink: 2 -
flex-basis: item의 기본 너비
flex-basis: 100px -
align-self: 교차 축에서 개별 item의 정렬 방법.
align-self: auto(컨테이너의 align-items 속성 상속)
align-self: stretch(컨테이너의 교차축을 채우기 위해 item을 늘림)
align-self: flex-start(시작점으로 정렬)
align-self: flex-end(끝점으로 정렬)
align-self: center(가운데 정렬) -
order: item의 순서. 순서가 클수록 뒤로 배치된다.
order: 5
reference: CSS Flex 완벽 가이드
