개발 공부 기록하기

Section 9. 유용한 CSS 속성들(2) 본문

프밍/CSS

Section 9. 유용한 CSS 속성들(2)

태영(泰伶) 2023. 1. 22. 22:48

열심히 해두었던 영어 공부를 한참 쉬었더니

그나마라도 쌓아두었던 것마저 무용지물이 될 것 같아서

따로 영어 공부할 시간은 안 될 것 같고.. 강의를 영어자막 켜 놓고 보려고 한다..ㅎㅎ

 

속도가 느려질 수 있음ㅠㅠ

(언젠 빨랐냐!)

03. CSS 트랜지션

트랜지션도 border처럼 한 가지 속성에 여러 가지를 지정할 수 있다.

 

이 와중에 강사님이 VSCode를 이용하는 걸 봤는데,

<div> 하나를 만들어 클래스 이름을 circle로 한다고 해놓고

.circle만 입력하더니 Tab을 눌렀다.

 

여기도 emmet이 숨어있을 줄이야..ㅋㅋㅋㅋ

 

굳이 div.circle이라고 쓰지 않아도

별다른 역할이 적히지 않은 div는 생략이 가능한가 보다.

(JSFiddle, Codepen에서도 먹히는 거 확인했따 흐흐😎)

 

또한 CSS에서 주석을 만드는 단축키 또한 다시금 떠올릴 수 있었다.

원하는 줄에 커서를 두고

Ctrl + /

 

여러 줄을 주석으로 만들고 싶을 때는

원하는 구역을 블록으로 드래그 한 다음

(전체 블록은 Ctrl + A인 건 다들 알쥬?^ㅠ^ 미안.. 사무직 일 하다 보니 그런 꼼수만 연구하고 있게 돼서..ㅋㅋㅋ)

Alt + Shift + A

 

뭔가를 실수로 실행해 버렸다면 되돌리기(Undo)

Ctrl + Z

 

뭔가를 실수로 되돌리기 한 것을 다시 실행하고 싶다면 (Redo)

Ctrl + Y

 

아니, 여기 단축키 수업이 아닌데..ㅋㅋㅋ

 

아무튼!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Transition</title>
</head>
<body>
  <div class="circle"></div>
</body>
</html>
.circle {
  width: 300px;
  height: 300px;
  background-color: #d3cefc;
}
.circle:hover {
  background-color: #95baf7;
  border-radius: 50%;
}

↓

이렇게 뚝딱거리면서 바뀌는 거보다는
.circle {
   width: 300px;
   height: 300px;
   transition: 1s;		/* 1초동안 smooth하게 바뀌어라. */
}
부드럽게~ 마치 PPT에서 애니메이션을 적용한 듯이 이렇게 되면 더 보기 좋을 테니까!

 

바로 요런 것이 transition이다.

(cf, 이런 트랜지션은 Javascript에서도 많이 쓰인다고 한다.)

 

 

위에서 제시된 예시는 transition의 정말 기본 중의 기본이고,

 

transition을 하는 데 지정할 수 있는 것들은 다음 4가지가 있다.

- 트랜지션 하려는 속성명(property name)

위의 예제에

transition: background-color 1s;

로 바꾸어 써넣게 되면, 테두리는 마우스를 올린 즉시! 변해버리고,

배경색에 대해서만 1초간 천천히 바뀌게 된다.

 

만약에 모든 스타일을 1초간 천천히 바뀌게 하고 싶다면

transition: all 1s;

로 쓰면 될 것이다ㅎㅎ

 

 

- 지속 시간(duration)

만약에 background-color는  1초 동안 바뀌게 하고 border-radius는 2초 동안 바뀌게 하고 싶다면?

transition: background-color 1s, border-radius 2s;

라고 쓰면 된다.

 

 

- 진행 방식(timing function)

이건 느렸다 빠르게, 빨랐다 느리게, 일정한 속도로, 느렸다 빨라졌다 다시 느려지게 등

트랜지션이 이루어지는 시간동안 속도 변화를 달리하고 싶을 때 사용한다.

예시는 아래쪽에 있다.

 

- 지연 시간(delay)

위와 같은 예제를 3초 후에 시작하고 싶다면,

transition: 1s 3s;

로 쓸 수 있다.

시간 단위가 2개 쓰이게 되면, 알아서 첫 번째 것은 지속시간(duration), 두 번째 것은 지연시간(delay)으로 인식한다.

 

 

이런 식으로도 transition을 활용할 수 있다.

