처음부터 다시 배우는 HTML5 & CSS3 강의자료 13일차

처음부터 다시 배우는

HTML5&CSS3
실전 웹 표준 사이트 제작까지

양용석(ugpapa@gmail.com)

처음부터 다시 배우는 HTML5 & CSS3

강의 목차

1. 백그라운드 이미지


백그라운드 이미지
CSS를 사용하다 보면 백그라운드 이미지를 상당히 많이 사용합니다. 웹 표준 이전에 만들어진 사이트
들은 이미지를 잘게 조각 내어 붙여서 사용한 반면, CSS를 이용한 웹 표준 사이트는 백그라운드 이미지
를 사용해서 처리하는 경우가 많습니다.

백그라운드 이미지를 사용하게 되면 스타일을 제거했을 때, 불필요한 이미지 요소들은 대부분 사라지
고 웹사이트를 프린트할 때도 불필요한 그래픽적 요소를 상당 부분 제거할 수 있는 장점이 있습니다.

CSS로 아무리 사이트 디자인을 잘 한다고 해도 이미지까지 대체할 수는 없습니다.

멋진 사이트는 반드시 멋진 이미지가 디자인의 멋스러움을 더해줍니다. 이미지를 대체할 수 있는 것은
이미지밖에 없을 정도로 웹 페이지에 이미지를 잘 사용하는 것은 아주 중요합니다.


백그라운드 이미지 속성 이해하기
백그라운드를 적용하는 방법은 아주 간단합니다. 이전 속성 값들과 마찬가지로 축약형과 일반형이 존
재합니다.

방법1 축약형
background: 속성값;

속성값에는 color, image, repeat, attachment, position이 있습니다.

속성값 설명
color 색상을 지정해 줍니다.

image 배경 이미지를 지정해 주는 것으로 (“URL”)로 지정해 주거나 (URL) 또는 („URL‟)로 지정 가능합니다.

반복 요소를 말하는데, repeat , no-repeat, repeat-x, repeat-y로 나눌 수 있습니다.
repeat는 요소를 무한 반복하는 것이며, no-repeat는 반복 금지, repeat-x는 X축으로 반복, repeat-y는 Y축으로 이미
repeat 지를 반복하는 것을 말합니다.
repeat 요소를 적절하게 사용하는 것만으로도 사이트를 매우 풍부하게 꾸밀 수 있습니다.

scroll과 fixed로 나눌 수 있는데, 이게 정말 재미있습니다. 예를 들어 웹 문서가 아주 길 경우 백그라운드 이미지가 스
크롤을 따라서 같이 움직이면, scroll을 사용하고, 백그라운드 이미지를 고정할 경우에는 fixed를 사용하게 됩니다.
attachment 즉 이 말은 백그라운드 이미지의 높이가 100픽셀인데 한 페이지가 너무 길어 1000픽셀 정도의 높이를 가질 경우, scr
oll을 해주면 백그라운드 이미지도 따라서 움직이지만, fixed 해 버리면, 백그라운드 이미지는 스크롤을 할수록 없어
져 버립니다.

백그라운드 이미지의 위치를 정해 줄 수 있는데, X Y 축을 기준으로 top, center, bottom, left, right 로 지정할 수 있습
position 니다. 보통 2가지 요소를 복합적으로 사용하거나, 하나만 사용하거나 합니다.


방법2 일반형

background-color:속성값;

background-image: 속성값;

background-repeat: 속성값;

background-attachment: 속성값;

background-position: 속성값;

백그라운드 이미지는 정말 디자인적으로 아주 중요한 역할을 합니다. 백그라운드 이미지 하나로 사이
트 전체 디자인이 달라 보일 수도 있기 때문에 적절하게 적재적소에 사용하는 것이 정말 중요합니다. 또
한 백그라운드 이미지의 크기 또한 전체 웹 페이지에 많은 영향을 줄 수 있어 repeat 요소와 position 요
소를 잘 활용해야 합니다.

