HTML 강좌 STYLE SHEET 배경제어
스타일시트의 배경에 관한 옵션은 background-color 와 background-image 와 background-repeat 그리고 background-attachment 등이 있습니다.
그중 background-color는 다른 옵션들과 같이 쓸수 없는 것임을 감안한다면 그 형식은embeded로는
<style type='text/css'>
적용될태그 {backgound-color:값(또는 backgound-image;backgound-image:값;backgound-repeat:값;background-attachment:값)}
</style>
.
.
<적용될태그> |
|
inline으로는
<적용될태그 style="backgound-color:값(또는 backgound-image;backgound-image:값;backgound-repeat:값;background-attachment:값)">
|
|
역시 폰트제어와 마찬가지로 옵션 전부를 써줄필요는 없습니다. 그건 태그나 스타일시트나 전부 마찬가지죠 원하는 옵션만 써주면 됩니다.
① 단색 배경 background-color
어떠한 태그의 단색배경을 입힐때 쓰이는 옵션입니다. 따라서 옵션값은 색상이 되겠죠. 그러므로background-color:색상입니다. 혹은 background:색상로 써줘도 됩니다.
하지만 원칙상 background-color:색상으로 기억해 두시는게 나을듯. 적용할태그를 <font>로 써서 예제를 들어보겠습니다.
아참! embeded방식과 inline방식의 차이는 아시죠? 적용될태그를 <font>로 한다면 embeded방식은 모든 <font>태그에 배경을 입히게 되고 inline은 하나의 <font>태그에만 입힌다는거.
| embeded방식 | inline방식 | <html>
<head>
<title>스타일시트 예제</title>
<style type="text/css">
font {background-color:yellow}
</style>
</head>
<body>
<font>나는 할 수 있다</font>
</body>
</html>
| <font style="background-color:yellow">나는 할 수 있다</font> |
|
|
<FORM>실행화면</FORM>어때요 <font>태그 배경색이 노랗게 됐죠? 물론 다른 태그에도 적용가능합니다. 제가 자꾸 <font>태그에만 예를 들어준다고 여기에만 적용된다고 생각하지 마세요. 스타일시트의 옵션들은 거의 대부분이 아무태그를 가리지 않고 적용이 된답니다.
배경 강좌니까 background-color옵션을 <body>태그에다가 걸어주면 어떻게 될까요? 당연히 화면전체가 배경이 입혀지겠죠. <font>태그의 배경은 글자주변에 한정되겠지만 <body>태그의 배경은 화면 그자체니까
| embeded방식 | inline방식 | <html>
<head>
<title>스타일시트 예제</title>
<style type="text/css">
body {background-color:yellow}
</style>
</head>
<body>
나는 할 수 있다
</body>
</html>
| <body style="background-color:yellow">나는 할 수 있다</font> |
|
|
<FORM>실행화면</FORM>어때요? 신기한가요?
② 이미지 배경
이미지 배경에 쓰이는 옵션들은 꽤 많답니다. 그중에 가장 기본적인것은 뭐니뭐니해도 '이미지 배경을 하겠다'라는 background-image겠죠. 어디에 있는 배경그림을 사용할 것인지를 정해야 하기 때문에 옵션값은 배경그림의 주소가 됩니다. url(주소)이죠. 따라서 그 형식은 background-image:url(이미지주소)가 된답니다. 이 역시 background:url(이미지주소)라고 표기도 가능하나 다른 배경옵션들과의 형식 통일성을 위해 처음것을 기억하시는게 좋겠네요.
| embeded방식 | inline방식 | <html>
<head>
<title>스타일시트 예제</title>
<style type="text/css">
font {background-image:url(back.gif)}
</style>
</head>
<body>
<font>나는 할 수 있다</font>
</body>
</html>
| <font style="background-image:url(back.gif)">나는 할 수 있다</font> |
|
|
<FORM>실행화면</FORM>이해되시죠? 제가 누차 말씀드리는 거지만 embeded방식와 inline의 차이를 염두에 두세요.
자 그럼 이미지 배경을 <font>태그말고 <body>태그에다 입혀보죠
| embeded방식 | inline방식 | <html>
<head>
<title>스타일시트 예제</title>
<style type="text/css">
body {background-image:url(back.gif)}
</style>
</head>
<body>
나는 할 수 있다
</body>
</html>
| <body style="background-image:url(back.gif)">나는 할 수 있다</font> |
|
|
<FORM>실행화면</FORM>※ background-repeat
이미지 배경을 주는 스타일시트에는 옵션이 더 있습니다. 배경그림이 적용될범위보다 크기가 작은경우 타일형식으로 반복되어 나오는데 그걸 조절할 수 있는 옵션이 있죠. background-repeat입니다. 단 이 옵션은 이미지배경을 한다는 전제하에서 이므로 background-image옵션이 없이는 쓰일수 없습니다.
옵션값에는
repeat-x : x축으로 반복이 됩니다.
repeat-y : y축으로 반복이 됩니다.
no-repeat : 이미지가 적용태그의 공간보다 작아도 반복을 시키지 않습니다.
repeat-x만 예를 들어보죠. 나머지는 태그연습장으로 실행해보세요.
| embeded방식 | inline방식 | <html>
<head>
<title>스타일시트 예제</title>
<style type="text/css">
body {background-image:url(back.gif);background-repeat:repeat-x}
</style>
</head>
<body>
나는 할 수 있다
</body>
</html>
| <body style="background-image:url(back.gif);background-repeat:repeat-x">나는 할 수 있다</font> |
|
|
<FORM>실행화면</FORM>※ background-attachment
이 옵션또한 이미지 배경에 한해서 쓸수 있는 옵션입니다. 말그대로 '배경을 붙이는'역할을 하는데 화면이 커서 스크롤을 할 경우 배경은 따라서 움직이지 않고 고정되어 있답니다. 따라서 옵션값은 fixed이죠.
이것은 <body>태그에서 bgproperties=fixed와 역할은 같으나 스타일시트는 좀더 다양한 태그에서 쓰일 수 있다는게 장점입니다.
| embeded방식 | inline방식 | <html>
<head>
<title>스타일시트 예제</title>
<style type="text/css">
body {background-image:url(back.gif);background-attachment:fixed}
</style>
</head>
<body>
HTML TUTOR의 스타일강좌입니다<br>
이해하기 쉽죠?<br>
이렇게 일일히 실행화면까지<br>
보여주면서<br>
강좌를 하는 사이트 보셨나요?<br>
지금은<br>
background-attachment:fixed<br>
의 예제인데<br>
화면을 스크롤 해보세요<br>
배경은 고정되어있죠?<br>
</body>
</html>
| <body style="background-image:url(back.gif);background-attachment:fixed">HTML TUTOR의 스타일강좌입니다<br>
이해하기 쉽죠?<br>
이렇게 일일히 실행화면까지<br>
보여주면서<br>
강좌를 하는 사이트 보셨나요?<br>
지금은<br>
background-attachment:fixed<br>
의 예제인데<br>
화면을 스크롤 해보세요<br>
배경은 고정되어있죠?<br>
</font> |
|
|
<FORM>실행화면</FORM>이상입니다. 배경제어에 관한 스타일시트에 관한 옵션은 끝났습니다. 이것외에 옵션이 더 있는지는 모르겠으나 제가 다른옵션은 기억이 안나는 걸로 봐서는 있어봤자 별로 중요하지 않은 것일겁니다. ㅡㅡ;
자, 제가 너무 한쪽 태그에만 예제를 보여주는 것 같아서 이 배경옵션을 다른 태그에 적용시켜 보겠습니다.
이번에는 inline방식만 예를 들어볼게요. embeded까지 적으려니 너무 공간을 많이 차지하네요.--; 궁금하면 여러분들이 직접 embeded방식으로 연습해보세요. 그정도 노력은 있어야겠죠?
자, 왼쪽은 inline소스이고 오른쪽은 실행화면입니다.
버튼을 만드는 <input>태그와 텍스트 공간을 만드는 <textarea>태그를 저렇게 다양하게 변화시켜 봤습니다. 진짜 대단하지 않나요?
가장 위에것은 단색배경을 노란색으로 준 것이고
두번째 것은 거기에다 저번에 배운 폰트색상을 조절하는 옵션 color를 추가한겁니다.
세번째는 버튼에다가 이미지배경을 준 것이고
네번째는 거기에다가 폰트색상 조절옵션인 color를 빨간색으로 지정한 경우입니다.
다섯번째는 <textarea>의 배경을 스타일시트로 준 경우지요
이런식으로 저번시간에 배운 옵션까지 동원해 가면서 응용해 보세요. 효과가 무궁무진 할겁니다. 물론 다른 태그에다가 적용시켜도 되겠죠