<!DOCTYPE html>
   <html lang="en">
      <head>
         <meta charset="UTF-8">
         <title>Transition</title>
         <style>
            .goright {
               width: 100px;
               height: 100px;
               background-color: paleturquoise;
               margin: 20px 0;
               transition: 3s;
            }
            section:hover div {
               margin-left: 500px;
            }
         </style>
      </head>
      <body>
         <section>
            <div class="goright"></div>
            <div class="goright"></div>
            <div class="goright"></div>
            <div class="goright"></div>
         </section>
      </body>
   </html>

↓

 

 

여기에 timing-function을 다음과 같이 주게 되면,

            div:nth-of-type(1) {
               transition-timing-function: ease-in;
            }
            div:nth-of-type(2) {
               transition-timing-function: ease-out;
            }
            div:nth-of-type(3) {
               transition-timing-function: cubic-bezier(0.7, 0, 0.84, 0);
            }
            div:nth-of-type(4) {
               transition-timing-function: cubic-bezier(0.85, 0, 0.15, 1);
            }

↓

 

timing-function 기능을 다르게 했다고 4개가 모두 다른 효과를 내버린다..ㅋㅋㅋ

 

위 예시에서 사용된 cubic-bezier 함수는 일종의 속도곡선이라고 생각하면 되는데,

이를 참고하기 위한 멋진 사이트를 강사님이 소개해줘서 링크를 남겨놓으려고 한다.

https://easings.net/

 

Easing Functions Cheat Sheet

Easing functions specify the speed of animation to make the movement more natural. Real objects don’t just move at a constant speed, and do not start and stop in an instant. This page helps you choose the right easing function.

easings.net

위 사이트에 들어가서 보이는 그래프(?) 모양으로 요소가 이동한다는 것이 아니라,

transition을 지정한 효과가 지정한 지속시간(duration) 동안 움직이는 속도가 그래프처럼 달라진다는 것이다.

원하는 그래프(?) 위에 마우스 커서를 올리면 둥그런 공이 그래프 오른편에 나타나 위로 올라가는데,

transition이 시행되는 속도가 이렇게 달라집니다. 를 보여준다고 했다.

 

더해서, 각 그래프를 눌러서 들어가보면 화면 오른쪽에 사진이 나오는데,

이 사진들을 선택한 바로 그 cubic-bezier 함수에 있는 그 속도로

size를, 위치를, 투명도를 조절해볼 수 있다.

 

CSS의 세계는 배우면 배울수록 무궁무진하구나😵‍💫

CSS를 사용하는 데에는 미적 감각이 필요하다는 이유를 새삼 또 알 것 같다..ㅎㅎ....

 

 

 

 

 

04. CSS 변형이 가진 능력

transform이라고 불리는 속성으로, 요소를 회전시킬 수도, 이동시킬 수도, 비틀어버릴 수도 있다.

<!DOCTYPE html>
   <html lang="en">
      <head>
         <meta charset="UTF-8">
         <title>Document</title>
      </head>
      <body>
         <section>
            <!-- 실제 코딩할 때는 h1을 이렇게 사용하지 말 것!(정말 예제를 위한 예제일 뿐!) -->
            <!-- 문서에 딱 1개의 h1만 있어야 함! -->
            <h1>Transform me!</h1>
            <h1>Transform me!</h1>
            <h1>Transform me!</h1>
            <h1>Transform me!</h1>
         </section>
         <section>
            <h1>Transform me!</h1>
            <h1>Transform me!</h1>
            <h1>Transform me!</h1>
            <h1>Transform me!</h1>
         </section>
      </body>
   </html>
h1 {
  background-color: #2a9d8f;
  border: 5px solid #264653;
  color: #eae2b7;
  padding: 0.7em;
  width: 300px;
  font-size: 1.8em;
  text-align: center;
  margin: 20px auto;
  font-family: D2Coding;
  font-weight: lighter;
}

h1:nth-of-type(2n) {
  background-color: #e9c46a;
}

h1:nth-of-type(3n) {
  background-color: #f4a261;
}

h1:nth-of-type(4n) {
  background-color: #e76f51;
}

↓

위의 예시를 가지고 transform을 해 볼 예정이다.

 

 

 

rotate()

웹 요소를 회전시키는 기능.

/* 사용 예시 */

transform: rotate(45deg);
/*우리가 알고 있는 각도. 한 바퀴 360도.*/

transform: rotate(3.1416rad);
/* 래디언?라디언? 호의 길이가 반지름과 일치할 때의 각도 = 1 radian */

transform: rotate(-1.75turn);
/* Do it! 책에선 다루지 않았던 건데 '1turn = 1회전'으로도 쓸 수 있다. */