백그라운드는 웹 문서 전체에 영향을 주는 body 태그에 자주 사용하지만, 또한 list 태그에도 자주 사용
하며, 다른 요소들을 꾸미기 위해서 클래스 태그나 아이디 태그에도 자주 사용됩니다.


body {
margin:0;
padding:0;
background-color:#7da7d9;
background-image:
url(images/back_image1.jpg);
background-repeat:repeat-y;
background-attachment:fixed;
background-position:center;
}

body 백그라운드 처리 source/ch07/ex7-6.html


이전 페이지 그림은 브라우저의 크기가 가변적으로 변하더라도, 백그라운드 색상은 전체 웹사이트에
적용됩니다. 하지만 여기서 백그라운드 이미지의 크기는 다음 그림에서 보는 바와 같이 가로 980픽셀
세로 25픽셀의 이미지입니다.

이와 같이 백그라운드 이미지를 최소화하면서도 최대의 효과를 누릴 수 있는 것은 background-color와
background-repeat가 있기 때문입니다.

먼저 background-color의 색상을 백그라운드 이미지의 외곽 색상과 일치시킵니다.

그리고 background-repeat를 Y축으로 반복하게 해주면 전 영역에 대해서 백그라운드가 적용됩니다. 하
지만 background-position을 center로 하지 않으면 의외의 결과가 나오는 것을 알 수 있습니다. 백그라
운드 이미지가 브라우저의 기본인 왼쪽으로 정렬되기 때문입니다.



가변적인 길이에도 변하지 않는 백그라운드



고정 이미지를 이용한 백그라운드 (a)

그림은 단일 이미지를 이용해서 백그라운
드를 준 상태인데요. 이 이미지는 브라우
저 하단, 중앙에 배치되어 있습니다. 브라
우저의 크기가 변하거나, 컨텐츠의 양이
많아서 스크롤이 길어지더라도 항상 화면
하단에 이미지가 배치되는 것을 알 수 있
고정 이미지를 이용한 백그라운드 (b)
습니다.


그림에서 보듯이 브라우저의 크기를 아주 많이 늘려도 이미지는 항상 하단 에 고정되어 있는 것을 알 수
있습니다.

<style type="text/css">
body {
margin:0;
padding:0;
background-color:#022250;
background-image: url(images/back_image2.jpg);
background-repeat: no-repeat;
background-attachment :fixed;
background-position: bottom center;
}
</style>

백그라운드 이미지 하단에 고정하기 source/ch07/ex7-7.html


예제에서 보는 바와 같이 백그라운드의 색상을 이미지의 상단에 있는 색상과 동일 값을 주고 반복은 해
제하면서 위치를 화면 아래와 중앙에 정렬시키면 됩니다.

예제를 단축형으로 다음과 같이 사용할 수 있습니다.

background: #022250 url(images/back_image2.jpg) no-repeat fixed bottom center;

일반형을 사용할 건지, 단축형을 사용할 건지는 자기 몸에 맞는 옷과 신발이 가장 편하듯이 사용하다 익
숙해지는 것을 사용하는 것이 제일 좋습니다. 단 코드의 길이 가 문제라면, 단축형을 사용하고, 협업co-
work을 위해서는 일반형을 사용하는 것이 좋습니다.


백그라운드 이미지의 응용
백그라운드 이미지는 주로 body 태그에 사용되어 웹 페이지의 전체적인 레이아웃을 결정 짓는 데 사용
됩니다. 하지만 백그라운드 이미지는 이외의 곳에서도 많이 사용됩니다.

특히 list를 이용한 bullet 이미지에도 백그라운드 이미지가 사용됩니다.

<ul> <li> … </li> </ul>

list에 많이 사용되는 이유는 일반적으로 <li>
태그에 사용되는 bullet은 브라우저마다 조금씩
차이를 보이고 원하는 대로 정렬을 맞추기도
쉽지 않기 때문입니다.

우측에 있는 그림을 봐 주세요.



