HTML/CSS/JS - CSS속성(3)

ekgns0508·2023년 10월 2일

CSS html js 프론트엔드

html/css/js

목록 보기

8/11

15. 배치

(1) position

요소의 위치 지정 기준을 지정한다.

top, bottom, left, right 속성을 이용해서 직접 위치를 지정할 수 있다.

z-index 속성을 이용해서 쌓인 순서를 정할 수 있다.

위의 속성들은 음수를 지정할 수도 있다.

static (기본값) : 기준 없음
relative : 요소 자신을 기준으로 한다. (실제 개발에서는 거의 사용되지 않는다, 구조상의 부모요소를 위치상의 부모요소로 바꿀때 사용하는 가장 무난한 position값이다)
absolute : 위치 상 부모 요소를 기준으로 한다.
(구조상의 부모요소가 아닌 기본값이 아닌 position속성이 정해져있는 부모요소를 기준으로 한다)
fixed : 뷰포트(브라우저)를 기준으로 한다. (요소가 화면에 고정된다. 스크롤을 움직이더라도 고정되어 있다)
sticky : 스크롤 영역을 기준으로 한다.(배치와는 거리감이 있는 영역이다)

(2) top, bottom, left, right

요소의 각 방향별 거리를 지정한다.

auto : 브라우저가 계산한다.
단위 : px, em, rem 등 단위로 지정한다.

(3) 요소 쌓임 순서(Stack Order)

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

요소에 position 속성의 값이 있는 경우 위에 쌓인다.(기본값 static 제외)
1번 조건이 같은경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓인다.
1번과 2번의 조건이 같은 경우, HTML의 다음 구조일수록 위에 쌓인다.

.container .item:nth-child(1) {
	position: relative;
	z-index: 1;
}
.container item:nth-child(2) {
	position: relative;
}
.container item:nth-chile(3) {
	z-index: 2;
}

위의 코드에서는 1, 2, 3 순서대로 위를 차지하게 된다. 1, 2는 둘다 position값이 있지만 1에만 z-index가 부여되어 있으므로 1 > 2가 되고 3은 z-index 값이 가장 높지만 position속성이 없어 가장 밑에 깔리게 된다.

(4) z-index

요소의 쌓임 정도를 지정한다.

auto : 부모 요소와 동일한 쌓임 정도
숫자 : 숫자가 높을 수록 위에 쌓인다.

(5) position속성을 사용한 요소는 display속성이 자동으로 변경된다

position 속성의 값으로 absolute, fixed가 사용된 요소는 display속성이 block으로 변경된다.

.item:nth-child(1) {
	display: block;
	position: absolute;
}
.item:nth-child(1) {
	position: absolute;
}

위의 코드에서 첫번째 스타일과 두번째 스타일은 결과적으로 같은 내용이다. position값으로 absolute가 들어가 자동으로 display속성의 값이 block으로 들어가게된다. 즉 position값으로 absolute나 fixed가 들어가있으면 따로 display를 block으로 설정할 필요가 없다.

16. 플렉스(정렬) - Container

플레스로 수평정렬을 하게 되면 자동으로 Flex Container(부모요소)와 Flex Item(자식요소)들이 생성된다. 각각만의 개별 속성들이 존재한다.

(1) display

Flex Container의 화면 출력(보여짐) 특성이다.

Flex Container가 block요소가 될지 inline요소가 될지 정한다.

flex : 블록 요소와 같이 Flex Container 정의
(여러개의 Flex Container들이 수직으로 쌓인다)
inline-flex : 인라인 요소와 같이 Flex Container 정의
(여러개의 Flex Container들이 수평으로 쌓인다)

(2) flex-direction

주 축을 설정한다.

정렬의 방향을 설정한다.

row : 행 축 (좌 ⇒ 우)
row-reverse : 행 축 (우 ⇒ 좌)
column : 열 축 (위 ⇒ 아래)
column-reverse : 열 축 (아래 ⇒ 위)

(3) flex-wrap

Flex Items 묶음(줄 바꿈) 여부를 정한다.

nowrap (기본값) : 묶음(줄바꿈) 없음 (한줄로만 정렬한다)
wrap : 여러 줄로 묶음
wrap-reverse : wrap의 반대 방향으로 묶음