/* 이러나 저러나 제일 많이 쓰는 단위는 deg이다. */

 

위의 예시를 이용해 실제로 45도 rotate를 해 본다면,

section:first-of-type h1:nth-of-type(1) {
  transform: rotate(45deg);
}

위 코드를 앞선 예시의 CSS 파일 아래에 붙여넣고

실행했을 때

하나가 45도 회전한 것을 확인할 수 있다.

 

180도 rotate를 해본다면?

section:first-of-type h1:nth-of-type(1) {
  transform: rotate(180deg);
}

자세히 보면 맨 위의 h1 글씨가 거꾸로 뒤집어져 있다.

이 예시들은 (저 상자만한 크기를 가진) h1의 중앙에 핀을 꽂고 각도만큼 회전시킨 셈이 된다.

 

그 핀을 다른 곳으로 지정해서 회전할 수는 없는 걸까?

 

 

 

transform-origin

이 속성을 설정하면 그 지점을 핀으로 해서 회전시킬 수 있다.

transform: rotate(45deg);
transform-origin: center;

transform: rotate(45deg);
transform-origin: top left;

 

transform: rotate(45deg);
transform-origin: top right;

 

transform: rotate(45deg);
transform-origin: bottom right;

 

transform: rotate(45deg);
transform-origin: bottom left;

 

transform: rotate(45deg);
transform-origin: 50px 30px;

 

나중에라도 참고할 생각으로 transform-origin: center;로 만든 그림에 대한 코드를 아래에 적었다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="one"></div>
  <div class="two"></div>
  <div class="pin"></div>
  <div class="pin2"></div>
  <div class="horizontal"></div>
  <div class="vertical"></div>
</body>
</html>
.one {
   width: 200px;
   height: 300px;
   border: 1px solid black;
   position: absolute;
   top: 50%;
   left: 50%;
   margin: -150px 0 0 -100px;
   transform: rotate(45deg);
   transform-origin: center;
}
.two {
   width: 200px;
   height: 300px;
   border: 0.5px dashed red;
   position: absolute;
   top: 50%;
   left: 50%;
   margin: -150px 0 0 -100px;
}
.pin {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background-color: red;
   position: absolute;
   top: 50%;
   left: 50%;
   margin: -5px 0 0 -5px;
}
.pin2 {
   width: 20px;
   height: 20px;
   border-radius: 50%;
   border: 0.5px solid red;
   position: absolute;
   top: 50%;
   left: 50%;
   margin: -11px 0 0 -11px;
}
.horizontal {
   width: 40px;
   height: 0.5px;
   background-color: red;
   position: absolute;
   top: 50%;
   left: 50%;
   margin: 0 0 0 -20px;
}
.vertical {
   width: 0.5px;
   height: 40px;
   background-color: red;
   position: absolute;
   top: 50%;
   left: 50%;
   margin: -20px 0 0 0px;
}

 

 

 

scale()

요소의 크기를 조절하는 데 쓰이는 속성.

요소가 기존 크기에서 수축하거나 팽창하게 만들 수 있다.

 

크기를 조절하는 데에는 x축으로만 조절할 수도 있고, y축으로만 할 수도 있으며,

x축 y축 동시에 조절할 수도 있다. 물론, 3d로도 가능하다. 

 

앞에서 rotate 부분을 다룰 때 썼던 예제에서

CSS 파일에 아래 내용을 추가했더니,

section:first-of-type h1:nth-of-type(2) {
   transform: scale(0.5);
}
section:first-of-type h1:nth-of-type(4) {
   transform: scale(2);
}

가로와 세로 방향 모두 0.5배, 2배 크기가 되었다.

 

section:first-of-type h1:nth-of-type(3) {
   transform: scale(2, 1);
}

위와 같은 코드로 바꾼다면,

지정한 상자의 가로 길이는 2배로 늘었는데(2), 세로 길이는 그대로(1)이다.

 

이것을 다른 방식으로 쓸 수도 있다.

section:first-of-type h1:nth-of-type(3) {
   transform: scaleX(2) scaleY(1)
}

똑같은 표현이다.

 

 

 

 

 

translate()

요소를 원래 위치에서 이동할 때 사용하는 기능.

요소를 수평으로 움직이고 싶으면 translateX를 이용하고,

수직방향으로 움직이고 싶으면 translateY를 쓸 수 있다.

section:last-of-type h1:first-of-type {
   transform: translateX(200px);
}

괄호 안의 값을 양수 대신 음수 값을 넣으면 반대방향으로 이동한다. (위 그림에선 왼쪽)

 

