[개발일지 9일차] CSS transition, animation, transform, box-model, margin, border, display 속성들

MSJ·2022년 5월 15일

CSS html web 개발일지

WEB

목록 보기

9/41

2022-05-13

animation, transition, transform

animation⊃@keyframes⊃transition=transform⊃translate

우리가 보기엔 셋 다 움직이는 설정 같은데 대체 무슨 차이가 있느냐.

transition(전환) 은 변화된 객체의 사이를 우리가 따로 코딩을 하지 않아도 알아서 자연스럽게 처리해준다. 다들 :hover로 코드를 써보면서 한번씩은 실수를 해봤을 거다. 어떻던가? 지정 대상이 난데없이 새로운 객체처럼 뿅하고 나타나지 않던가? transition이 성공적으로 적용되면 시작과 끝 객체 사이를 부드럽게 연결시켜준다.
transform(변형) 은 말 그대로 대상의 형태를 변형시켜준다.

animation 은 이러한 움직임의 총집합체다. 애니메이션에는 keyframe이라는 것이 존재한다. 영상 작업을 하시는 분들에겐 익숙한 단어다.

5초짜리의 노란 박스가 변형되는 영상이 있다고 가정해보자. 우리는 이 노란 박스가 오른쪽 위로 이동하는 빨간색 큰 박스가 되었다가 중앙으로 오는 파란색 원으로 변한다고 설정했다. 아래는 그 과정이다.

최대한 재현해봤다...

이처럼 변환점을 가진 지점을 다 키프레임이라고 할 수 있다. 이동과 변형이 동시에 담길 수도 있고, 속도의 완급 조절만 줄 수도 있다. 우리가 아이돌 뮤비를 볼 때 빠르게 재생되었다가 느려지는 것들이 이러한 키프레임들을 다 적용시킨 것이다. (엄청난 노가다의 산물이다...)

첫 줄에 말했듯이 animation은 이러한 키프레임들의 집합체다.

옛날 애니메이션은 키프레임 사이사이의 장면들을 수작업으로 다 이어야했다. 1930~50년대 월트 디즈니의 신데렐라나 백설공주같은 작품들이 그렇다. 현대에 들어서는 키프레임 사이사이의 동작들을 영상 프로그램이 자동으로 처리해주기 때문에 이러한 수고로움이 줄었다. 물론 프로그램을 만들 때는 코딩으로 일일이 기능을 넣어야했을 것이고, 수고로움이 줄어도 영상은 여전히 노가다 작업임에는 틀림없지만... 아무튼!

중요한 점은 애니메이션(영상매체)은 연속적인 시간의 흐름에 따른 내용물의 변화이므로 시간 설정을 꼭 해주어야 한다.

transition(전환) 이어서

transition 속성 -property와 -duration은 굳이 따로 쓸 필요 없이 한번에도 적용할 수 있다.

마우스를 올리면 스케일을 2배 회전시켜서 키우는 박스 만들기

<style>
.box5 {width:100px;
                height:100px;
                background: #0094ff;
                margin:100px;}
        .box5 { transition: transform 2s ease-in;}
        .box5:hover{ transform: scale(2) 
            perspective(120px)  rotateX(180deg);}
</style>

transition 속도 곡선

linear : 시작부터 끝까지 같은 속도로
ease : 느리게 시작->점점 빨라짐-> 느리게 끝(기본값)
ease-in : 느리게 시작
ease-out : 느리게 끝
ease-in-out : 느리게 시작->느리게 끝
cubic-Bezier(n,n,n,n) : 베지에 함수를 직접 정의해서 사용(n:0~1)

변형할 형태, 컬러 등을 설정할 수 있다.

transform(변형)

기능 별 속성들
이동 : transform: translate() | translateY() | translate()
확대, 축소 : transform:scaleX() | scaleY() | scale()
기울임 : transform: skewX() | skewY() | skew()
회전 : transform: rotate(각도)
3차원 : perspective;(원근감) 지정 후에 transform:rotate3d()

8일차 개발일지 때 트랜스폼을 이용하면서 지원 브라우저 별로 호환 명령어를 명시해야 한다는 얘길 한 적이 있다.

그 방법은 preepix란 사이트에서 파일을 받은 후
https://projects.verou.me/prefixfree/

<script src="파일"></script>

코드 한줄을 써주면 완료. 자바스트립트 기능이지만 모든 브라우저를 지원하는 기능이니 우선 알아두자.

CSS 박스모델

웹 문서의 내용을 박스 형태로 정의하는 방법
이 박스 모델이 모여 웹 문서를 구성한다
블록 레벨 요소인지 인라인 레벨 요소인지에 따라 나열 방법이 달라진다

block level 요소와 inline level 요소에 대한 이해를 잘 해두자. >> 4일차 개발일지

박스 모델의 크기 결정 속성에는 width, height, margin, padding가 있다

width, height : 컨텐츠 영역의 크기를 결정
display : 화면 배치 방법을 결정
border : 테두리 지정 속성
margin : 요소와 요소 사이 여백 결정
padding : 콘텐츠와 테두리 사이의 여백 설정

레고처럼 다룬다는 말이 왜 그런 것인지 이제는 조금 이해가 된다.

박스 사이징을 할 때 쓰는 코드이다.

예시로 아래만큼 박스가 주어졌다고 생각해보자

<style>
.box{
	float:left;
    width: 300px; /* 콘텐츠 영역 너비 300px */
    height: 150px; /* 높이 */
    padding: 30px; /* 패딩 */
    border: 2px solid red;/* 테두리 */
    margin: 30px; /* 마진 */
    }
</style>