/*자식요소들이 자신의 크기를 줄이면서까지 한줄안으로 정렬한다*/
.container1 {
	width: 400px;
	display: flex;
}
/*자식요소들이 넘칠거 같으면 다음줄로 넘어가서 다시 정렬을 이어간다*/
.container2 {
	width: 400px;
	display: flex;
	flext-wrap: wrap;
}

예를 들어 위 코드에서 ‘container1’ 클래스의 부모요소안에 가로너비가 100px인 자식요소들이 5개가 들어오게될경우 자식요소들이 각각 가로너비를 80px까지 줄이면서 한줄안에 모두 채우려고 한다.

반면에 ‘container2’ 클래스의 부모요소안에 똑같은 크기의 자식요소들을 5개를 넣게 될경우 1줄에 4개(총 400px)까지는 허용하고 나머지 1개는 다음줄로 넘어가게 된다.

(4) justify-content (수평정렬)

주 축의 정렬의 방법을 정한다. (수평정렬일 경우 주축은 x축)

보통 수평정렬을 사용하게되기 때문에 각각 왼쪽, 오른쪽, 가운데정렬이라고 생각하면 된다.

flex-start (기본값) : Flex Items를 시작점으로 정렬한다. (수평정렬기준 왼쪽정렬)
flex-end : Flex Items를 끝점으로 정렬한다. (수평정렬기준 오른쪽정렬)
center : Flex Items를 가운데 정렬한다. (수평정렬기준 가운데정렬)
space-between : 각 Flex Item 사이를 균등하게 정렬한다.
space-around : 각 Flex Item의 외부 여백을 균등하게 정렬한다.

(5) align-content (수직정렬)

교차 축의 여러 줄 정렬 방법을 정한다.

여러줄의 정렬방법을 정하기 때문에 줄바꿈(flex-wrap)이 있어야하고 줄이 넘어갈 여분의 공간이 필요하며 아이템이 2줄이상일때만 동작을 한다.

조건이 많기때문에 활용도가 높지는 않다.

stretch (기본값) : Flex Items를 시작점으로 정렬한다.
flex-start : Flex Items를 시작점으로 정렬한다.
flex-end : Flex Items를 끝점으로 정렬한다.
center : Flex Items를 가운데 정렬한다.

(6) align-items

교차 축의 한 줄 정렬 방법을 정한다.

align-content의 경우 여러줄의 내용이 시작점, 끝점, 가운데로 정렬되지만, align-itmes의 경우에는 수직으로 각줄의 시작점, 끝점, 가운데로 정렬이 된다.

stretch (기본값) : Flex Items를 교차 축으로 늘린다.
flex-start : Flex Items를 각 줄의 시작점으로 정렬한다.
flex-end : Flex Items를 각 줄의 끝점으로 정렬한다.
center : Flex Items를 각 줄의 가운데 정렬한다.

17. 플렉스(정렬) -Items

(1) order

Flex Items의 순서를 지정한다.

0 (기본값) : 순서 없음
숫자 : 숫자가 작을수록 먼저 정렬된다.

(2) flex-grow

Flex Item의 증가 너비 비율

0 (기본값) : 증가 비율 없음
숫자 : 증가 비율

(3) flex-shrink

Flex Item의 감소 너비 비율

1 (기본값) : Flex Container 너비에 따라 감소 비율 적용
숫자 : 감소 비율

(4) flex-basis

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

auto (기본값) : 요소의 Content 너비
(auto로 지정할경우 글자너비가 기본 flex-basis 값이 되고 나머지 영역을 나눈게 된다,
0으로 지정하게 될경우 기본너비를 없애므로 나머지 영역이 곧 전체가 되므로 전체 너비를 나누게 된다)
단위 : px, em, rem 등 단위로 지정

17. 전환

transition

요소의 전환(시작과 끝) 효과를 지정하는 단축속성이다.

transition-property : 속성명
transition-duration : 지속시간
transition-timing-function : 타이밍함수
transition-delay : 대기시간

단축형으로 작성할 때 ‘지속시간’은 필수로 포함해야 하는 속성이다.

transition: 속성명 지속시간 타이밍함수 대기시간;

(1) transition-property 속성

전환효과를 사용할 속성 이름을 지정한다.

All (기본값) : 모든 속성에 적용한다.
속성이름 : 전환효과를 사용할 속성 이름을 명시한다.

transition: width 1s;