section:last-of-type h1:first-of-type {
   transform: translateY(50px);
}

원래 위치보다 아래로 살짝 이동한 걸 확인할 수 있다.

translateY(음수값)은 위로 이동이라는 뜻!

 

괄호 안에는 px 값만이 아니라 다른 여러 절대 단위도 쓸 수 있고, % 단위도 쓸 수 있다.

 

 

 

skew()

요소를 비트는 데 사용되는 기능.

괄호 안에는 deg, rad, turn 등이 들어가며,

다른 transform들과 유사하게 X, Y, 3d 등 모두 가능하다.

 

section:last-of-type h1:nth-of-type(2) {
   transform: skewX(30deg);
}

 

section:last-of-type h1:nth-of-type(3) {
   transform: skewY(30deg);
}

의도한 건 아닌데, 뒤집힌 Z모양이 되어버렸닼ㅋㅋ...

 

수평 방향, 수직 방향을 모두 지정할 수도 있다.

section:last-of-type h1:last-of-type {
   transform: skew(10deg, 5deg);		/* 수평 방향, 수직 방향 순 */
}

 

 

 

 

 

여러가지 섞어 쓰기 - space bar 사용

여러가지 transform을 함께 지정하고 싶다면, 각각을 공백으로 구분하면 된다.

(이건 Do it!에서 못 봤던 내용 같다..)

section:first-of-type h1:last-of-type {
   transform: rotate(20deg) scale(1.3) translate(-40px);
}

계속 h1에 대한 변형만을 예시로 사용했는데,

전체 section에 대해서도 transform을 한꺼번에 지정할 수도 있고,

h1 상자 안에 버튼을 만들어도 버튼도 transform이 적용된다.

 

 

 

05. 멋진 버튼 호버(Hover) 효과 주기

<!DOCTYPE html>
   <html lang="en">
      <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&display=swap">
         <title>Hover Me!</title>
      </head>
      <body>
         <button>Hover Me</button>
      </body>
   </html>

이렇게 밋밋한 버튼을 지금까지 배운 내용을 가지고 꾸며볼 예정이다.

 

body {
   font-family: 'Roboto', sans-serif;
   display: flex;			/* 아직 안 배운 내용임. 일단 지금은 pass. */
   align-items: center;			/* 아직 안 배운 내용임. 일단 지금은 pass. */
   justify-content: center;		/* 아직 안 배운 내용임. 일단 지금은 pass. */
   height: 100vh;
   background-color: #151b29;
}

 

더해서, 버튼을 꾸미면

button {
   background: none;
   color: #ffa260;
   border: 2px solid;
   padding: 1em 2em;			/* top과 bottom은 1em, right과 left는 2em */
   font-size: 1em;
}

 

마우스 커서를 올렸을 때 바뀌는 스타일을 지정하면,

button:hover {
  border-color: #f1ff5c;
  color: white;
  box-shadow: 0 0.5em 0.5em -0.4em #f1ff5c;	/* 영어로 된 속성값 표현 방식: offset-x | offset-y | blur-radius | spread-radius | color */
}

커서 올리고 스크린샷.

 

바뀐 스타일에

+ 요소 살짝 위로 이동

+ 부드러운 효과를 아래와 같이 추가해서 넣으면

button {
   background: none;
   color: #ffa260;
   border: 2px solid;
   padding: 1em 2em;
   font-size: 1em;
   transition: all 0.5s;		/* 위에 작성한 코드에 요거 한 줄 추가함. */
}

button:hover {
  border-color: #f1ff5c;
  color: white;
  box-shadow:0 0.5em 0.5em -0.4em #f1ff5c;
  transform: translateY(-0.25em);		/* 위에 작성한 코드에 요거 한 줄 추가함. */
}

오오오오오오 이쁘다!! 싶었던 것도 잠시..

미적감각..... 나는 프론트엔드쪽은 아닌 거 같다는 생각이 또 든다..🤣

저작자표시 비영리 변경금지

'프밍 > CSS' 카테고리의 다른 글

게임으로 flex box 익히기 - Flexbox Froggy  (0) 2023.01.24
DAY 33. 플렉스 박스 레이아웃(Flex Box Layout)  (2) 2023.01.24
DAY 32. 그리드 레이아웃(Grid Layout)  (0) 2023.01.19
Section 9. 유용한 CSS 속성들(1)  (0) 2023.01.18
DAY 31. 미디어 쿼리(media queries)  (0) 2023.01.16
'프밍/CSS' Related Articles more
Comments