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는 홀수번째 있는 자식들에게 적용한다는 뜻이다.
코드를 적용시키면 아래처럼 보인다.
'⁂ CSS > : 기본 익히기' 카테고리의 다른 글
| [CSS] #5-1 미디어쿼리(Media Queries) (0) | 2022.08.02 |
|---|---|
| [CSS] #4-4 CSS로 플래시 메뉴 만들어보기(공사중) (0) | 2022.08.02 |
| [CSS] #4-2 Transform으로 버튼 만들어보기 (0) | 2022.08.02 |
| [CSS] #4-1 CSS의 display 알아보기 (0) | 2022.08.02 |
| [CSS] #3-4 레이아웃 4 : z-index 속성 (0) | 2022.08.01 |