Erzsamatory Weblog


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

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


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


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

특히 블로그를 운영하는 우리와 같은 사람에게CSS 그라디언트 효과는 감히 넘볼 수 없는 CSS 고수의 영역이었습니다. 이제는 이 글에서 소개하는 사이트를 이용하여 CSS 그라디언트 효과를 직접 만들어보십시오!


사용자 정의 디자인 만들기


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

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


색상 포인트 추가하기


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

그라디언트 색상 포인트를 추가하려면 색상표 아래쪽을 클릭합니다.

그라디언트 색상 포인트를 추가하려면 색상표 아래쪽을 클릭합니다.



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


색상 포인트 삭제하는 방법


그라디언트 색상 포인트를 수정 및 삭제하는 방법

그라디언트 색상 포인트를 수정 및 삭제하는 방법



색상 포인트를 추가했는데 잘못 추가했을 경우 또는 미리 정해진 디자인에서 본인만의 그라디언트를 새롭게 만드는 경우, 기존의 색상 포인트를 삭제해야 하는 상황이 발생하기 마련입니다. 이 때에는 삭제하고자 하는 색상 포인트의 네모를 클릭한 후 아래쪽의 옵션 상자에서 Delete 버튼을 누르면 됩니다. 이 버튼을 누르는 순간 바로 삭제됩니다. 삭제 확인 메시지 창이 뜨는 것이 아니기 때문에, 삭제할 때에는 반드시 먼저 신중하게 생각을 하시기 바랍니다.


투명도 포인트 활용하는 방법


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

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

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



투명도 포인트를 추가하는 것은 색상 포인트를 추가하는 방법과 동일합니다. 하지만 이번에는 투명도 네모가 위치한 쪽인 위쪽 라인에 있는 공간을 사용해야 합니다. 위쪽 라인에서 빈 칸에 마우스 커서를 가져가면 플러스(+)가 나타나며, 클릭하면 그 자리에 투명도 포인트가 생성됩니다. 투명도 포인트를 수정하거나 삭제하는 방법 역시 색상 포인트와 동일합니다. 수정하고 싶은 투명도 포인트를 클릭하면 하단에 선택한 투명도 포인트의 속성이 나타납니다. 이곳에서 본인이 원하는 투명도를 지정할 수 있습니다. 삭제하고 싶다면 색상 포인트를 삭제했던 것과 같이 Delete 버튼을 누릅니다.


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


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

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

블로그에 적용시키기


이 사이트에서 그라디언트 CSS 소스코드를 얻었다면 블로그에 그라디언트 효과를 적용시키는 것은 그렇게 어렵지 않습니다. CSS에 관한 매우 기초적인 지식만 있으면 가능합니다. 꼭 알아야 하는 CSS 기본 지식은 CSS 선택자에 관한 지식입니다. CSS 선택자에 관해서는 다음 글을 참고하시기 바랍니다. [2014/07/04 CSS 선택자에 관한 매우 기초적인 지식 / CSS Selector]

블로그에 적용시키기 위한 소스코드는 그라디언트 소스코드 자동 생성기 우측에 있습니다. 우측 텍스트상자를 보면 매우 복잡하서 도저히 해석할 수 없는 CSS 소스코드가 있는 것을 확인할 수 있습니다. 이 소스코드를 모두 복사한 후, 본인의 블로그 스킨 HTML에 추가만 하면 됩니다. 컨트롤 + A 를 눌러 모두 선택한 후 복사합니다. 그리고 난 후, 블로그 스킨에 <style> 태그를 사용하여 다음과 같이 그라디언트 스타일 클래스를 정의합니다. 아래 소스코드는 적용 예시이며, 본인의 블로그 스킨에 따라 그 위치가 달라질 수 있지만, 일반적으로는 <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 그라디언트 소스코드 생성기로 만들어진 CSS는 인터넷익스플로러 ~ 크롬 까지 모든 웹브라우저를 지원합니다. 하지만 인터넷익스플로러 구버전에서는 단 두 개의 색상 / 투명도 포인트만 지원합니다. 따라서 자신의 블로그가 모든 웹브라우저에 대해서 완벽하게 호환되기를 원한다면 단 두 개의 포인트만 사용할 것을 권장합니다.

CSS 그라디언트 생성기: http://www.colorzilla.com/gradient-editor/
http://www.erzsamatory.net/trackback/44

건전한 댓글 문화를 만들어주시기 바랍니다 ^^
불건전한 댓글이 등록되는 경우 관리자의 임의적 판단으로 삭제될 수 있음을 미리 공지드립니다.

비밀글로 작성하기
  1. 2014/02/10 19:35
    오 이런것이 있엇군요! 유용하게 쓸 수 있겠어요 ㅎㅎ
    • Walter E.
      Walter E.
      2014/05/06 09:57
      이 블로그 스킨 만들 때 정말 유용하게 썼습니다.

      댓글 감사합니다. ^^