JUST GO
[CSS] 속성 본문
background-image 속성
- 어떠한 요소의 배경 이미지를 지정하기 위해 사용한다.
- 이때 배경 이미지는 <img> 태그와 달리 태그가 아님으로 공간을 차지 하지 않는다.
- 항시 url("주소") 함수와 함께 사용한다. ("쌍따옴표 있어야함")
- 콤마(,)로 구분하여 여러개의 배경 이미지를 지정할 수 있는데, 먼저 적은 배경이미지가 위로 올라온다.
- 용법(한 개)
"선택자" {
background-image: url("이미지 주소");
}
- 용법(여러개)
"선택자" {
background-image: url("이미지 주소 1"), url("이미지 주소 2"),...;
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>background-image 속성</title>
<style>
.box {
width: 30rem;
height: 30rem;
background-image: url("https://t3.daumcdn.net/thumb/R720x0.fjpg/?fname=http://t1.daumcdn.net/brunch/service/user/sBw/image/VQl7ZA_Qo_Qs-SrCYFg5HWTOPVw.jpg");
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>background-position 속성
- 표시되는 배경 이미지의 기준이되는 위치를 지정한다.
- "background-image" 속성이 없다면 의미없음.
- 용법(한 개)
... {
background-position: [top|right|bottom|left|center];
}
- 용법(두 개)
... {
background-position: [top | bottom | center] [right | left | center];
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>background-position 속성</title>
<style>
.box {
width: 100vw;
height: 100vh;
background-image: url("https://t3.daumcdn.net/thumb/R720x0.fjpg/?fname=http://t1.daumcdn.net/brunch/service/user/sBw/image/VQl7ZA_Qo_Qs-SrCYFg5HWTOPVw.jpg");
background-position: center;
}
.box:hover {
width: 30rem;
height: 30rem;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>background-repeat 속성
- 배경 이미지의 반복과 관련된 설정이다.
- 값 repeat-x : X축으로만 반복한다.
- 값 repeat-y : Y축으로만 반복한다.
- 값 repeat : X축과 Y축으로 반복한다. (기본값)
- 값 no-repeat : 반복하지 않는다.
- 용법 (한 개)
...{
background-repeat: [repeat-x | repeat-y | repeat | no-repeat ];
}
- 용법 (두 개)
... {
background-repeat: [X축 반복 설정 : repeat | no-repeat] [Y축 반복 설정 : repeat | no-repeat];
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>background-position 속성</title>
<style>
.box {
width: 100vw;
height: 100vh;
background-image: url("https://t3.daumcdn.net/thumb/R720x0.fjpg/?fname=http://t1.daumcdn.net/brunch/service/user/sBw/image/VQl7ZA_Qo_Qs-SrCYFg5HWTOPVw.jpg");
background-position: center;
background-repeat: no-repeat;
}
/* .box:hover {
width: 30rem;
height: 30rem;
} */
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>background-size 속성
* background-size 속성 *
- 배경 이미지의 크기를 지정하기위해 사용한다.
- 용법
... {
background-size: [?px|?rem|?vw|?vh|?%|...];
}
- 위 용법에서 퍼센트(%)는 배경 이미지를 포함하는 요소의 가로 크기에 대한 비율이다. 이 때 세로크기는 설정한 가로크기에 맞게(찌그러지지 않게) 자동으로 설정된다.
- 용법
... {
background-size: [가로 크기 : ?px|?rem|?vw|?vh|?%|...] [세로 크기 : ?px|?rem|?vw|?vh|?%|...];
}
- 위 용법에서 퍼센트(%)는 배경 이미지를 포함하는 요소의 가로와 세로크기에 대한 비율이다. 단, 비율이 깨어질 수 있음으로 사용에 유의한다.
- 용법
... {
background-size: [cover|contain];
}
- contain : 배경 이미지가 요소의 크기 내에서 잘리는 부분 없이, 표시할 수 있는 가장 큰 크기를 가지게 된다.
- cover : 배경 이미지가 요소의 빈 공간을 모두 덮을 수 있는 한도 내에서 가장 작은 크기를 가지게 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>background-image 속성</title>
<style>
body {
margin: 0;
}
.box {
width: 100vw;
height: 100vh;
background-image: url("resources/images/background-image.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>배경화면에 주로 사용
background-image: url("resources/images/background-image.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;color 속성
- 글씨의 색을 지정하기 위해 사용한다.
- 용법
... {
color: [*literal | rgb(...) | rgba(...) | #...];
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>color 속성</title>
<style>
.important {
color: rgb(200, 100, 100);
}
</style>
</head>
<body>
<span class="important">중요하다</span>
</body>
</html>cursor 속성
- 해당 요소에 마우스를 올렸을 때 표시할 커서의 종류를 지정한다.
- 용법
... {
cursor: *x;
}
- *x 값
- auto : 해당 요소의 종류나 역할에 따라 마우스 커서를 자동으로 지정한다. (기본값)
- default : 평소 상태의 마우스 커서.
- none : 마우스 커서를 그리
지 않는다.(SEO 점수 개박살남)
- pointer : 클릭할 수 있는 모양의 커서. 주로 클릭하면 무슨일이 발생하거나, 링크인 것에 사용된다.
- text : 일반 텍스트 필드에서의 커서. 아이빔(I)이라기도 한다.
- 추가 커서 : https://developer.mozilla.org/ko/docs/Web/CSS/cusor
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>cursor 속성</title>
<style>
.box {
width: 10rem;
height: 10rem;
background-color: rgb(200,100,100);
cursor: pointer;
}
input {
cursor: default;
}
</style>
</head>
<body>
<div class="box"></div>
<input type="text">
</body>
</html>margin 속성
- 요소의 외부 여백을 지정하기 위해 사용한다.
- 외부 여백은 요소의 본래 크기로 인정되지 않는다.
- 상/하 외부 여백은 display 속성 값이 inline인 것(가령 a, span 등)에 대해서는 효과를 가지지 않는다.
- 요소를 가운데 정렬하기 위해 margin 속성 값을 '0 auto'로 두지 않는다. (구시대 방식)
- 용법 (한 개)
... {
margin: [?px|?rem|?%|...];
}
- 선택된 요소의 모든 방향에 대한 외부 여백을 지정한다.
- 퍼센트(%)값은 해당 요소를 포함하는 부모 요소의 크기에 대한 백분율이다.
- 용법 (두 개)
... {
margin: [상/하 : ?px|?rem|?%|...] [좌/우 : ?px|?rem|?%|...];
}
- 선택된 요소의 상/하 및 좌/우 외부 여백을 각각 지정한다.
- 용법 (네 개)
... {
margin: [상 : ?px|?rem|?%|...] [우 : ?px|?rem|?%|...] [하 : ?px|?rem|?%|...] [좌 : ?px|?rem|?%|...];
}
- 선택된 요소의 상, 우, 하, 좌 외부 여백을 각각 지정한다. (12시 부터 시계 방향으로 네 군데)
margin-top 속성
- 상부 외부 여백을 지정하기 위해 사용한다.
- 용법
... {
margin-top: [?px|?rem|?%|...];
}
margin-right 속성
- 우측 외부 여백을 지정하기 위해 사용한다.
- 용법
... {
margin-right: [?px|?rem|?%|...];
}
margin-bottom 속성
- 하부 외부 여백을 지정하기 위해 사용한다.
- 용법
... {
margin-bottom: [?px|?rem|?%|...];
}
margin-left 속성
- 좌측 외부 여백을 지정하기 위해 사용한다.
- 용법
... {
margin-left: [?px|?rem|?%|...];
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>margin 속성</title>
<style>
a {
background-color: rgb(0,5,10);
color: rgb(255,255,255);
margin: 1rem;
}
</style>
</head>
<body>
<a>짜장면</a>
<a>짬뽕</a>
<a>볶음밥</a>
<a>중화비빔밥</a>
<a>탕수육</a>
</body>
</html>padding 속성
- 요소의 내부 여백을 지정하기 위해 사용한다.
- 용법 (한 개)
... {
padding: [?px|?rem|?%|...];
}
- 선택된 요소의 모든 방향에 대한 내부 여백을 지정한다.
- 퍼센트(%)값은 해당 요소를 포함하는 부모 요소의 크기에 대한 백분율이다.
- 용법 (두 개)
... {
padding: [상/하 : ?px|?rem|?%|...] [좌/우 : ?px|?rem|?%|...];
}
- 선택된 요소의 상/하 및 좌/우 내부 여백을 각각 지정한다.
- 용법 (네 개)
... {
padding: [상 : ?px|?rem|?%|...] [우 : ?px|?rem|?%|...] [하 : ?px|?rem|?%|...] [좌 : ?px|?rem|?%|...];
}
- 선택된 요소의 상, 우, 하, 좌 내부 여백을 각각 지정한다. (12시 부터 시계 방향으로 네 군데)
padding-top 속성
- 상부 내부 여백을 지정하기 위해 사용한다.
- 용법
... {
padding-top: [?px|?rem|?%|...];
}
padding-right 속성
- 우측 내부 여백을 지정하기 위해 사용한다.
- 용법
... {
padding-right: [?px|?rem|?%|...];
}
padding-bottom 속성
- 하부 내부 여백을 지정하기 위해 사용한다.
- 용법
... {
padding-bottom: [?px|?rem|?%|...];
}
padding-left 속성
- 좌측 내부 여백을 지정하기 위해 사용한다.
- 용법
... {
padding-left: [?px|?rem|?%|...];
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>padding 속성</title>
<style>
div {
background-color: rgb(0,5,10);
color: rgb(255,255,255);
padding: 1rem;
}
</style>
</head>
<body>
<div>짜장면</div>
</body>
</html>display 속성
- 요소의 표시 유형을 지정하기 위해 사용한다.
- 용법
... {
display: *x;
}
- *x
- block : 부모 요소의 가로크기를 전체 차지하는(한 줄을 다 차지 하는) 표시 방식(기본적으로 div 등이 그러함)
- inline : 일반 텍스트 처럼 취급된다.
- inline-block : 일반 텍스트 처럼 취급되나, block의 속성(가로/세로 크기 지정, margin-top, margin-botoom 적용등)을 일부 가진다.
- flex : 해당 요소를 flex 컨테이너로 만든다.
- inline-flex : 해당 요소를 flex 컨테이너로 만드나 inline-block 처럼 취급된다.
- grid : 해당 요소를 grid 컨테이너로 만든다.
- inline-grid : 해당 요소를 grid 컨테이너로 만드나 inline-block 처럼 취급된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>display 속성</title>
<style>
.box {
width: 10rem;
height: 10rem;
background-color: rgb(100,200,100);
display: inline-block;
}
.box.red {
background-color: rgb(200,100,100);
}
</style>
</head>
<body>
<div class="box"></div>
Hello!
<div class="box red"></div>
World!
</body>
</html>border 속성
- 요소의 테두리를 그리기 위해 사용한다.
- 테두리는 크기에 영향을 미친다.
- 용법
... {
border: [none | [[크기 : ?px|?rem|...] [모양 : *x] [색상]]];
}
- none 값을 주게 되면 테두리가 없어진다.
- *x
- dotted : 원형 점선
- dashed : 직사각형 점선
- solid : 실선
- double : 이중 실선
- 기타 : https://developer.mozilla.org/ko/docs/Web/CSS/border-style
border-style - CSS: Cascading Style Sheets | MDN
**border-style **CSS 단축 속성은 요소 테두리 네 면의 스타일을 지정합니다.
developer.mozilla.org
border-top 속성
- 상단 테두리를 그리기 위해 사용한다. 용법은 border와 같다.
border-right 속성
- 상단 테두리를 그리기 위해 사용한다. 용법은 border와 같다.
border-bottom 속성
- 상단 테두리를 그리기 위해 사용한다. 용법은 border와 같다.
border-left 속성
- 상단 테두리를 그리기 위해 사용한다. 용법은 border와 같다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>border 속성</title>
<style>
.box {
background-color: rgb(50,100,200);
border: 0.0625rem solid rgb(25, 50, 100);
border-right: none;
color: rgb(255, 255, 255);
display: inline-block;
padding: 0.5rem 1rem;
}
</style>
</head>
<body>
<div class="box">ㅋㅋ</div>
<br>
<a>메세지</a>
</body>
</html>border-radius 속성
- 요소의 각 꼭지점을 둥글게할 반지름을 지정한다.
- 용법
... {
border-radius: [?px | ?rem | ?5 | ...];
}
- 좌상, 우상, 우하, 좌하측 꼭지점을 둥글게 할 반지름을 설정한다.
- 퍼센트(%) 값은 해당 요소 크기에 대한 비율로, width와 height가 같은 요소에 대해 해당 값을 50%로 지정할 경우 정원(正圓)을 만들 수 있다.
border-top-left-radius 속성
- 좌측 상단 꼭지점을 둥글게할 반지름을 설정한다. 용법은 border-radius와 동일하다.
border-top-right-radius 속성
- 우측 상단 꼭지점을 둥글게할 반지름을 설정한다. 용법은 border-radius와 동일하다.
border-bottom-left-radius 속성
- 좌측 하단 꼭지점을 둥글게할 반지름을 설정한다. 용법은 border-radius와 동일하다.
border-bottom-right-radius 속성
- 우측 하단 꼭지점을 둥글게할 반지름을 설정한다. 용법은 border-radius와 동일하다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>border-radius 속성</title>
<style>
.box {
background-color: rgb(50,100,200);
border: 0.0625rem solid rgb(25, 50, 100);
border-radius: 0.5rem;
color: rgb(255, 255, 255);
display: inline-block;
padding: 0.5rem 1rem;
}
.round {
width: 10rem;
height: 10rem;
background-color: rgb(100,200,100);
border-radius: 50%;
}
.button {
background-color: black;
border-radius: 1000rem;
color: white;
display: inline-block;
padding: 0.75rem 1.25rem;
}
</style>
</head>
<body>
<div class="box">ㅋㅋ</div>
<br>
<div class="round"></div>
<br>
<div class="button">버튼임</div>
</body>
</html>font-family 속성
- 서체를 지정하기 위해 사용한다.
- 로컬에 있는 폰트를 사용하지 않는다.
- 용법
... {
font-family: '폰트 1', '폰트 2' ,..., [serif | sans-serif | monospace];
}
- 콤마(,)로 구분하여 여러개의 폰트를 이용할 수 있다.
- 먼저 적은 폰트(위에서 '폰트 1')가 뒤에 나오는 다른 폰트 보다 우선 순위를 가진다.
- 마지막으로 명시하는 폰트는 serif 혹은 sans-serif 혹은 monospace여야한다.
font-size 속성
- 글씨의 크기를 지정하기 위해 사용한다.
- 별도로 지정하지 않으면 기본 1rem임.(브라우저도 기본 설정이라면 16px)
- 용법
... {
font-size: [?px | ?rem | ...];
}
font-weight 속성
- 글씨의 굵기를 지정하기 위해 사용한다.(폰트에서 지원해야만 한다.)
... {
font-weight: *x;
}
- *x
- normal : 일반 굵기
- bold : 굵은 굵기
- lighter : 부모 요소의 글씨 굵기보다 얇은 굵기
- bolder : 부모 요소의 글씨 굵기보다 굵은 굵기
- 100 부터 900까지 100단위 : 폰트 자체가 가진 굵기(100, 200, ..., 800, 900)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>font외 속성</title>
<style>
body {
font-family: 'Rampart One','Nanum Brush Script', cursive;
}
</style>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Brush+Script&family=Rampart+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Rampart+One&display=swap" rel="stylesheet">
</head>
<body>
<span>개발자</span>
<span>開發者</span>
<span>Developer</span>
</body>
</html>max-width 속성
- 해당 요소의 최대 가로길이를 지정하기 위해 사용한다.
max-height 속성
- 해당 요소의 최대 세로길이를 지정하기 위해 사용한다.
min-width 속성
- 해당 요소의 최소 가로길이를 지정하기 위해 사용한다.
min-height 속성
- 해당 요소의 최소 세로길이를 지정하기 위해 사용한다.
opacity 속성
- 요소 자체의 투명도를 지정하기 위해 사용한다.
- 해당 요소가 가지고 있는 내용도 투명해지므로 사용에 유의한다.
- 용법
... {
opacity: [0.0~1.0 | 0%~100%];
}
- 값은 0부터 1까지의 실수 혹은 0%~100%까지의 백분율로 나타낸다.
- 값이 0(혹은 0%)이면 완전히 투명하고, 1(혹은 100%)이면 완전히 불투명하다.
- 단, 완전히 투명하다 하여도 요소는 있는 것이고 없어지는 것이 아님으로 사용에 유의한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>opacity 속성</title>
<style>
.box {
color: rgb(255,255,255);
font-size: 6rem;
}
.box:first-child {
width: 30rem;
height: 30rem;
background-color: rgb(50,50,50);
}
.box:nth-child(2) {
top: 2.5rem;
left: 2.5rem;
width: 40rem;
height: 40rem;
background-color: rgb(200,100,100);
opacity: 50%;
position: absolute;
}
</style>
</head>
<body>
<div class="box">첫번째 박스</div>
<div class="box">두번째 박스</div>
</body>
</html>overflow 속성
- 해당 요소의 범위를 벗어나는 자식 및 자손에 대한 처리를 위해 사용한다.
- 용법
... {
overflow: *x;
}
- 용법
... {
overflow: [가로축 : *x] [세로축 : *x];
}
- *x
- visible : 본 요소를 벗어나는 자식, 자손을 그냥 그대로 보이게 한다.(기본값)
- hidden : 본 요소를 벗어나는 자식, 자손을 보이지 않게 한다.
- scroll : 넘침 여부와 관계 없이 스크롤 바를 표시한다.
- auto : 넘치지 않으면 아무 것도 하지 않고, 넘치면 스크롤 바를 표시한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>overflow 속성</title>
<style>
.parent {
width: 10rem;
height: 10rem;
background-color: rgb(200,100,100);
overflow: auto;
}
.parent > .child {
top: 2.5rem;
left: 2.5rem;
width: 5rem;
height: 30vh;
background-color: rgb(100, 200, 100);
position: relative;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>z-index 속성
- 요소를 화면에 표시할 순서를 정한다.
- 값은 0(기본값)이상의 자연수로 표시한다.
- 값이 클 수록 다른 요소에 의해 가려지지 않고 화면에 표시된다.
- 용법
... {
z-index: [0~?];
}
- 값이 같다면 보다 뒤에 만들어진 요소가 위로 올라오게 된다.
- position 속성 값이 static 이라면 무시된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>z-index 속성</title>
<style>
.box {
width: 15rem;
height: 15rem;
}
.box.one {
background-color: rgb(200,100,100);
position: relative;
z-index: 2;
}
.box.two {
top: -5rem;
left: 5rem;
background-color: rgb(100,200,100);
position: relative;
z-index: 1;
}
.box.three {
top: -10rem;
left: 10rem;
background-color: rgb(100,100,200);
position: relative;
}
</style>
</head>
<body>
<div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>
</body>
</html>filter 속성
- 색상과 관련된 효과(카메라에 있는 그것)를 위해 사용한다.
- 함수를 이용하며 함수 이용시 공백( )으로 여러개의 함수를 이용할 수 있다. (절대 filter 속성을 여러개 사용하지 않는다.)
- 함수
- blur([?px | ?rem | ...]) : 해당 요소의 내용을 주어진 길이 만큼 흐린다.
- brightness([0.0~ | 0%~]) : 해당 요소의 밝기를 조절한다. 기본 밝기는 1(혹은 100%)이며 값이 작아지면 어 두워지고, 커지면 밝아진다.
- contrast([0.0~| 0%~]) : 해당 요소의 대비를 조절한다. 기본 값은 1(혹은 100%)이다.
- drop-shadow([x축 오프셋 : ?px|?rem|...] [Y축 오프셋 : ?px|?rem|...] [퍼짐 정도 : ?px|?rem|...] [색상])
: 해당 요소의 투명한 부분과 그렇지 않은 부분의 경계에 대해 그림자를 생성한다.
- grayscale([0.0~1.0 | 0%~100%]) : 해당 요소의 회색조를 조절한다. 기본 값은 0(혹은 0%)이며 값이 커지면 채도가 빠져 흑백 사진이 된다.
- invert([0 | 1 | 0% | 100%]) : 해당 요소를 반전시킨다. 기본 값은 0(혹은 0%)이며 값이 커지면 색이 반전된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>filter 속성</title>
<style>
.image {
/* filter: blur(0.5rem) brightness(50%); */
/* filter: contrast(300%); */
/* filter: drop-shadow(-1rem -1rem 1rem rgb(0,0,0)); */
/* filter: grayscale(100%); */
}
.image:hover {
filter: invert(100%);
}
</style>
</head>
<body>
<img class="image" src="https://mblogthumb-phinf.pstatic.net/MjAyMTAyMDlfMjEy/MDAxNjEyODUwNTEyNDE1.qsIuosRay1y1Ov42GfhsjD6PqPar4oEfEPK-H5yf5Lgg.ID5ZqIURoQrUK57jqU7fAxO7UYguu-6mhxD-VKMy8VIg.JPEG.cremaker2015/KakaoTalk_20210209_142655102.jpg?type=w2" alt="뚱이 못질">
</body>
</html>transform 속성
- 요소의 형태나 위치나 형태를 변화시키기 위해 사용한다.
- 각 함수는 띄우기()로 구분하여 여러개 사용한다. 절대 transform 속성을 여러개 사용하지 않는다.
- 함수
- rotate(?deg) : (해당 2D 상의 요소를 고정축 기준으로) 회전한다. (deg : Degree, 도)
- rotateX(?deg) : X축으로 회전한다.
- rotateY(?deg) : Y축으로 회전한다.
- rotateZ(?deg) : Z축으로 회전한다.
- scale([0.0~ | 0%~]) : 해당 요소를 확대/축소한다. 기본 값은 1(100%)이다.
- translate([X축 이동량 : ?px|?rem|?%|...],[Y축 이동량 : ?px|?rem|?%|...]) : 해당 요소를 X, Y축으로 이동시킨다. 이 때 퍼센트(%)값은 부모와 관계 없이 본 요소의 크기에 대한 백분율이다.
- translateX([?px | ?rem | ?% | ...]) : 해당 요소를 X축으로 이동시킨다.
- translateY([?px | ?rem | ?% | ...]) : 해당 요소를 Y축으로 이동시킨다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>transform 속성</title>
<style>
body {
perspective: 20rem;
}
.box {
width: 20rem;
height: 20rem;
background-color: rgb(200,100,100);
transition-duration: 500ms;
}
.box:hover {
/* transform: rotateY(180deg); */
/* transform: scale(2); */
transform: translate(3rem, -1rem);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>transition-duration 속성
- 어떠한 요소에 CSS 속성이 추가되거나 변경될 때 해당 추가 혹은 변경 사항이 적용되는데 걸리는 시간을 지정한다.
- 기본 값이 0이므로 기본적으로는 이러한 속성이 변경될 때 즉시 변경된다.
- 중간값이 없는 속성(display, text-align 등)은 transition의 영향을 받지 않는다.
- 용법
... {
transition-duration: [?ms | ?s];
}
- 이때 ms는 밀리초 단위이고 1000ms는 1초이다. 마찬가지로 s는 초 단위이고 1s는 1000ms이다.
transition-timing-function 속성
- 트랜지션의 영향을 받아 변화하는 속성이 시간이 지남에 따라 변화할 수준에 대한 설정이다.
- 용법
... {
transition-timing-function: *x;
}
- *x
- t% : 시간의 변화에 따른 백분율. 가령 transition-duration이 1000ms 였다면, 0ms 차가 0%, 1000ms 차가 100%이다.
- c% : 속성 변화에 따른 백분율. 가령 opacity 값이 0% 에서 100%까지 변하는 부분이라면, 0%일때 c%가 0%, 100%일때 c%가 100%이다.
- linear : Δt%:Δc% = 1:1, 시간 변화율에 따른 속성 변화율이 1:1로, 선형(Linear)이라 한다.
- ease : (기본값) 베지에 곡선함수 cubic-bezier(0.25, 0.1, 0.25, 1.0)와 같다. 초반 시간변화에 따른 변화 완료율이 가파르고, 시간이 지남에 따라 변화율이 점차 낮아진다. (가속 속도가 감속 속도보다 빠르다.)
- ease-in : 베지에 곡선 함수 cubic-bezier(0.42, 0, 1.0, 1.0)와 같다. 천천히 시작하여 완료될 때 까지 가속한다.
- ease-out : 베지에 곡선 함수 cubic-bezier(0, 0, 0.58, 1.0)와 같다. 빠르게 시작하여 완료될 때 까지 감속한다.
- ease-in-out : 베지에 곡선 함수 cubic-bezier(0.42, 0, 0.58, 1.0)와 같다. 천천히 시작하여 가속하고, 끝에 다시 감속한다.(가속 속도와 감속 속도가 같다.)
- cubic-bezier(v1,v2, v3, v4) : 직접 베지에 곡선 함수를 그린다.
https://cubic-bezier.com/#.17,.67,.83,.67※ 유용한 리소스
- https://www.pexels.com/ko-kr/ : 원하는 스톡 이미지 혹은 비디오를 무한정 다운로드 받아 사용할 수 있음.
(라이센스 관련 문제 없음)
- https://htmlcolorcodes.com/ : HTML 테마별 색상을 사용할 수 있음. (Chart 메뉴!)
- https://fonts.google.com/ : 여러 폰트를 지원하는 구글 CDN(Content Delivery Network)이다.
'CSS > 학습내용' 카테고리의 다른 글
| [선택자] ID 선택자 (1) | 2022.10.03 |
|---|---|
| [선택자] 클래스 선택자 (0) | 2022.10.03 |
| [속성] grid (0) | 2022.10.03 |
| [속성] flex (0) | 2022.10.03 |
| [CSS] 선택자 / 결합자 / 의사 클래스 (1) | 2022.10.03 |