⁂ CSS/: 기본 익히기
[CSS] #4-3 skew 알아보기
김갱환
2022. 8. 2. 12:52
1. Skew
Skew는 기울기를 주는 명령어이다.
먼저 임의로 글자들을 만들어보자.
만들때 지금까지 사용했었던 여러가지 속성들을 추가하면서 만들었다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>19_skew.html</title>
<style>
h1{text-align: center;}
h1>span{
width: 80px;
height: 80px;
font-size: 80px;
border: 1px solid black;
border-radius: 20px;
box-shadow: 1px 1px 2px red;
margin: 5px;
display: inline-block;
}
</style>
</head>
<body>
<!-- 기울기 -->
<h1>
<span>C</span>
<span>S</span>
<span>S</span>
<span>3</span>
</h1>
</body>
</html>
이제 여기에 기울기를 주려고 한다.
기울기를 주는 방법은 #4-2에서 rotate를 사용했던 것과 동일하다.
h1>span:nth-child(even){
transform: skewY(-20deg);
}
h1>span:nth-child(odd){
transform: skewY(20deg);
}nth-child의 속상값이 처음 보는 것들이다.
even은 짝수번째 있는 자식들 / odd는 홀수번째 있는 자식들에게 적용한다는 뜻이다.
코드를 적용시키면 아래처럼 보인다.
