HTMLCSS - transform 1

HTML에서 지정해주는 값만큼 이동하는 translate와 기울기를 주는 skew에 대해서 알아보겠습니다.

이 기능은 블록을 좌우상하(x축, y축)로 이동시킬 때 사용합니다.

사용 방법은 다음과 같습니다.

transform:translateX(이동거리) : 좌우 방향(x축 방향)으로 이동거리만큼 블록이 이동

transform:translateY(이동거리) : 상하 방향(y축 방향)으로 이동거리만큼 블록이 이동

transform:translate(x축 이동거리, y축 이동거리)

: 좌우상하 방향(x축 방향, y축방향)으로 이동거리만큼 블록이 이동

예제)

[그림 1] HTML에서는 화면에 블록 3개를 출력하는 내용을 작성했습니다.

그리고, [그림 2] CSS 파일에서 블록의 디자인을 정하고 나서 각 블록별로 translate 기능을 이용하여 3개 블록들을 이동시켰습니다.

div:nth-child(1) p { transform: translateX(100px);} : 첫 번째 블록을 우측 방향으로 100px만큼 이동시키라는 명령입니다.

div:nth-child(2) p { transform: translateY(100px);} : 두 번째 블록을 아래 방향으로 100px만큼 이동시키라는 명령입니다.

div:nth-child(3) p { transform: translate(100px, 100px);}

: 세 번째 블록을 우측 아래 방향으로 100px만큼 이동시키라는 명령입니다.

HTML을 실행시키면 [그림 3]과 같은 화면이 출력됩니다.

이 기능은 블록을 기울여서 나타내고자 할 때 사용합니다.

사용방법은 다음과 같습니다.

transform: skewX(각도) : x축으로 각도만큼 기울입니다.

transform: skewY(각도) : y축으로 각도만큼 기울입니다.

transform: skew(x축 각도, y축 각도) : x축, y축으로 각도만큼 기울입니다.

예제)

HTML은 translate 기능 때와 마찬가지로 3개의 블록을 화면에 출력합니다.

CSS은 블록의 디자인을 정한 후 skew 기능을 사용하여 블록을 기울여 출력하도록 명령합니다.

div:nth-child(1) p { transform: skewX(30deg);} : x축 방향으로 블록을 30도 기울여 출력합니다.

div:nth-child(2) p { transform: skewY(30deg);} : y축 방향으로 블록을 30도 기울여 출력합니다.

div:nth-child(3) p { transform: skew(30deg, 30deg);} : x축, y축 방향으로 블록을 30도 기울여 출력합니다.

HTML 파일을 실행하면,

[그림 6]과 같은 결과가 화면에 출력됨을 알 수 있습니다.

참고) 지금 그림에서 보이는 에디터는 VISUAL STUDIO CODE입니다. 에디터에 대해서는 따로 글을 올리도록 하겠습니다.

아무개의 취미생활