그림을 보면 기준선을 기준으로 상단 리스트 박스와 하단 리스트 박스의 차이점을 볼 수 있습니다. 상단
에서는 별 모양의 bullet 이미지가 리스트 텍스트보다 조금 윗부분에 위치해 있지만 하단 리스트 박스에
있는 텍스트는 별 모양의 리스트 bullet과 동일한 선상에 위치해 있는 것을 알 수 있습니다. 상단의 리스
트 bullet은 리스트 이미지를 이용한 것이고 하단의 리스트는 백그라운드 이미지로 리스트 bullet을 처리
한 것입니다.

아래의 소스를 통해 리스트에서 백그라운드 이미지가 사용되는 예제를 확실히 익혀 주시기 바랍니다.

ul.bullet {
list-style-image: url(images/bullet1.gif);
list-style-type: none;
margin:0;
…
ul.bullet2 li {
…
background-image: url(images/bullet1.gif);
background-position: 10px top; source/ch07/ex7-8.html
}

백그라운드 이미지를 활용한 리스트 이미지


예제에서 ul.bullet2에 백그라운드 이미지를
적용해 보겠습니다.

ul.bullet2 {
list-style-type:none;
margin:10px 0 0 0;
padding:0;
border:1px solid #999;
border-radius:10px;
width:300px;
background-image: url(images/back2.gif);
background-position: right bottom;
}

source/ch07/pic7-16.html

다양한 요소에 적용한 백그라운드 이미지


이와 같이 백그라운드 이미지는 적합한 곳에 사용하게 되면, 전체적인 웹사이트를 아주 아름답고도 멋
있게 꾸밀 수 있습니다.

다양한 곳에 접목할 수 있기 때문에 활용 범위가 아주 넓다고도 할 수 있습니다.

일반적인 이미지는 단순하게 이미지로서 역할만 하지만, 백그라운드 이미지는 HTML 요소와 접목하여
더욱 기능적이고 다양한 효과를 낼 수 있습니다.


그라데이션의 적용(css3)
CSS3에서는 박스 및 바디 전체에 그라데이션을 적용해 줄 수 있습니다. 단 IE에서는 최신 버전인 IE9에
서조차 여전히 Microsoft에서 만든 자체 필터를 사용해야만 그라데이션을 표현할 수 있습니다.

그라데이션을 활용하게 되면 포토샵에서 이미지를 전혀 그리지 않고도 다양한 효과 를 줄 수 있습니다.
비록 현재는 Mozilla 계열인 파이어폭스와 Webkit 계열인 구글 크롬, 애플 사파리 브라우저에서만 제대
로 작동하지만, IE 에서도 자체적인 필터를 이용하여 그라데이션을 표현해 줄 수 있습니다.

그라데이션이란 두 가지 이상의 색상이 한곳에서 다른 곳으로 일정하게 색상이 변하는 것을 말합니다.
그라데이션을 사용하게 되면 이미지 없이 색상을 만들어 낼 수있어 매력적이지만, 현재 완벽하게 웹 표
준에 의해서 작동하는 브라우저는 없는 상태입니다.

특히 IE에서는 filter를 이용 해서 생성하기 때문에 border-radius 값이 전혀 적용되지 않습니다. 그래서
gradient를 현 시점에서 바로 사용하기에는 약간의 무리가 있는 것은 사실입니다. 하지만 향후 보편적으
로 지원될 수 있기 때문에 여기서는 간단하게 사용 방법을 익혀 보겠습니다.


웹 상에서는 그라데이션을 시각적으로 만들어 주는 툴 또한 여럿 존재하기 때문에 일일이 소스 코드를
입력하지 않더라도, 바로 붙여 쓰기가 가능합니다. 그림은 그라데이션 코드를 바로 생성해 주는 사이트
입니다. 원하는 색상을 선택하고 원하는 방향을 설정해 주면 “The Code” 부분에 원하는 값이 생성되고,
그 값을 복사해서 바로 붙여 넣기만 하면 됩니다.(➊)

그라데이션 생성기 ➊ 그라데이션 생성기
(http://gradients.glrzad.com/) (http://www.colorzilla.com/gradient-editor/)


하지만 그라데이션 생성기는 Webkit과 Mozilla 계열에서만 사용할 수 있습니다. 표준 표현법은 다음과 같습니
다.

linear-gradient(색상값, 색상값);

여기에 방향을 지정해 줄 수 있습니다.

linear-gradient(top, 색상값, 색상값);

각도 또한 지정 가능합니다.

linear-gradient(270deg, 색상값, 색상값);

웹 표준에 의해서 완벽하게 그라데이션이 표현되는 브라우저는 현재 시점에선 아무것도 없습니다. 하지만
CSS3 표준에는 그라데이션 표현이 있기 때문에 여기서 사용하는 방법에 대해서 살펴보겠습니다.



각각의 브라우저에서 그라데이션 테스트 결과


.box1 {

width:500px;

height:300px;

padding:30px;

border:1px solid #06C;

background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0.01,

rgb(76,180,253)), color-stop(0.77, rgb(3,32,252)));

-moz-linear-gradient( center top, rgb(76,180,253) , rgb(3,32,252) );

Filter: progid:DXImageTransform.Microsoft.gradient
(GradientType=0,startColorstr=#4cb4fd, endColorstr=#0320fc);

font-family: "맑은 고딕";

font-size: 24px;

color: #FFF;

}

그라데이션 효과 주기 source/ch07/ex7-9.html



그라데이션에서 border-radius 값 적용


각각의 브라우저에서 완벽하게 동작하는 것을 볼 수 있습니다만, IE9의 경우 border-radius 값을 적용하
면, border-radius는 그라데이션 내부에 생겨버려 별 의미가 없어져 버립니다. 타 브라우저에서는 완벽
하게 작동합니다.
-webkit-gradient(
linear, /* 방향을 의미합니다. */
left top, /* 시작되는 곳 */
left bottom, /* 끝나는 곳 */
color-stop(0.01, rgb(76,180,253)), /* 시작되는 위치 값 및 색상 값 */
color-stop(0.77, rgb(3,32,252)) /* 끝나는 곳의 위치 값 및 색상 값 */
);
-moz-linear-gradient(
center top /* 시작되는 곳 */
rgb(76,180,253) , /*시작되는 곳의 색상값 */
rgb(3,32,252) /* 끝나는 곳의 색상값 */
);

인터넷 익스플로러는 현재 직접적으로 그라데이션을 채용하고 있지 않기 때문에 Microsoft 자체의 필터
를 사용해서 그라데이션을 표현합니다.

Filter: progid:DXImageTransform.Microsoft.gradient /* 필터 이름 */
(GradientType=0, startColorstr=#4cb4fd, endColorstr=#0320fc); /* 방향, 시작점 색상, 끝점 색상 */


이와 같이 직접적인 그래픽 이미지를 사용하지 않고도 CSS만으로 충분히 그래픽 요소를 만들어 낼 수
있기 때문에, 디자이너들이 굳이 포토샵을 통해 이미지 데이터를 만들지 않더라도 웹 페이지에 여러 가
지 효과를 줄 수 있습니다.

그라데이션을 효과적으로 적용해 보기 위해, 많은 박스를 만들고 그라데이션 생성기를 이용해서 직접
실습을 해 보시면, 이해가 빠릅니다.

직접적으로 코드를 입력하시는 것 보다, 그라데이션 생성기를 이용해서 만드는 것이 효과적입니다.

책에서는 언급이 되지 않았지만, 앞 페이지 설명한 http://www.colorzilla.com/gradient-editor 사이트는
포토샵에서 사용된 스타일 효과를 미리 지정해 주었기 때문에 보다 직관적인 그라데이션 효과를 적용
할 수 있습니다.

처음부터 다시 배우는 HTML5 & CSS3 강의자료 13일차

Recommended

Recommended

More Related Content

Featured

Featured (20)

처음부터 다시 배우는 HTML5 & CSS3 강의자료 13일차