Chapter 11
배경을 내 맘대로~! background
이번건 스타일 시트 중급 단계중 에서도 어려운 부분에 속하지만,
버릴게 없을 정도로 유용한 background에 대해 배워 보겠습니다.
아마 따라 써 봐도 무슨 말인지 잘 이해가 안될 경우가 허다할 것으로 예상됩니다.
진짜 어렵습니다. ㅡ.ㅡa 각오 단단히 하시고..
그럼 시작 할까요?
님들은 HTML을 배우실때 bgcolor, background 라는 속성을 배우셨을 겁니다.
이걸 아신다면 많은 도움이 되실겁니다.
그러나 그 지식은 여기에선 50%밖에 적용되지 않으니 그점을 유의 하세여 ^^
배경 그림, 색상을 집어넣는것은 기본이고,
절대적 난이도인(?) repeat를 비롯하여.. (필자에겐 유명합니다..ㅜ.ㅜ)
position, attachment를 이용한 배경 그림의 위치지정, 반복 방향 지정, 이미지 고정등을 설정할 수 있는 것입니다.
그럼 background의 속성과 그 종류에 대해서 알아 보도록 하죠.
▶background의 부가 속성 도표
▶background의 부가 속성 도표
background
color배경색깔을 지정할때 쓰입니다.RGB코드, 영문 색상, transparent(기본값)
image배경에 그림을 넣을때 쓰입니다.url(이미지 경로), none(기본값)
repeat배경 그림이 연속되는 방향을 결정 합니다.repeat(기본값), repeat-y, repeat-x, no-repeat
position배경 그림의 위치를 상세하게 표현.%(퍼센트), 길이 단위(*pt, *px같은거..), top, bottom, left, right, center
attachment배경 그림의 고정/고정 해제를 설정 합니다.scroll(기본값), fixed
▶background-color
▶background-color
그럼 우선은 젤루 쉬운 color부터 알아보도록 합시다.
사용방법은 아래와 같습니다.
예제 입니다.
background-color:yellow훗.. 너무 쉽다구요? ^^a
그래두 예제는 보셔야죠?
<html>
<head>
<title>background-color</title>
<style type="text/css">
.bgcolor {background-color:#ffcc88}
</style>
</head>
<body>
<table border="2" cellspacing="0" width="640" height="480" class="bgcolor">
<tr>
<td align="center" valign="middle">
하핫.. 배경 색깔은 누런색일 것입니다.
</td>
</tr>
</table>
</body>
</html>예제보기 1st ← Click !
보시다시피 태그에 적용된 배경 색깔이 누런색으로 변경 되었음을 알 수 있습니다.
태그 외에도,
태그에도 적용 되구요,심지어 글자에도 배경색깔을 채워 널을 수 있습니다.
재미 있죠? ^^
그럼 이제 다음으로 넘어 가죠..
▶background-image
▶background-image
이젠 약간 난이도가 높아 졌습니다.
후훗.. 그래도 알고보면 별거 아닙니다.
사용법은 아래와 같습니다.
예제 입니다.
background-image:url(건담.jpg)별거 아니져? ^^
조심할건, :(콜론)이 시작된 후 바로 이미지 경로를 적는것이 아니라,
url을 쓰고 그 다음 괄호를 만들어 그 안에다 이미지 경로를 적어 주어야 한다는 것입니다.
그럼 적용 시켰을때의 에제 입니다.
꼭 실습 하세여. 아셨져? *^^*
<html>
<head>
<title>background-image</title>
<style type="text/css">
.background {background-image:url(
</style>
</head>
<body class="background">
배경은 필자가 좋아하는 만화인 선녀강림의 일러스트 입니다. ^^*
</body>
</html>예제보기 2nd ← Click !
▶background-repeat
▶background-repeat
이젠, 이해할래야 이해가 거의 불능인.. ㅡ.ㅡa
절대적 난이도인(?) repeat입니다.
무슨뜻인지 굳이 사전에서 찾아보진 않겠습니다. (귀찮아서 그런거 아냐?)
......ㆀ
차..찾아 볼게여..ㅡ.ㅡㆀ
음..
되풀이 하다? 반복하다? 이런 뜻이군요.. 후훗..
제 생각과 거의 일치 하네여~~ ^^ (에이~ 거짓말!!)
넵. 말그대로 반복합니다.
무쉰말 이냐구요?
원래 HTML에선 배경이미지가 바둑판 형식으로 반복되는것이 일반적 입니다.
그러나 스타일 시트에선 한쪽방향, 가령 예를들어
상하로만 반복,(좌표상에서 y라고 합니다. 수학에서 함수를 배우셨으면 아실겁니다 *^^*)
좌우로만 반복, (좌표상에서 x라고 합니다.)
반복이 안되게,
이렇게 3가지를 더 지정할 수 있습니다.
그래서 이걸 스타일 시트 값으로 지정하면..
repeat-y
repeat-x
no-repeat
이렇게 만들어 지는것 입니다.
참고로 background-image와 함께 써야합니다.
안쓸수도 있지만,
그러려면 HTML태그에서 미리 background속성 따위로 배경이미지를 불러와야 할 것입니다.
아래의 예제를 통해 repeat의 그 진실에 대해 알아보지요.
<html>
<head>
<title>background-repeat</title>
<style type="text/css">
.repeat1 {background-image:url( background-repeat:repeat-y}
.repeat2 {background-image:url( background-repeat:repeat-x}
.repeat3 {background-image:url( background-repeat:no-repeat}
</style>
</head>
<body>
<table border="2" cellspacing="0" width="640" height="480" class="repeat1">
<tr>
<td align="center" valign="middle">
세로로 반복될것 입니다.
</td>
</tr>
</table><br><br>
<table border="2" cellspacing="0" width="640" height="480" class="repeat2">
<tr>
<td align="center" valign="middle">
가로로 반복될것 입니다.
</td>
</tr>
</table><br><br>
<table border="2" cellspacing="0" width="640" height="480" class="repeat3">
<tr>
<td align="center" valign="middle">
반복되지 않습니다.
</td>
</tr>
</table>
</body>
</html>예제보기 3rd ← Click !
후훗... 이걸보시구 벌써부터 대단한 아이디어가 떠오르신 님이 계신것 같군요.
그렇죠.
매우 흥미로운 속성이 아닐 수 없습니다.
그럼 님들~~ 잘 쓰세요 *^^*
▶background-position
▶background-position
포지션~!! (가..가수가 아닙니다..ㅡ.ㅡa)
위치를 뜻하는 position은 여러분이 의도하시는 위치대로 배경 이미지를 얼마든지 옮길 수가 있을 것입니다.
근데 이것역시 절대적 난이도를 자랑하는 repeat와 난이도가 별로 다를바가 없어서..
아마도 꽤나 님들을 애타게 할 것입니다.
정말 홈페이지 관련 지식이라면 HTML 하나뿐인 님께는...
가히.. 후.. 말도 못할 정도의 살인적(?) 난이도임을 알게 되실겁니다.
역시.. 화려하면 할수록 어려워 지는걸까...ㆀ
플래시도, HTML도, 자바 스크립트도, 포토샵도 그러했는데.. 쩝..
소개는 여기서 끝내고..
사용방법은 아래와 같습니다.
예제 입니다.
background-positon:60pt 80pt훗.. 알고보면 별거아닌데..
그 알게 되는 과정에 힘들다는 커다란 벽이..ㅜ.ㅜ
위의 예제에서 보시다시피, 제가 수치를 두개 적었습니다.
왜그럴까요? 생각 해 보셨나요?
그 이유는..
웹브라우저 상에서 x좌표측 수치와 y좌표측 수치가 함께 존재하기 때문 입니다.
※ 알아두세여 ~ ♬
원래 2D그래픽은 대체로 각 픽셀이란 점으로 이뤄진 비트맵(bitmap)방식을 많이 씁니다.
그리고 비트맵은 그 점의 숫자대로 600*800 이런식으로 표현하겠죠.
이 예로들어 놓은 600*800이란건, 가로에 점이 600개, 세로에 점이 800개 있다는 뜻이 되지요.
그럼 이것의 결과물은 어떻게 보여질까요?
정답 아시는 님~~ 손손~~
넵. 세로로 약간 긴 사각형이 되는 것이죠.
그리고.. 그래픽 프로그램 같은 곳에선 이 비트맵 상에서의 위치 확인에 용의하라고 xy좌표를 만들었습니다.
그게 지금 제가 말하려는 결론과 관계가 있습니다.
x는 가로를 뜻하고, y는 세로를 뜻한다는 것쯤, 중고등학생 시절 함수를 배울때 다 알고 계실테지요?
그리고, 이 비트맵 에서의 0.0 지점(함수에선 원점이라 하더군요)은
시계 방향으로 볼때,
좌측상단의 대각선인 10시30분 방향 끄트머리에 위치하구요.(잘 모르시겠거든 직접 시계를 보세요.)
...그래서
왼쪽의 수치가 가로를,
오른쪽의 수치가 세로를 뜻하게 됩니다.
단위로는.. 지난 강좌때 배우신 font-size를 기억하실련지?
넵. 거기에 쓰여진 절대단위, 상대단위가 모두 쓰이게 됩니다.
거기에다가 %(퍼센트)까지 동원 됩니다.
다들 아시겠지만..
%는 현재 모니터 해상도(엄밀히 따지면 그 모니터 안에 생성된 웹브라우저의 넓이)의 넓이에 따라서
그 실제 길이와 모니터 해상도가 비례를 이루게 됩니다.
한마디로 상대적 이란거죠.
니가 변하면 내도 변한데이~~
...이런식이죠.. 뭐.. ㅡ.ㅡa(패러디 입니다.)
그럼 이론은 배웠으니(이게 이론인가?! 잡담인가.. 끙..ㆀ)
사용법을 알아보지요.
참고로 background-position을 제대로 구현하기 위해선, background-repeat:no-repeat 와 함께 써야 이상적 입니다.
왜인지는 아시죠?
반복되면, 정확한 위치를 확인 할 수 없기 때문이죠.
예제 입니다.
<html>
<head>
<title>background-repeat</title>
<style type="text/css">
.position1, .position2, .position3 {background-image:url( background-repeat:no-repeat}
.position1 {background-position:40pt 100pt}
.position2 {background-position:320px 240px}
.position3 {background-position:70% 60%}
</style>
</head>
<body>
<table border="2" cellspacing="0" width="640" height="480" class="position1">
<tr>
<td align="center" valign="middle">
가로 40pt 세로 100pt 입니다.
</td>
</tr>
</table><br><br>
<table border="2" cellspacing="0" width="640" height="480" class="position2">
<tr>
<td align="center" valign="middle">
가로 320px 세로240px 입니다.
</td>
</tr>
</table><br><br>
<table border="2" cellspacing="0" width="640" height="480" class="position3">
<tr>
<td align="center" valign="middle">
가로 70% 세로 60% 입니다.
</td>
</tr>
</table>
</body>
</html>예제보기 4th ← Click !
이걸 보시구 따라해봐두 좀처럼 이해가 잘되질 않으실 겁니다.
이 background-position과 절대적 난이도인 background-repeat의 이해중 50%는 독학에 있습니다.
그만큼.. 저두 설명하기가 뭐처럼 까다로운 부분 입니다..ㅜ.ㅜ
background-position은 배경 이미지의 원점을 기준으로 가로와 세로로 이동합니다.
잘 보십시오.
첫 예제인 40pt 100pt로 적용한 배경 이미지를..
배경 이미지에 Style이란 글자가 찍혀 있을건데엽,
그 배경 이미지의 원점, 그러니까 좌측상단 끝부분을 하나의 점이라 생각하시구 잘 봐주세요.
그리고 동시에 태그로 만들어 놓은 겉 테두리 부분도 잘 주시 하시구요..
그럼.. 아하~! 하시면서 눈에 세로로 길다란 사각형이 그려지는 것을 확인하실 수 있을겁니다.
이게 뭔지 이상태에서 더이상 설명하기가 까다롭군요..ㅡㅡㆀ
잘 이해가 안가시거든 이 부분을 몇번이고 읽어 봐 주세요.
그러지 않고선 알수가 없답니다..ㅜ.ㅜ
아무튼.. 어렵고도 힘들었던 background-position은 이렇게 막을 내립니다.. (죄송..)
▶background-attachment
▶background-attachment
이젠..좀 쉬운거..하나 입니다..
이거, 쓸때는 attachment인데..
좀.. 어렵죠?
읽을때 이렇게 읽으세요.
아타치(attach)라는 아파치 헬기의 복제품이~~
멘트(ment)당했다~~~~~~~~!!
..............ㆀ
써 얼 렁 ~~~
흠흠.. 아무튼.. ㅡ.ㅡa
외우기 좋으시라구 이렇게 만들었으니 오해 없으시길... (앗.. 또 돌 날아 온다..ㅜ.ㅜ)
초기 값은 scroll입니다.
보통 배경 이미지는 스크롤바로 화면을 이동하면.. 따라서 같이 움직이는 것이 HTML의 기본 법칙입니다.
그러나 스타일 시트를 쓰시면 이것이 고정 됩니다.
네? 뭐라구요? 아아..
네..네.. 태그에도 있었어요.. 그래여.. ㅡㅡa
그..건 우선 접어 두시구여.. 이것좀 보시져 *^^* (또 돌 날아 온다..ㅜ.ㅜ 아.. 신세여..)
fixed로 background-attachment의 값을 정하시면..
아무튼 결과가 그렇게 됩니다.
예제를 통해서 사용법을 확인 하세요 ^^a
<html>
<head>
<title>background-repeat</title>
<style type="text/css">
body {background-image:url( background-attachment:fixed}
</style>
</head>
<body>
그림이 고정 되었습니다.<br>
그림이 고정 되었습니다.<br>
그림이 고정 되었습니다.<br>
그림이 고정 되었습니다.<br>
그림이 고정 되었습니다.<br>
그림이 고정 되었습니다.<br>
.
.
.
그림이 고정 되었습니다.<br>
그림이 고정 되었습니다.<br>
그림이 고정 되었습니다.<br>
그림이 고정 되었습니다.<br>
그림이 고정 되었습니다.<br>
그림이 고정 되었습니다.<br>
</body>
</html>예제보기 5th ← Click !
후.. 고생 하셨습니다. ㅡ.ㅡa
저두 쓰느라 힘들었지만..
제 강좌를 읽고 이해하려고 애쓰시는 님들께선 아마 진땀을 빼셨을 것으로 압니다.
다시한번 말씀 드리지만..
수 고 하 셨 습 니 다 !
그럼.. 다음 강좌때 뵙겠습니다.
아시져?
다음 강좌땐 더 어럽다는거.. ㅡㅡㆀ
빠빠시~~~
- End -