CSS 속성 Part 02.

배치

position

▶ 요소의 위치 지정

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

.container {
    width: 300px;
    background-color: royalblue;
    position: relative;
}

.container .item {
    border: 4px dashed red;
    background-color: orange;
}

.container .item:nth-child(1) {
    width: 100px;
    height: 100px;
}

.container .item:nth-child(2) {
    width: 140px;
    height: 70px;
    powition: absolute;
    right: 10px;
    bottom: 10px;
}

.container .item:nth-child(3) {
    width: 70px;
    height: 120px;
}

- static: 기본값(요소에 이미 들어있는 속성의 값). 기준 없음

- relative: 요소 자신을 기준

- absolute: 위치 상 부모 요소를 기준. 부모 요소를 꼭 확인해야 함. (relative)

- fixed: 뷰 포트(브라우저를 기준)

- sticky: 스크롤 영역 기준

position과 같이 사용하는 CSS속성. 모두 음수를 사용할 수 있다. 요소의 각 방향별 거리 지정
- top
- bottom
- left
- right
- z-index

 

요소의 display가 변경됨

- position 속성 값으로 absolute, fixed 가 지정된 요소는, display속성이 block으로 변경됨. (relative X)

<span>123</span>

/* 인라인 속성은 너비값을 가질 수 없으나, position 값을 부여하면 너비값을 가질 수 있다. */
span {
    width: 100px;
    height: 100px;
    background: orange;
    font-size: 40px;
    position: absolute;
}

 

 

요소 쌓임 순서(Stack order)

▶ 어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정

1. 요소에 position 속성의 값이 있는 경우(relative, absolute, fixed, sticky) 위에 쌓임. (기본값 static 제외)
2. 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임.
3. 1번과 2번 조건까지 같은 경우, HTML의 마지막 구조일 수록 위에 쌓임.

즉, HTML 마지막 구조 > z-index > position 순으로 위에 쌓임. z-index로 조절 가능

 

 

z-index

▶ 요소의 쌓임 정도를 지정

- auto: 기본값(요소에 이미 들어있는 속성의 값). 부모 요소와 동일한 쌓임 정도

- 숫자: 숫자가 높을수록 위에 쌓임(숫자가 너무 커지지 않도록 주의 !! ex) z-index: 999;)

 

 

 

배치

출력 특성 (display)

▶ 요소의 화면 출력(보여짐) 특성

<span>Hello world!</span>

body {
	margin: 20px;
}

span {
	/* span태그는 가로, 세로 값을 가질수 없기 때문에 display: block;을 준다. */
    display: block;
    width: 120px;
    height: 30px;
    background-color: royalblue;
    color: #fff;
}

 

 

flex(정렬)

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

.container {
    display: flex; /* Flex container */
    flex-direction: row; /* 왼쪽부터 오른쪽으로 수평으로 정렬된다. */
    flex-direction: row-reverse; /* 오른쪽부터 왼쪽으로 수평으로 정렬된다. */
}

.container {
    display: flex;
    flex-direction: column; /* 위에서 아래로 수직 정렬 */
    flex-direction: column-reverse; /* 아래에서 위로 수직 정렬 */
}

 

flex-wrap

▶ Flex Items 묶음(줄 바꿈) 여부

/* 화면이 작아져서 자식요소인 .item이 넘치면 자동으로 아래로 내려간다. */
.container {
    display: flex;
    flex-wrap: wrap;
}

.container .item {
    width: 100px;
    height: 100px;
}

- nowrap: 기본값(요소에 이미 들어있는 속성의 값). 묶음(줄 바꿈)없음

- wrap: 여러 줄로 묶음

- wrap-reverse: wrap의 반대 방향으로 묶음

 

 

justify-content

▶ 주 축의 정렬 방법. 일반적인 가로 정렬

- flex-start: 기본값(요소에 이미 들어있는 속성의 값). Flex Items를 시작점으로 정렬

- flex-end: Flex Items를 끝점으로 정렬

- center: Flex Items를 가운데 정렬

- space-between: 각 Flex Item 사이를 균등하게 정렬

- space-arount: 각 Flex Item의 외부 여백을 균등하게 정렬

 

 

align-content

▶ 교차 축의 여러 줄 정렬 방법, 박스가 두 줄 이상이어야 한다.

- stretch: 기본값(요소에 이미 들어있는 속성의 값). Flex Items를 시작점으로 정렬

- flex-start: Flex Items를 시작점으로 정렬 (세로정렬)

- flex-end: Flex Items를 끝점으로 정렬 (세로정렬)

- center: Flex Items를 가운데 정렬 (세로정렬)

- space-between: 각 Flex Item 사이를 균등하게 정렬

- space-around: 각 Flex Item의 외부 여백을 균등하게 정렬

 

 

align-items

▶ 교차 축의 한 줄 정렬 방법. 일반적인 수직 정렬

.container {
    width: 500px;
    height: 300px;
    background-color: royalblue;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container .item {
    width: 100px;
    height: 100px;
    border: 3px dashed red;
    background-color: orange;
    flex-grow: 1;
    flex-basis: 0;
}

.container .item(3) {
	flex-grow: 2;
}

- stretch: 기본값(요소에 이미 들어있는 속성의 값). Flex Items를 교차 축으로 늘림

- flex-start: Flex Items를 각 줄의 시작점으로 정렬

- flex-end: Flex Items를 각 줄의 끝점으로 정렬

- center: Flex Items를 각 줄의 가운데 정렬

- baseline: Flex Items를 각 줄의 문자 기준선에 정렬

 

 

order

▶ Flex Item의 순서

- 0: 기본값(요소에 이미 들어있는 속성의 값). 순서 없음

- 숫자: 숫자가 작을 수록 먼저

 

 

flex-grow

▶ Flex Item의 증가 너비 비율

- 0: 기본값(요소에 이미 들어있는 속성의 값). 증기 비율 없음

- 숫자: 증가 비율

flex-basis와 함께 쓴다.

 

 

flex-shrink

▶ Flex Item의 감소 너비 비율

- 1: 기본값(요소에 이미 들어있는 속성의 값). Flex Container 너비에 따라 감소 비율 적용

- 숫자: 감소 비율

- 이 기능을 해제하고 싶으면 flex-shirink:0;을 하면 된다.

예를 들어 브라우저가 줄어들면서 이미지나 텍스트가 줄어들며 레이아웃이 망가지는 경우가 있는데 망가지지 않았으면 하는 display: flex;의 자식요소에 flex-shrink: 0; 를 주어 브라우저가 줄어들어도 레이아웃이 무너지지 않도록 고정하는 방법으로 자주 사용된다.

 

 

flex-basis

▶ Flex Item의 공간 배분 전 기본 너비

- auto: 요소의 Content 너비 참고 하여 flex-grow비율을 정함

- 단위: px, em, rem 등 단위로 지정

- flex-basis: 0; 으로 지정하면 content의 기본 너비를 생각하지 않기 때문에 균일한 정렬이 가능하다.

flex-grow와 함께 쓴다.