CSS 전환이란 무엇이며 어떻게 사용합니까?
게시 됨: 2022-02-16이전 기사에서 CSS 애니메이션의 기본 개념과 사용 방법을 배웠습니다. 전환은 약간의 차이점이 있는 단순화된 형태의 애니메이션이라고 할 수 있습니다. 애니메이션을 트리거하는 형태가 가장 관련성이 높은 것입니다.
또 다른 차이점은 전환에는 두 가지 상태(초기 및 최종 상태)만 있는 반면 @keyframes 규칙을 사용하여 애니메이션 요소에 대해 여러 상태를 정의할 수 있다는 것입니다. 전환은 예를 들어 요소 위로 마우스를 가져갈 때 동작에 대해 트리거되지만 애니메이션은 특정 동작 없이 발생할 수 있습니다(예: 페이지 로드 후 애니메이션 지연).
이 튜토리얼에서는 실제 예제를 통해 CSS 전환의 기본 개념을 배울 것입니다. 또한 CSS와 함께 이미지 스프라이트를 사용하는 방법도 배우게 됩니다.
시작하자!
1 단계. - 제안된 레이아웃
웹 에이전시의 정규 서비스를 홍보하는 4개의 카드가 있습니다. 그 위에 마우스를 올려 놓으면 카드 내부의 각 요소가 원하는 효과를 얻기 위해 서로 다른 전환을 갖게 됩니다.
2단계. - HTML
- 선호하는 코드 편집기 열기
- index.html 이라는 HTML 파일을 만듭니다.
- 이 코드를 복사하여 붙여넣습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Transitions</title>
<link href="https://fonts.googleapis.com/css?family=Oswald|Quattrocento&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div class="experts">
<h2>What We Do</h2>
<div class="service-card-container">
<div class="service-card">
<div class="front">
<span class="icon-strategy"></span>
<h3>Strategy</h3>
</div>
<div class="hidden">
<p>The main strategy of a web site is to make visitors convert.</p>
<a href="#">Read more</a>
</div>
</div>
<div class="service-card">
<div class="front">
<span class="icon-ui-ux-design"></span>
<h3>UI / UX Design</h3>
</div>
<div class="hidden">
<p>The design of your site Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate, error.</p>
<a href="#">Read more</a>
</div>
</div>
<div class="service-card">
<div class="front">
<span class="icon-development"></span>
<h3>Development</h3>
</div>
<div class="hidden">
<p>Our team of developers Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
<a href="#">Read more</a>
</div>
</div>
<div class="service-card">
<div class="front">
<span class="icon-digital-marketing"></span>
<h3>Digital Marketing</h3>
</div>
<div class="hidden">
<p>Marketing experts Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<a href="#">Read more</a>
</div>
</div>
</div>
</div>
</body>
</html> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Transitions</title>
<link href="https://fonts.googleapis.com/css?family=Oswald|Quattrocento&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div class="experts">
<h2>What We Do</h2>
<div class="service-card-container">
<div class="service-card">
<div class="front">
<span class="icon-strategy"></span>
<h3>Strategy</h3>
</div>
<div class="hidden">
<p>The main strategy of a web site is to make visitors convert.</p>
<a href="#">Read more</a>
</div>
</div>
<div class="service-card">
<div class="front">
<span class="icon-ui-ux-design"></span>
<h3>UI / UX Design</h3>
</div>
<div class="hidden">
<p>The design of your site Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate, error.</p>
<a href="#">Read more</a>
</div>
</div>
<div class="service-card">
<div class="front">
<span class="icon-development"></span>
<h3>Development</h3>
</div>
<div class="hidden">
<p>Our team of developers Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
<a href="#">Read more</a>
</div>
</div>
<div class="service-card">
<div class="front">
<span class="icon-digital-marketing"></span>
<h3>Digital Marketing</h3>
</div>
<div class="hidden">
<p>Marketing experts Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<a href="#">Read more</a>
</div>
</div>
</div>
</div>
</body>
</html>
서비스 카드 컨테이너에는 4개의 다른 카드가 있습니다. 각 카드는 아이콘, 제목, 일부 텍스트 및 사이트의 해당 정보에 대한 링크로 구성됩니다. 카드 위로 마우스를 가져가면 텍스트와 링크가 표시되며 그렇지 않으면 숨겨집니다.
3단계. - 기본 CSS 스타일
- CSS 파일을 만들고 style.css 라고 부릅니다. HTML 코드에는 이미 이 파일과 Google 글꼴에 대한 링크가 있습니다.
- 다음 스타일을 복사하여 붙여넣어 카드의 타이포그래피 스타일과 배경색을 변경합니다.
/* BASIC RESET */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
/* TYPOGRAPHY */
body {
font-family: 'Quattrocento', serif;
}
h1,
h2,
h3,
h4,
h5,
h6,
a {
font-family: 'Oswald', sans-serif;
}
/* BACKGROUND */
.service-card {
background-color: #0a1128;
color: white;
}
.service-card a {
color: white;
} /* BASIC RESET */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
/* TYPOGRAPHY */
body {
font-family: 'Quattrocento', serif;
}
h1,
h2,
h3,
h4,
h5,
h6,
a {
font-family: 'Oswald', sans-serif;
}
/* BACKGROUND */
.service-card {
background-color: #0a1128;
color: white;
}
.service-card a {
color: white;
}
4단계. - 레이아웃 스타일
CSS Grid를 사용하여 카드를 만들고 가로로 배열해 보겠습니다.
- CSS 코드를 수정합니다.
/* LAYOUT */
.experts {
margin-top: 36px;
}
.experts h2 {
text-align: center;
}
.service-card-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.service-card {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto;
grid-row-gap: 18px;
justify-items: center;
align-content: center;
height: 320px;
}
서비스 카드 컨테이너는 4개의 열이 있는 수평 그리드입니다. 각 카드는 2행이 있는 그리드 컨테이너로도 선언되었습니다. 각 카드에 대해 고정 높이를 선언했습니다.
5단계. - 이미지 스프라이트
W3Schools에 따르면 이미지 스프라이트는 단일 이미지에 담긴 이미지 모음입니다. 페이지가 로드해야 하는 각 이미지에 대해 서버를 요청할 필요가 없기 때문에 대역폭을 절약할 수 있습니다. 이미지를 한 번 요청한 다음 CSS 코드 내에서 이미지의 필요한 부분을 매핑합니다.
이미지의 너비는 240px, 높이는 480px입니다. 각 아이콘은 120x120px의 영역을 포함합니다. 각 이미지를 매핑하기 위해 좌표(0px 0px)를 사용하여 이미지의 왼쪽 상단 모서리에서 시작합니다('left - top' 순서에 따라).
그런 식으로 스프라이트의 왼쪽 열에 있는 이미지는 다음 위치에 있습니다.
- 0px 0px
- 0픽셀 -120픽셀
- 0픽셀 -240픽셀
- 0픽셀 -360픽셀
호버링하기 전에 사용할 이미지입니다.
스프라이트의 오른쪽 열에 있는 이미지는 다음 위치에 있습니다.
- 120픽셀 0픽셀
- 120픽셀 -120픽셀
- 120픽셀 -240픽셀
- 120픽셀 -360픽셀
- CSS 코드를 수정합니다.
.service-card span {
display: inline-block; /* to be able to apply width and height to the element */
}
.icon-strategy {
background: url(./sprite.png) 0px 0;
width: 120px;
height: 120px;
}
.icon-ui-ux-design {
background: url(./sprite.png) 0px -120px;
width: 120px;
height: 120px;
}
.icon-development {
background: url(./sprite.png) 0px -240px;
width: 120px;
height: 120px;
}
.icon-digital-marketing {
background: url(./sprite.png) 0px -360px;
width: 120px;
height: 120px;
}/* LAYOUT */
.experts {
margin-top: 36px;
}
.experts h2 {
text-align: center;
}
.service-card-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.service-card {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto;
grid-row-gap: 18px;
justify-items: center;
align-content: center;
height: 320px;
}
서비스 카드 컨테이너는 4개의 열이 있는 수평 그리드입니다. 각 카드는 2행이 있는 그리드 컨테이너로도 선언되었습니다. 각 카드에 대해 고정 높이를 선언했습니다.
5단계. - 이미지 스프라이트
W3Schools에 따르면 이미지 스프라이트는 단일 이미지에 담긴 이미지 모음입니다. 페이지가 로드해야 하는 각 이미지에 대해 서버를 요청할 필요가 없기 때문에 대역폭을 절약할 수 있습니다. 이미지를 한 번 요청한 다음 CSS 코드 내에서 이미지의 필요한 부분을 매핑합니다.
이미지의 너비는 240px, 높이는 480px입니다. 각 아이콘은 120x120px의 영역을 포함합니다. 각 이미지를 매핑하기 위해 좌표(0px 0px)를 사용하여 이미지의 왼쪽 상단 모서리에서 시작합니다('left - top' 순서에 따라).
그런 식으로 스프라이트의 왼쪽 열에 있는 이미지는 다음 위치에 있습니다.
- 0px 0px
- 0픽셀 -120픽셀
- 0픽셀 -240픽셀
- 0픽셀 -360픽셀
호버링하기 전에 사용할 이미지입니다.
스프라이트의 오른쪽 열에 있는 이미지는 다음 위치에 있습니다.
- 120픽셀 0픽셀
- 120픽셀 -120픽셀
- 120픽셀 -240픽셀
- 120픽셀 -360픽셀
- CSS 코드를 수정합니다.
.service-card span {
display: inline-block; /* to be able to apply width and height to the element */
}
.icon-strategy {
background: url(./sprite.png) 0px 0;
width: 120px;
height: 120px;
}
.icon-ui-ux-design {
background: url(./sprite.png) 0px -120px;
width: 120px;
height: 120px;
}
.icon-development {
background: url(./sprite.png) 0px -240px;
width: 120px;
height: 120px;
}
.icon-digital-marketing {
background: url(./sprite.png) 0px -360px;
width: 120px;
height: 120px;
}
나쁘지 않죠? 약간의 패딩으로 이 부분을 마무리하기 위해 약간의 장식적인 터치를 추가해 보겠습니다.
- CSS 코드를 수정합니다.
.service-card-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
padding: 0.9em 0 1.8em 0;
}
.service-card {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto;
grid-row-gap: 18px;
justify-items: center;
align-content: center;
height: 320px;
padding: 0 2.75em;
} .service-card-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
padding: 0.9em 0 1.8em 0;
}
.service-card {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto;
grid-row-gap: 18px;
justify-items: center;
align-content: center;
height: 320px;
padding: 0 2.75em;
}
6단계. - CSS 전환
CSS 전환 속성에는 4가지 다른 하위 속성이 있습니다.
- transition-property (전환이 적용될 요소의 속성)
- 전환 기간
- 전환 타이밍 기능
- 전환 지연
약어는 다음과 같습니다.
전환: [전환 속성] [전환 기간] [전환 타이밍 기능] [전환 지연]
- CSS 코드를 수정합니다.
/* TRANSITIONS */
.service-card {
transition: margin-top 0.2s ease-out, height 0.2s ease-out, background 0.2s ease-out;
}
.service-card:hover {
margin-top: -5em;
height: 25em;
background: #006e9c;
}
알 수 있듯이 쉼표로 구분하여 서로 다른 요소 속성에 여러 전환을 적용할 수 있습니다. 이러한 전환에는 지연이 없습니다.
카드를 위로 굴리려면 상단에 음수 여백을 설정하고 이 여백의 절대값을 요소 높이에 추가합니다(320px == 20em).
이제 이미지를 대상으로 지정하고 전환으로 변경해야 합니다.
- CSS 코드를 수정합니다.
.icon-strategy,
.icon-ui-ux-design,
.icon-development,
.icon-digital-marketing {
transition: background 0.4s step-end;
}
.service-card:hover .icon-strategy {
background: url(./sprite.png) 120px 0;
width: 120px;
height: 120px;
}
.service-card:hover .icon-ui-ux-design {
background: url(./sprite.png) 120px -120px;
width: 120px;
height: 120px;
}
.service-card:hover .icon-development {
background: url(./sprite.png) 120px -240px;
width: 120px;
height: 120px;
}
.service-card:hover .icon-digital-marketing {
background: url(./sprite.png) 120px -360px;
width: 120px;
height: 120px;
}
다시 한번:
- 전환 속성: 배경
- 전환 시간: 0.4초
- 전환 타이밍 기능: 단계 종료
나머지는 이미지 스프라이트의 정확한 좌표(위에서 자세히 설명)에 매핑하는 것입니다.
마지막으로 .hidden 컨테이너를 대상으로 지정해 보겠습니다.
- CSS 코드를 수정합니다.
.hidden,
.hidden a {
transition: color 0.4s ease-out 0.2s;
}
.service-card:hover .hidden {
height: auto;
}
.service-card:hover .hidden,
.service-card:hover .hidden a {
color: white;
}
여기에 주의해야 할 두 가지 세부정보가 있습니다.
- 텍스트 색상의 전환에는 0.2초의 전환 지연 이 있습니다.
- 전환 없이 마우스를 가져가면 요소의 높이 속성이 변경됩니다.
전환은 모든 주요 브라우저에서 지원됩니다.
이 운동이 마음에 드셨기를 바랍니다. 읽어 주셔서 감사합니다!
코드는 여기에서 찾을 수 있습니다.