CSS 속성 position 특징 - 요소 쌓임 순서
요소 쌓임 순서 (Stack order)
요소가 쌓여있는 순서를 통해
어떤 요소가 사용자와 가깝게 있는지 (더 위에 쌓이는지)를 결정(Z축)
1. static을 제외한 position 속성의 값이 있을 경우 가장 위에 쌓임 (값은 무관)
2. position이 모두 존재한다면 z-index 속성의 숫자 값이 높을수록 위에 쌓임
3. position 속성의 값이 있고, z-index 속성의 숫자 값이 같다면, 'HTML'의 마지막 코드일수록 위에 쌓임
position이 있는 곳에서만 z-index를 사용할 수 있음
position이 작성된 순서가 나중일수록 이미지가 위에 올라오게 된다
==========
(2) display 수정
absolute, fixed 속성 값이 적용된 요소는 display 속성의 값이 대부분 block으로 수정됨
- static relative sticky 에 해당되는 부분은 크게 적용 사항이 없음
float , positon: absolute, fixed --> display: block으로 설정됨
주의해서 사용할 것
position: absoulute, fixed 설정은 --> display: block 으로 자동 설정되게함
지정값, 변화값
inline, block
inline-block, block
inline-table, block
table-row, block
table-row-group, block
flex, flex/ position 속성 효과없음
inline-flex, inline-flex / position 속성 효과 없음
==========
(3) background
background : 색상 이미지경로 반복 위치 스크롤특성;
.box1 {
background: red url("../img/image.jpg") no-repeat left top scroll;
/* 색상 이미지경로 반복 위치 스크롤특성 */
}
.box2 {
background: url("../img/image.jpg") no-repeat right 100px;
/* 이미지경로 반복 위치 */
}
.box3 {
background: red;
/* 색상 */
}
값, 의미, 기본값
background-color, 배경 색상, transparent
background-image, 하나 이상의 배경 이미지, none
background-repeat, 배경 이미지의 반복, repeat
background-position, 배경 이미지의 위치, 0 0
background-attachment, 배경 이미지의 스크롤 여부(특성), scroll
==========
(4) background-color
background-color : 요소의 배경 색상을 지정
속성값
값, 의미, 기본값
색상, 요소의 배경 색상
transparent, 투명, transparent
요소 배경색은 기본적으로 투명하다
개별속성으로 background-color이 있지만, background를 더 많이 사용한다 (편의성 때문에)
(예시)
<div></div>
(예시)
div {
width: 200px;
height: 100px;
background: tomato;
}
================
(5) background-image
background-image : 요소의 배경에 하나 이상의 이미지를 삽입
- 요소의 배경에 이미지를 삽입한다.
속성값
값, 의미, 기본값
none, 이미지 없음, none
url("경로"), 이미지 경로(URL)
background-image: url("경로");
.box {
background-image: url("../img/image.jpg");
width: 120px;
height: 80px;
}
배경 이미지 삽입 시, 요소의 크기가 설정되어 있어야 배경 이미지가 보일 수 있습니다.
하나 이상의 이미지를 넣을 수 있다
.box1 {
background-image: url(),
url(),
url();
}
.box2 {
background: url() no-repeat,
url() np-repeat 100px 50px,
url() repeat-x;
}
하나 이상의 배경이미지를 삽입할 경우 , 로 구분합니다.
먼저 작성된 이미지가 더 위에 쌓입니다. 이런 '다중 배경 이미지'는 IE8 이하 버전에 사용할 수 없습니다.
.box {
background-image: url("https://heropy.blog/css/images/vendor_icons/css3.png");
}만 했을때 이미지가 나오지 않는 이유는 ?
--> 속성을 통해서 이미지를 출력
--> 이미지 배경이 나와야 하는데 기본적으로 block 요소는 width: auto(100%) , height: auto(0)으로 나타남
먼저 삽입한 이미지가 맨 앞에 보인다
(예시)
.box {
background-image: url("https://heropy.blog/css/images/vendor_icons/css3.png"), url("https://heropy.blog/css/images/vendor_icons/html5.png"), url("https://heropy.blog/css/images/vendor_icons/javascript.png");
width: 500px;
height: 250px;
border: 2px dashed lightgray;
}
background-repeat: no-repeat;을 통해 반복을 못하게 할 수도 있다
(예시)
.box {
background-image: url("https://heropy.blog/css/images/vendor_icons/css3.png");
background-repeat: no-repeat;
width: 750px;
height: 500px;
border: 2px dashed lightgray;
}
================
(6) background-repeat
background-repeat : 배경 이미지의 반복을 설정
속성값
값, 의미, 기본값
repeat, 배경이미지를 수직, 수평으로 반복, repeat
repeat-x, 배경 이미지를 수평으로 반복
repeat-y, 배경 이미지를 수직으로 반복
no-repeat, 반복없음
배경이미지 반복적으로 표시하는데 기본값 적용됨
(예시)
.box {
background-repeat: repeat-y;
width: 550px;
height: 350px;
border: 2px dashed lightgray;
background-image: url("https://heropy.blog/css/images/logo.png");
background-size: 100px;
}
================
(7) background-position : 배경 이미지의 위치를 설정
속성값
값, 의미, 기본값
%, 왼쪽 상단 모서리는 0% 0%, (기본값) 0% 0%
오른족 하단 모서리는 100% 100%
방향 방향을 입력하여 위치 설정
top, bottom, left, right, center
단위 px, em, cm 등 단위로 지정
기본 사용법
- 값이 방향일 경우
background-position: 방향1 방향2; (right bottom)
값이 단위 (%, px 등)일 경우
background-position: X축 Y축; (100px 200px)
- 왼쪽, 위쪽에서부터의 거리만 이동 가능하다
방향과 단위를 설정할때, 위 아래는 Y축 --> 두번째에 작성해줘양함
좌 우는 X축 --> 첫번째에 작성해줘야함
(예시)
<div class="box"></div>
(예시)
.box {
background-repeat: no-repeat;
width: 550px;
height: 350px;
border: 2px dashed lightgray;
background-image: url("https://heropy.blog/css/images/logo.png");
background-size: 100px;
background-position: left 50px;
}
================
(8) background-attachment
background-attachment : 요소가 스크롤될 때 배경 이미지의 스크롤 여부(특성) 설정
속성값
값, 의미, 기본값
scroll, 배경이미지가 요소를 따라서 같이 스크롤 됨, scroll
fixed, 배경이미지가 뷰포트(Viewport)에 고정되어, 요소와 같이 스크롤되지 않음
local, 요소 내 스크롤 시 배경 이미지가 같이 스크롤 됨
(예시)
<section class="section1"></section>
<section class="section2"></section>
<section class="section3"></section>
<section class="section4"></section>
<section class="section5"></section>
section {
height: 300px;
}
.section2 {
background-image: url("https://image.istarbucks.co.kr/upload/common/img/main/2023/2023_m_summer1_pick_bg_1.jpg");
background-size: auto 100%;
background-position: right bottom;
background-attachment: fixed;
}
.section3 {
background-image: url("https://image.istarbucks.co.kr/upload/common/img/main/2023/230418_m_reserve_bg.jpg");
}
background-attachment: local; 지역적으로 이미지 안에 스크롤을 반영하고 싶다면 적용할 것
overflow: auto;를 통해 스크롤을 반영할 것
(예시)
<div class="container">
<div class="for-scroll"></div>
</div>
(예시)
.container {
width: 400px;
height: 300px;
border: 4px solid red;
margin: 50px;
overflow: auto;
background-image: url("https://image.istarbucks.co.kr/upload/common/img/etc/reserve_visual_m.jpg");
background-size: 50%;
background-attachment: local;
}
.for-scroll {
height: 2000px;
}
================
(9) background-size
background-size : 배경 이미지의 크기를 지정
속성값
값, 의미, 기본값
auto, 배경이미지가 원래의 크기로 표시됨, auto
단위 : px, em, % 등 단위로 지정,
: width height 형태로 입력 가능 (E.g. 120px 370px)
: width만 입력하면 비율에 맞게 지정됨 (E.g. 120px)
cover : 배경 이미지의 크기 비율을 유지하며, 요소의 더 넓은 너비에 맞춰짐
: 이미지가 잘릴 수 있음
contain : 배경 이미지의 크기 비율을 유지하며, 요소의 더 짧은 너비에 맞춰짐
: 이미지가 잘리지 않음
contain은 이미지가 다 보이지만 빈 공간이 보일수 있다는 단점이 있음
(예시)
<div class="box"></div>
(예시)
.box {
width: 400px;
height: 500px;
border: 2px solid red;
margin: 50px;
background-image: url("https://heropy.blog/css/images/logo.png"); /* 500x500 */
background-repeat: no-repeat;
background-size: contain;
}
================
(10) Transitions
Transitions : CSS 속성의 전환 효과를 지정
transition
CSS 속성의 시작과 끝을 지정(전환 효과)하여 중간 값을 애니메이션
값, 의미, 기본값
transition-property, 전환 효과를 사용할 속성 이름, all
transition-duration, 전환 효과의 지속시간 설정, 0s .5s 1000ms=1s
transition-timing-function, 타이밍 함수 지정(타이밍 함수란?), ease
transition-delay, 전환 효과의 대기시간 설정, 0s
보통 바뀌기 전상태인 CSS 블록에 transition을 넣어준다
transition: width 1s, background 1s;
아래 코드와 위에 코드는 같은 속성이 있다
transition-property: width, background;
transition-duration: 1s;
transition : CSS 속성의 시작과 끝을 지정(전환 효과)하여 중간 값을 애니메이션
transition-property : 전환 효과를 사용할 속성 이름을 설정
값, 의미, 기본값
all, 모든 속성에 적용, all
속성이름, 전환효과를 사용할 속성 이름
transition-duration : 전환 효과의 지속시간을 설정
값, 의미, 기본값
시간, 전환 효과가 지속되는 시간, 0s
transition-timing-function : 타이밍 함수(애니메이션 전환 효과를 계산하는 방법) 지정
값, 의미, 기본값, Cubic Bezier 값
ease, 빠르게-느리게, ease,
linear, 일정하게,
ease-in, 느리게 - 빠르게
ease-out, 빠르게 - 느리게
ease-in-out, 느리게 - 빠르게 - 느리게
cubic-bezier (n,n,n,n), 자신만의 값을 정의 (0~1)
steps(n), n번 분할된 애니메이션
- 뚝 뚝 끊기면서 각 횟수대로 끊어서 그 부분들만 보여준다
transition-delay : 전환 효과가 몇 초 뒤에 시작할지 대기시간을 설정
값, 의미, 기본값
시간, 전환효과의 대기시간을 설정 , 0s
얼만큼 기다렸다가 반영이 될 것인지가 delay이다 (transition: 2s 3s; --> 3s가 delay이다)
================
(11) 변환 2D 속성
transform : 요소의 변환 효과(변형)를 지정
transform: 변환함수1 변환함수2 변환함수3 ...;
transform: 원급법 이동 크기 회전 기울임;
.box {
transform: rotate(20deg) translate(10px, 0);
}
degree(각도) 약어 : deg
translate : 이동 - 10px 이동 , 0
transform 2D 변환 함수
값(변환 함수), 의미, 단위
translate(x, y), 이동(X축, Y축), 단위
translateX(x), 이동(X축), 단위
translateY(y), 이동(Y축), 단위
scale(x, y), 크기(X축, Y축), 없음(배수)
scaleX(x), 크기(X축), 없음(배수)
scaleY(y), 크기(Y축), 없음(배수)
rotate(degree), 회전(각도), deg
skew(x-deg, y-deg), 기울임(X축, Y축), deg
skewX(x-deg), 기울임(X축), deg
skew(y-deg), 기울임(Y축), deg
matrix(n,n,n,n,n,n), 2차원 변환 효과, 없음
transform: translate(100px, 30px) : 실시간으로 변해야된다면 사용
position: relative; left: 100px; top: 30px; : 이동하고 고정하면 사용, position은 배치하고 끝. 애니메이션에 특화되어있지 않음
애니메이션에 최적화 되어있지 않을때, 리페인팅 작업을 해야함
- transform: translate(30px, 30px); 으로 애니메이션 처리 가능하고 애니메이션에 최적화 되어있어서
많아도 크게 문제가 되지 않는다.
- transform: scale(.8); 축소도 가능하다
- transform: scale(1.5); 크기가 커지는 것도 가능하다
- transform: skewX(45deg); X축으로 45도 뒤틀린다 (마름모 형태를 만들 수 있음)
- transform: translate(20px, 10px) skew(10deg, 5deg); 함수는 띄어쓰기를 통해 다중함수로 쓸 수 있다; 이동하면서 비틀기 가능;
================
(12) 변환 3D 속성
transform 3D 변환 함수
값(변환함수), 의미, 단위
translate3d(x, y, z), 이동(X축, Y축, Z축), 단위
translateZ(z), 이동(Z축), 단위
scale3d(x, y, z), 크기(X축, Y축, Z축), 없음(배수)
scaleZ(z), 크기(Z축), 없음(배수)
rotate3d(x, y, z, a), 회전(X벡터, Y벡터, Z벡터, 각도), 없음, deg
rotateX(x), 회전(X축), deg
rotateY(y), 회전(Y축), deg
rotateZ(z), 회전(Z축), deg
perspective(n), 원근법(거리), 단위
matrix3d(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n), 3차원 변환 효과, 없음
(예시)
(예시)
img {
width: 300px;
border: 1px solid lightgray;
transition: 1s;
transform: perspective(500px) rotateX(45deg)
}
================
(13) 변환 속성 - transform-origin
아래는 별도 속성들
transform-origin : 요소 변환의 기준점을 설정
transform-style : 3D 변환 요소의 자식 요소도 3D 변환을 사용할지 설정
perspective : 하위 요소를 관찰하는 원근 거리를 설정
perspective-origin : 원근 거리의 기준점을 설정
backface-visibility : 3D 변환으로 회전된 요소의 뒷면 숨김을 설정
---
transform-origin : 요소 변환의 기준점을 설정
값, 의미, 기본값
X축, [ left, right, center ], %, 단위 , 50%(기본값)
Y축, [ top, bottom, center ], %, 단위, 50%(기본값)
Z축, 단위, 0
(예시)
(예시)
img {
width: 200px;
border: 1px solid lightgray;
transition: 1s;
transform: rotate(45deg);
transform-origin: bottom right;
}
================
(14) 변환 속성 - transform-style
transform-style : 3D 변환 요소의 자식 요소도 3D 변환을 사용할지 설정
값, 의미, 기본값
flat, 자식 요소의 3D 변환을 사용하지 않음, flat
preserve-3d, 자식 요소의 3D 변환을 사용함
transform-style: preserve-3d; 선언을 하면 자식 요소도 계속 선언을 해줘야 한다.
(예시)
<div class="perspective">
<div class="grand-parent">
<div class="parent">
</div>
</div>
</div>
(예시)
.perspective {
width: 200px;
perspective: 500px;
padding: 70px;
}
.grand-parent {
width: 200px;
border: 3px solid dodgerblue;
transition: 1s;
transform: rotateX(-45deg);
transform-style: preserve-3d;
}
.parent {
width: 200px;
border: 3px solid tomato;
transition: 1s;
transform: rotateY(45deg);
transform-style: preserve-3d;
}
img {
width: 200px;
border: 3px solid lightgray;
transform: rotateX(45deg);
}
================
(15) 변환 속성 - perspective
함수가 아니라 속성이다.
perspective : 하위 요소를 관찰하는 원근 거리를 설정
값, 의미, 기본값
단위, px, em, cm 등 단위로 지정
perspective 속성과 함수의 차이점
속성/함수, 적용대상, 기준점 설정
perspective, 관찰 대상의 부모 요소, perspective-origin
transform: perspective(), 관찰 대상 하나, transform-origin
-> 원근법의 거리를 설정한다
perspective 속성은 관찰 대상의 부모(조상) 요소에 적용하여 하위 요소들을 관찰하는
원근 거리를 설정하며, transform: perspective() 변환 함수는 관찰 대상에 직접 적용하여
그 대상을 관찰하는 원근 거리를 설정합니다.
================
(16) 변환 속성 - perspective-origin
perspective-origin : 원근 거리의 기준점을 설정
값, 의미, 기본값
X축, left, right, center, %, 단위 50%(기본값)
Y축, top, bottom, center, %, 단위 50%
perspective-origin: 50% 50% (default value)
perspective-origin: 0 50%
perspective-origin: 0 120%
(예시)
<div class="perspective">
<div class="grand-parent">
<div class="parent">
</div>
</div>
</div>
(예시)
.perspective {
width: 200px;
perspective: 600px;
perspective-origin: 100% 200%;
padding: 70px;
}
.grand-parent {
width: 200px;
border: 3px solid dodgerblue;
transition: 1s;
transform: rotateX(-45deg);
transform-style: preserve-3d;
}
.parent {
width: 200px;
border: 3px solid tomato;
transition: 1s;
transform: rotateY(45deg);
transform-style: preserve-3d;
}
img {
width: 200px;
border: 3px solid lightgray;
transform: rotateX(45deg);
}
================
(17) 변환 속성 - backface-visibility
backface-visibility : 3D 3차원 변환으로 회전된 요소의 뒷면 숨김을 설정
값, 의미, 기본값
visible, 뒷면 숨기지 않음, visible
hidden, 뒷면 숨김
0도에서 180도 돌릴때, 뒷면이 보일때 없어짐
(예시)
(예시)
img {
width: 300px;
border: 1px solid lightgray;
transition: 1s;
transform: perspective(400px) rotateY(180deg);
backface-visibility: hidden;
}
================
(18) 변환 속성 - matrix()
matrix(a, b, c, d, e, f) : 6개 인자를 받는 요소의 2차원 변환(Transforms) 효과를 지정
- scale(), skew(), translate() 그리고 rotate()를 지정
요소에 일반 변환(Transforms) 함수(2D, 3D)를 사용하더라도 브라우저에 의해
matrix 함수로 계산되어 적용됩니다. (2D 변환 함수는 matrix로, 3D 변환 함수는 matrix3d로)
따라서 일반적인 경우는 matrix 함수가 아닌 일반 변환 함수를 사용하면 됩니다.
matrix는 어떤 것일까 ?
우리가 왜 matrix를 사용하지 않고 scale, skew, translate, rotate 같은 함수를 쓰면 되는가 ?
- 실행시 scale, skew,은 matrix 함수로 변환됨
- matrix는 scale, skew, translate, rotate 통합해놓은 함수
- 머릿속으로 계산해서 사용하기 어렵다
'CSS (프론트)' 카테고리의 다른 글
| CSS 속성 - Flex 개요 (2) (0) | 2023.07.04 |
|---|---|
| CSS 속성 - Flex 개요 (1) (0) | 2023.06.30 |
| CSS 속성 - 글꼴, 문자 (0) | 2023.06.30 |
| CSS 속성 - 박스모델 (너비, 높이 등) (0) | 2023.06.23 |
| Vw, vh, vmin, vmax 정의 (0) | 2023.06.23 |