트랜스폼

Coddy HTML 여정의 CSS Mastery 섹션에 포함된 레슨 — 43개 중 23번째.

CSS transform은 크기 조절(scaling), 회전(rotating), 이동(translating) 또는 기울이기(skewing)를 통해 요소의 모양을 변경할 수 있게 해줍니다. 이러한 변경 사항은 transition과 결합되지 않는 한 즉시 적용됩니다.

scale() – 요소의 크기를 조절합니다 (더 크게 또는 더 작게 만듭니다).
rotate() – 요소를 지정된 각도만큼 회전시킵니다.

translate() – 요소를 왼쪽/오른쪽 또는 위/아래로 이동시킵니다.
skew() – 요소를 X축 또는 Y축을 따라 기울입니다.

예시:

/* 이미지를 20% 더 크게 만듭니다 */
img {
  transform: scale(1.2); 
}

/* 박스를 시계 방향으로 45도 회전시킵니다 */
.box {
  transform: rotate(45deg); 
}

/* 요소를 오른쪽으로 50px, 아래로 100px 이동시킵니다 */
div {
  transform: translate(50px, 100px); 
}

/* 요소를 X축으로 20도, Y축으로 10도 기울입니다 */
div {
  transform: skew(20deg, 10deg); 
}

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.

챌린지

쉬움

4개의 이미지와 각 이미지에 클래스(img1, img2 등)가 지정된 갤러리가 주어집니다. 마우스를 올렸을 때(on hover) 다음의 변형(transformations)을 적용하세요:

이미지 1 (.img1): scale()을 사용하여 마우스를 올렸을 때 이미지를 1.2배 더 크게 만듭니다.
이미지 2 (.img2): rotate()를 사용하여 마우스를 올렸을 때 이미지를 45도 회전시킵니다.
이미지 3 (.img3): translate()를 사용하여 마우스를 올렸을 때 이미지를 오른쪽으로 -5px, 아래로 -3px 이동시킵니다.
이미지 4 (.img4): skew()를 사용하여 마우스를 올렸을 때 이미지를 X축으로 20도, Y축으로 10도 기울입니다.

치트 시트

CSS transform을 사용하면 요소를 확대/축소(scaling), 회전(rotating), 이동(translating) 또는 기울이기(skewing)를 통해 모양을 변경할 수 있습니다.

scale() – 요소의 크기를 조정합니다 (더 크게 또는 더 작게 만듭니다)
rotate() – 요소를 지정된 각도만큼 회전시킵니다
translate() – 요소를 좌우 또는 상하로 이동시킵니다
skew() – 요소를 X축 또는 Y축을 따라 기울입니다

/* 이미지를 20% 더 크게 만듭니다 */
img {
  transform: scale(1.2); 
}

/* 박스를 시계 방향으로 45도 회전시킵니다 */
.box {
  transform: rotate(45deg); 
}

/* 요소를 오른쪽으로 50px, 아래로 100px 이동시킵니다 */
div {
  transform: translate(50px, 100px); 
}

/* 요소를 X축으로 20도, Y축으로 10도 기울입니다 */
div {
  transform: skew(20deg, 10deg); 
}

직접 해보기

<!DOCTYPE html>
<html>
<head>
    <style>
    .gallery {
        display: flex;
        flex-wrap: wrap; /* Allows the images to wrap into two rows */
        gap: 20px; /* Space between the images */
        justify-content: center; /* Centers the images */
        margin-top: 20px;
    }
    .gallery img {
        width: 200px;
        height: 260px;
    }
    
    /* Write your CSS rule here */
    
    </style>
</head>
<body>
    <h1>CSS Filters Gallery Challenge</h1>

    <div class="gallery">
        <div class="img1">
            <img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/German_shepherd_dog_colt.jpg" alt="Blurred Image">
        </div>
        <div class="img2">
            <img src="https://upload.wikimedia.org/wikipedia/commons/8/86/Dog%2C_Helgafell%2C_Sn%C3%A6fellsnes_peninsula%2C_Iceland%2C_20230505_1507_5224.jpg" alt="Brightened Image">
        </div>
        <div class="img3">
            <img src="https://upload.wikimedia.org/wikipedia/commons/0/05/Pyreneean_Mountain_dog_guarding_sheep.jpg" alt="Grayscale Image">
        </div>
        <div class="img4">
            <img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Fawn_and_white_Welsh_Corgi_puppy_standing_on_rear_legs_and_sticking_out_the_tongue.jpg" alt="Sepia Image">
        </div>
    </div>
</body>
</html>

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.