위와 같이 작성할경우 width속성에 대해서만 전환효과가 1초 적용된다.

(2) transition-duration 속성

전환 효과의 지속시간을 지정한다.

0s (기본값) : 전환 효과 없음
시간 : 지속시간(s)을 지정한다.

transition: 
    width .5s, 
    background-color 2s;

위와 같이 “,’ (쉼표)를 이용해서 여러개의 속성마다 각각 다른 전환시간을 부여할 수도 있다.

가독성을 위해서 줄바꿈을 해주는 것이 좋다.

(3) transition-timing-function 속성

전환효과의 타이밍(Easying)함수를 지정한다.

ease (기본값) : 느리게-빠르게-느리게
linear : 일정하게
ease-in : 느리게-빠르게
ease-out : 빠르게-느리게
ease-in-out : 느리게-빠르게-느리게

(4) transition-delay 속성

전환 효과가 몇 초 뒤에 시작할지 대기시간을 지정한다.

0s (기본값) : 대기시간 없음
시간 : 대기시간(s)을 지정한다.

transition: 1s .5s;

위와 같이 시간 단위 2개를 단축속성으로 지정하게 될경우 첫번재는 지속시간, 두번째는 대기시간으로 자동으로 지정된다.

18. 변환

transform

요소의 변환 효과를 지정하는 속성이다.

transform : 변환함수1 변환함수2 변환함수3 … ;

transform : 원근법 이동 크기 회전 기울임;

2D 변환 함수

단위 px
- translate(x, y) : 이동 (x축, y축)
- translateX(x) : 이동 (x축)
- translateY(y) : 이동 (y축)
단위 없음 (배수)
- scale(x, y) : 크기 (x축, y축)
단위 deg
- rotate(degree) : 회전(각도)
- skewX(x) : 기울임(x축)
- skewY(y) : 기울임(y축)

3D 변환 함수

단위 px
- translateZ(z)
- translate3d(x, y, z)
- perspective : 원근법(거리)
단위 없음(배수)
- scaleZ(z)
- scale3d(x, y, z)
단위 deg
- rotateX(x) : 회전 (x축)
- rotateY(y) : 회전 (y축)
- rotateZ(z)
- rotate3d(x, y, z, a)

예시

transform: translate(40px, 40px);

x축(가로)으로 40px, y축(세로)으로 40px으로 이동한다.

transform: translateX(40px);
transform: translate(40px, 0);

x축(가로)으로 40px 이동한다.

translateX()가 직관적이므로 사용하는 것이 권장된다.

transform: translateY(40px);
transform: translate(0, 40px);

y축(세로)으로 40px 이동한다.

translateY()가 직관적이므로 사용하는 것이 권장된다.

transfrom: scale(1.5);
transform: scale(1.5, 1.5);

요소의 가로, 세로 크기를 1.5배 증가시킨다.

transform: scaleX(1.3);

요소의 가로크기를 1.3배 증가시킨다.

(한쪽의 크기만을 늘리게되는 경우는 거의 없기때문에 자주 사용되지 않는다)

transform: rotate(45deg);

요소를 45도 만큼 회전시킨다.

transform: perspective(400px) rotateX(45deg);

원근함수를 가장 먼저 써야 한다.

원근 거리 400px를 명시했고 x축을 기준으로 45deg만큼 회전시킨다.

(1) perspective

하위 요소를 관찰하는 원근 거리를 지정한다.

단위 : px 등 단위로 지정한다.

perspective 속성과 함수의 차이점

속성 : 관찰대상의 부모에 적용한다, perspective-origin으로 기준점을 설정한다.

perspective: 600px;

함수 : 관찰대상 자체에 적용한다, transform-origin으로 기준점을 설정한다.

transform: perspective(600px);

(2) backface-visibility

3D 변환으로 회전된 요소의 뒷면 숨김 여부를 지정한다.

(rotateX, rotateY 등의 속성으로 인해 요소가 회전되었을때 뒷면을 보여줄지 말지 정한다)

visible (기본값) : 뒷면 보임
hidden : 뒷면 숨김

transform: rotateY(180deg);
backface-visibility: hidden;

위 코드는 Y축을 기준으로 180도 돌렸을때 뒷면을 보이지 않게 설정했다.

ekgns0508

이전 포스트

HTML/CSS/JS - CSS속성(2)

다음 포스트