박코딩

박코딩

공부기록 블로그

그래픽 관련 속성_2

1 minute read

트랜스폼

transform

요소의 크기, 위치, 모양 등을 변경하는 속성이다.

<!doctype html>
<html>
    <head>
        <style>
            h1{
                background-color: deepskyblue;
                color:white;
                display:inline-block;
                padding:5px;
                font-size:3rem;
                margin:100px;
/*
                transform:scaleX(0.5);
                transform:scaleY(0.5);
*/
                transform:scale(0.5, 0.5);
            }
        </style>
    </head>
    <body>
        <h1>Hello Transform!</h1>
    </body>
</html>

  • scale

    대상의 배율을 조절한다.

transform의 속성들

See the Pen Untitled by Bakcoding (@bakcoding) on CodePen.

각 트랜스폼의 효과들은 요소의 중심을 기준으로 동작한다.

origin을 사용하면 x, y축의 값을 지정해서 특정 위치를 중심으로 동작하도록 할 수 있다.

transform-origin

<!doctype html>
<html>
    <head>
        <style>
            h1{
                background-color: deepskyblue;
                color:white;
                display:inline-block;
                padding:5px;
                font-size:3rem;
                margin:100px;
/*
                transform:scaleX(0.5);
                transform:scaleY(0.5);
*/
                transition:all 1s;
            }
            h1:hover{
                transform:scale(1.5);
                transform-origin: 100% 100%;
                transition:all 1s;
            }
        </style>
    </head>
    <body>
        <h1>Hello Transform!</h1>
    </body>
</html>


트랜스폼 참고자료

트랜스폼 단위

트랜스폼을 다루기 위해서는 속성값의 단위를 알아야한다.

mdn transform


라이브러리

각 종 트랜스폼을 다루는 라이브러리 사이트

sccshake

magic animation


SVG

벡터 이미지를 표현하기 위한 포맷이다. css를 이용해서 다양한 효과를 줄 때 svg를 활용하기도 한다.

벡터 vs 비트맵

비트맵은 격자에 점 단위로 하나씩 위치가 저장된 것으로 이미지가 원본가 달라지면 깨지는 현상이 생긴다.

하지만 벡터는 그림을 형태 자체를 표현하기 때문에 이미지가 깨지는 현상이 생기지 않는다.

무료로 픽토그램 파일을 얻을 수 있는 사이트

thenounproject

<!doctype>
<html>
    <head>
        <style>
            img{
                width:50px;
            }
            .svg{
                height: 50px;
                background-image:url(vector_dog.svg);
            }
        </style>
    </head>
    <body>
        <h1>Bitmap(png)</h1>
        <img src="bitmap_dog.png" alt="">
        <h1>Vector(svg)</h1>
        <img src="vector_dog.svg" alt="">
        <h1>background svg</h1>
        <div class="svg"></div>
    </body>
</html>

bitmap_vector_comp

비트맵과 벡터 이미지의 차이를 확인할 수 있다. 일반 이미지와 마찬가지로 svg 파일도 백그라운드로 사용이 가능하다.


svg 그림그리기

svg 파일을 에디터로 열어보면 xml 코드로 작성되어있는걸 알 수 있다.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 640" enable-background="new 0 0 512 512" xml:space="preserve">
</svg>

이미지 파일에서 svg 태그부분만 가져온 다음 코드를 추가해준다.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 640" enable-background="new 0 0 512 512" xml:space="preserve">
    <rect x="0" y="0" width="400" height="400" style="stroke:red; fill:blue"></rect>
</svg>

이렇게 만든 svg 파일을 html 파일에서 불러보면 작성한대로 이미지가 화면에 표시된다.

따라서 코드를 작성할 줄 안다면 복잡한 이미지도 코드로 만들 수 있게된다.

<!doctype>
<html>
    <head>
        <style>
        </style>
    </head>
    <body>
        <h1>file</h1>
        <img src="svg_xml_code.svg" alt="" >
        <h1>htmls</h1>
        <svg width="410" height="410">
            <rect x="0" y="0" width="400" height="400" style="stroke:black; stroke-width:10px; fill:blue"></rect>
        </svg>
    </body>
</html>

svg 참고

svg tutorial

svg codepen

You may also enjoy