[CSS] 그라디언트 소스코드 자동 생성 사이트 소개

CSS는 HTML로 만들어진 웹페이지를 멋있게 꾸며주는 매우 중요한 역할을 담당하고 있습니다. 하지만 CSS는 그 사용법이 조금 복잡하여 초보자는 쉽게 사용할 수 없습니다. 이러한 불편함을 해소하고 보다 많은 사람들이 CSS를 이용할 수 있도록 배려하기 위하여 인터넷에는 CSS 소스코드를 자동으로 만들어주는 사이트가 많이 있습니다. 특히 CSS를 이용하여 그라이디언트 효과를 적용하려면 최고 난이도의 작업이 필요하지만 이렇게 어려운 작업을 쉽게 해결해주는 사이트가 있어 이 글에서 소개하고자 합니다.

CSS 그라디언트 자동 생성기
http://www.colorzilla.com/gradient-editor/

CSS를 이용한 그라디언트 생성

CSS를 이용한 그라디언트 생성은 오래 전부터 가능했었습니다. 그런데 그 방법이 매우 복잡하고 어려워서 CSS 그라디언트 효과를 제대로 사용하는 웹사이트는 흔하지 않습니다. 보통 이미지를 활용한 그라디언트가 주로 사용됩니다. CSS를 이용하여 그라디언트 효과를 만들기 위해서는 색상을 설정하고 그 위치를 잡아주고 웹브라우저별 처리를 동시에 해야 하는데 사람이 이것을 직접 설정하는 것이 쉽지만은 않습니다. 그러나 CSS 그라디언트 소스코드를 자동으로 만들어주는 사이트를 이용하면 쉽게 그라디언트 효과를 만들 수 있습니다.

사용자 정의 디자인 만들기

이 사이트에는 이미 정의된 다양한 그라디언트 효과들이 있습니다. 만약 여기에 본인이 원하는 스타일이 있다면 그것을 선택한 후 추출된 소스코드를 붙여넣으면 되지만 사실 미리 만들어진 효과 중에 본인의 생각에 딱 맞는 효과를 찾는 것은 쉽지 않습니다.

따라서 본인이 직접 그라디언트 효과를 디자인해야 하는데, 그 방법은 포토샵과 같은 이미지 편집 프로그램을 사용하는 것처럼 매우 쉽습니다. 이 글을 천천히 따라하면 본인만의 그라디언트 효과를 얻을 수 있을 것입니다. 이 글에서는 그라디언트 효과를 디자인하는데 필요한 몇 가지 기능을 설명하겠습니다.

색상 포인트 추가하기

그라디언트는 여러 개의 색상이 한 구역에 나타나는 효과입니다. 수많은 색상들이 표시되지만 실제로 사용자가 지정하는 색상은 색상 포인트에 있는 몇 가지 뿐입니다. 나머지 구역에 있는 색상은 모두 웹브라우저에서 알아서 처리를 해줍니다. 이 색상 포인트를 변경하면 웹브라우저에서는 그에 맞는 색상을 알아서 출력해줍니다. 그라디언트 자동생성 사이트에서 사용자는 이 색상 포인트을 마음대로 추가하고 삭제할 수 있습니다.

위 스크린샷에서 볼 수 있듯이 그라디언트 색상바 하단에 마우스 커서를 가져가면 플러스(+)가 표시되는 것을 알 수 있습니다. 이 상태에서 왼쪽 클릭하면 색상 포인트가 추가됩니다. 색상 포인트는 무제한으로 추가할 수 있습니다. 그러나 너무 많은 색상은 방문자의 눈을 어지럽게 하므로 최대 3개의 색상포인트를 권장합니다. 또한 구형 인터넷 익스플로러에서는 최대 2개의 색상 포인트만을 지원하므로 크로스 브라우징을 생각한다면 색상 포인트가 2개를 넘어가지 않는 것이 좋습니다.

색상 포인트 삭제하기

색상 포인트를 추가했는데 잘못 추가했을 경우 또는 미리 정해진 디자인에서 본인만의 그라디언트를 새롭게 만드는 경우에는 기존의 색상 포인트를 삭제할 수 있습니다. 삭제하고자 하는 색상 포인트의 네모를 클릭한 후 하단의 옵션 상자에서 Delete 버튼을 누르면 됩니다. 이 버튼을 누르는 순간 색상 포인트가 곧바로 삭제됩니다.

※ 삭제 버튼을 클릭하면 경고 창 없이 곧바로 색상 포인트가 삭제되므로 충분하게 생각한 후 삭제 버튼을 클릭하시기 바랍니다.

