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

처음부터 다시 배우는

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

양용석([email protected])

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

강의 목차

1. 백그라운드 이미지


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

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

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

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


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

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

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

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

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

repeat

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

attach-ment

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

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


백그라운드 이미지 속성 이해하기방법 2 일반형

background-color: 속성값 ;

background-image: 속성값 ;

background-repeat: 속성값 ;

background-attachment: 속성값 ;

background-position: 속성값 ;

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

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


백그라운드 이미지 속성 이해하기

body 백그라운드 처리

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;

}

source/ch07/ex7-6.html


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

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

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

그리고 background-repeat 를 Y 축으로 반복하게 해주면 전 영역에 대해서 백그라운드가 적용됩니다 .

하지만 background-position 을 center 로 하지 않으면 의외의 결과가 나오는 것을 알 수 있습니다 .

백그라운드 이미지가 브라우저의 기본인 왼쪽으로 정렬되기 때문입니다 .



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



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

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

그림은 단일 이미지를 이용해서 백그라운드를 준 상태인데요 . 이 이미지는 브라우저 하단 , 중앙에 배치되어 있습니다 .

브라우저의 크기가 변하거나 , 컨텐츠의 양이 많아서 스크롤이 길어지더라도 항상 화면 하단에 이미지가 배치되는 것을 알 수 있습니다 .


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

<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-repeat: no-repeat; background-position: 10px top;}

source/ch07/ex7-8.html

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


백그라운드 이미지의 응용

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

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-repeat: no-repeat; background-position: right bottom;}

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

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/)


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

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

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

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

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

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

웹 표준에 의해서 완벽하게 그라데이션이 표현되는 브라우저는 현재 시점에선 아무것도 없습니다 . 하지만 CSS3

표준에는 그라데이션 표현이 있기 때문에 여기서 사용하는 방법에 대해서 살펴보겠습니다 .



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


그라데이션의 적용 (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

사이트는 포토샵에서 사용된 스타일 효과를 미리 지정해 주었기 때문에 보다 직관적인 그라데이션 효과를 적용할 수 있습니다 .

http://www.colorzilla.com/gradient-editor

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

Technology