지난 글에 이어 CSS에 대해
알려드리도록 하겠습니다.
저번 글에서는
Transitions의
ease-in-function을
알려드렸는데요.
만약 기억이 잘 나지 않으시거나
혹시 모르시는 분들은
밑에 글을 참고해주세요.
기초코딩 - CSS의 기초 ( Transitions에 대해서 ) - 2편
지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 저번 글에서는 Transitions을 활용하여 서서히 배경이 변화하는 방법에 대해 알려드렸는데요. 만약 기억이 잘 나지 않으시거나 혹시 모르시는
tm-csc.tistory.com
이번 글에서는
Transformations을
알려드리겠습니다.
일단 Transformations은
말 그대로 한 요소를
변형시킬 수 있습니다.
그럼 예를 들어
설명드리기 위해
VSC를 실행해주세요.
<img src="img/1.JPG" />
img폴더에 있는
1.jpg라는 이미지를
불러와
img {
border: 5px solid #000;
}
img의 보더를
검은색 5px 실선으로
변경해줘
우선 이렇게 이미지를
하나 불러오고
해당 이미지의 보더를
검정 색선으로 변경하겠습니다.
그리고 크롬으로 확인하면
이렇게 실선이 둘러져있는
이미지를 확인할 수 있죠.
그다음 이렇게
border-radius: 30%;
transform: rotatey(70 deg);
보더를 30%만큼 둥글게 하고
Y축을 기준으로
70도만큼 돌리라고 명령하면
무언가 찌그러져 보이지만
사실은 Y축을 중심으로
돌았다는 것을 알 수 있습니다.
그래서 rotatey(90 deg);
90도로 돌게 한다면
아무것도 보이지 않게 되죠.
바로 이것이 transfomation
이라고 할 수 있죠.
CSS로 3D도 구현이 가능하며
형태를 변화시키는 것입니다.
또한 회전축을
Y과 아닌 X 및 Z도 할 수 있고
같이 사용할 수도 있죠.
또한 Scale이라는 걸로
그림을 확대할 수도 있죠.
transform: scale(2.2);
가로와 세로로 2배만큼
확대해
너무 커져서 브라우저 밖으로
나가버리기도 합니다.
또한 이렇게
transform: translateX(100px)
가로로 100px만큼 이동해
라고 명령할 수도 있습니다.
하지만 이건 다른 코드와
많이 다른데요.
옆에 만약 DIV 또는 SPAN이
존재한다고 하더라도
해당 박스를 전혀 밀지 않고
그대로 덮어버리면서
옆으로 이동합니다.
즉 자신 외에 다른 BOX들에
영향을 주지 않습니다.
그래서 원하는 요소를
마음대로 이동하고
스타일을 변형하면서도
다른 요소의 BOX의 위치가
변하지 않기에 유용하게
사용할 수 있습니다.
하지만 Tranformations이
이게 끝이라면 아마 저는
설명하지 않았을 겁니다.
그럼 다음 글에서도
이어서 Tranformations에
대해 알려드리도록 하고
여기까지 궁금하신 점은
댓글에 남겨주시고
공감과 구독도 부탁드립니다.