투명도 포인트 활용하기

이 사이트에서는 그라디언트 효과에 투명도를 추가할 수도 있습니다. 그라디언트 효과에 투명도가 필요한 이유는 그라디언트 효과를 배경으로 사용하는 경우 또는 전체 화면을 덮는 그라디언트 효과가 필요한 경우 투명도를 설정하여 안쪽의 텍스트가 제대로 출력될 수 있게 해야하는 이유 때문입니다.

투명도 포인트를 사용하면 그라디언트 색상의 투명도를 조절할 수 있습니다.

투명도 포인트를 추가하는 것은 색상 포인트를 추가하는 방법과 동일합니다. 하지만 이번에는 투명도 네모가 위치한 상단 라인에 있는 공간을 사용해야 합니다. 상단 라인에서 빈 칸에 마우스 커서를 가져가면 플러스(+)가 나타나며 클릭하면 그 자리에 투명도 포인트가 생성됩니다.

투명도 포인트를 수정하거나 삭제하는 방법 역시 색상 포인트와 동일합니다. 수정하고 싶은 투명도 포인트를 클릭하면 하단에 선택한 투명도 포인트의 속성이 나타납니다. 이곳에서 본인이 원하는 투명도를 지정할 수 있습니다. 삭제하고 싶다면 색상 포인트를 삭제했던 것과 같이 delete 버튼을 누릅니다.

색상 / 투명도 포인트 이동시키기

색상 포인트와 투명도 포인트는 사용자가 임의대로 이동시킬 수 있습니다. 위치를 이동시키고 싶은 네모를 누른 채 좌·우로 마우스를 드래그하면 선택한 색상 포인트 또는 투명도 포인트의 위치가 이동됩니다. 색상 또는 투명도 포인트를 이동시키면 자동으로 그라디언트 색상이 변경되어 화면에서 어떻게 그라디언트 효과가 출력되는지 곧바로 확인할 수 있습니다.

이 사이트를 이용하면서 가장 놀라웠던 사실은 GUI 방식의 인터페이스가 완벽하게 구현되어 있다는 점이었습니다. 포토샵과 같은 프로그램을 사용하는 것과 같은 느낌을 받을 정도로 이 사이트의 인터페이스는 쉽고 간단해서 초보자도 이용할 수 있기 때문에 필자는 이 사이트는 매우 잘 만들어졌다고 생각합니다.

블로그에 적용시키기

이 사이트에서 그라디언트 CSS 소스코드를 생성했다면 블로그에 그라디언트 효과를 적용시키는 일만 남았습니다. CSS를 다루는 가장 기본적인 지식만 가지고 있으면 됩니다. 여기에서 반드시 알아야 하는 것은 CSS 선택자에 관한 기본 지식입니다. 이와 관련된 내용은 다음 글에서 자세하게 설명하고 있으니 참고바랍니다. → 2017/08/18 [CSS] 기본 선택자 정리 (CSS Selector) by Walter Erzsamatory

그라디언트 소스코드는 GUI 인터페이스 우측에 위치합니다. 이곳의 소스코드를 모두 복사한 후 본인의 블로그 스킨 HTML에 붙여넣기하면 됩니다. 아래 소스코드는 적용 예시입니다. 본인의 블로그 스킨에 따라 그 위치가 달라질 수 있지만 일반적으로는 <head> 태그와 </head> 태그 사이에 <style> 태그를 추가한 후 그라디언트 소스코드를 붙여넣으면 됩니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8"/>
    <style>
        .gradient {
            background: #ffffff; /* Old browsers */
            background: -moz-linear-gradient(top,  #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f1f1f1), color-stop(51%,#e1e1e1), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* IE10+ */
            background: linear-gradient(to bottom,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
        }
    </style>
</head>
<body>
    <div class="gradient" style="height:50px; width:500px; text-align:center; font-size:0.8em; border:1px solid #ccc;">
        이 박스 배경에 그라디언트 효과가 적용됩니다.
    </div>
</body>
</html>

※ CSS 그라디언트 소스코드 자동 생성기로 만들어진 소스코드는 인터넷익스플로러에서부터 크롬까지 모든 웹브라우저를 지원합니다. 그러나 인터넷익스플로러 구버전에서는 단 2개의 색상 및 투명도 포인트만 지원합니다. 따라서 본인의 블로그가 모든 웹브라우저에서 호환되기를 원한다면 단 두 개의 포인트만 사용하는 것이 좋습니다.

타이틀 이미지: Cyril Doussin, Nerdy books, Flickr. CC BY-SA 2.0.