CSS3 백그라운드 그라데이션 (Gradient Background) 속성 요소
이번 시간에는 다양한 백그라운드 그라데이션 속성에 대해 알아보겠습니다. 백그라운드는 절대컬러값을 사용하거나 16진수를 사용하여 단색으로 표현하는것이 흔하지만, HTML과 CSS의 버전이 올라가면서 다양한 그라데이션 방법이 적용되고 있습니다.
하지만 아직은 브라우저마다 서로 엔진이 약간씩은 차이가 있어서 호환성을 위해서 밴딩 프리픽스를 사용해서 표현해야 하는 부분도 있습니다. 절대적으로 사용해야 하는건 아니지만, 그래도 사용자가 어떤 브라우저로 접속하는지를 모르기에 다양한 브라우저에서 오류 없이 표현되게 하기 위해서는 꼭 필요합니다. 이와 관련된 내용은 본문 아래에 있는 참고글을 활용하시기를 바랍니다.
<div id="bg">-webkit- linear</div>
<div id="bg2">-webkit- radial</div>
<div id="bg3">To Right</div>
<div id="bg4">To Bottom</div>
<div id="bg5">To Right + Top</div>
<div id="bg6">To Right + Bottom</div>
<div id="bg7">3 Color</div>
<div id="bg8">Radial</div>
<div id="bg9">Percents</div>
<div id="bg10">Pixel</div>
먼저 HTML 부분입니다. div를 총 10개를 만들었고 각 div에 다양한 그라데이션 효과를 넣었습니다. CSS3의 마크업 상태는 다음과 같습니다.
/*RESET*/
* {
margin: 0;
padding: 0;
}
/*BODY*/
body {
font: 17px 'Nanum Gothic', sans-serif;
}
div {
float: left;
width: 200px;
height: 200px;
margin: 20px;
font-size: 20px;
color: #fff;
text-align: center;
line-height: 200px;
}
#bg {
background: -webkit-gradient(linear,left top,right bottom,color-stop(0,red),color-stop(1,blue));
background: -moz-linear-gradient(left top,red,blue);
}
#bg2 {
background: -webkit-gradient(radial,center center,30,center center,90,from(red),to(blue));
}
#bg3 {
background: linear-gradient(to right,red,blue);
}
#bg4 {
background: linear-gradient(to bottom,red,blue);
}
#bg5 {
background: linear-gradient(to right top,red,blue);
}
#bg6 {
background: linear-gradient(to right bottom,red,blue);
}
#bg7 {
background: linear-gradient(to right,red,green,blue);
}
#bg8 {
background: radial-gradient(red,green,blue);
}
#bg9 {
background: linear-gradient(to right,red 10%,orange 20%,yellow 30%,green 40%,blue 50%,darkblue 60%,purple 70%,#00ebff 80%,#302841 90%);
}
#bg10 {
background: linear-gradient(to bottom,red 30px,orange 60px,yellow 90px,green 120px,blue 150px,darkblue 180px,purple 210px,#00ebff 240px,#302841 270px);
}
div의 크기는 200픽셀의 정사각형입니다. 백그라운드 그라데이션을 어떤식으로 마크업 했는지, 어떤 요소들이 들어가 있는지를 잘 살펴보시기 바랍니다. 밴더 프리픽스를 사용해야 하는 경우는 반드시 저렇게 순서를 지켜주셔야 합니다. 하나라도 틀리면 그라데이션 표현을 할 수 없습니다. ID값 bg3번부터 8번까지는 가장 많이 활용할 수 있는 방법입니다. 마크업도 어렵지 않습니다. 9번부터 10번까지는 사이사이에 색상이 좀 더 추가된 상황 입니다.
특히 9번의 경우에 퍼센테이지로 숫자가 들어가는데 이게 무슨 뜻이나면 포토샵의 그라데이션 기능을 예시로 들어볼 수 있습니다. 포토샵에서 그라디언트 에디터를 실행하면 위처럼 창이 뜹니다. 여기에 중간중간에 색상을 넣을 수 있는데 이 때 로케이션 값을 설정해서 원하는 위치로 설정할 수 있습니다. 퍼센트가 낮을수록 왼쪽으로, 높을수록 오른쪽으로 이동하는것을 알 수 있죠? CSS3에서의 Linear-gradient 속성값도 같은 의미라고 보시면 됩니다. 10번의 경우는 이 퍼센트 수치를 픽셀로 변경했을 뿐, 같은 기능을 합니다.
See the Pen CSS3: Gradient Background by rgy0409 (@rgy0409) on CodePen.
결과 화면입니다. 하나하나 살펴보시고 어떤 식으로 적용되는지 이해하시면 됩니다. 이렇게 CSS에서 Gradient Background 를 표현할 수 있으니 나만의 멋진 백그라운드를 만들어 보시기 바랍니다. 끝.
"친절한효자손 취미생활" 을 검색!
