CSS 사용방법 - 배경표현 > 디자인,프로그램,유틸

마케팅

특별마케팅자료

다운로드마케팅자료

창업,경영

기획,카피

동기부여,성취

소스,유틸

CSS 사용방법 - 배경표현

작성자 : 99 단국강토

등록날짜 : 2009.02.16 11:34

2,309

배경표현

1 배경색 설정 - [ background-color ]

2 배경이미지 설정 - [ background-image ]

3 배경이미지 정렬방법 - [ background-repeat ]

4 배경이미지 고정 - [ background-attachment ]

1 배경색 설정 - [ background-color ] ... [ TOP ]

이번장에서는 배경을 다루는 스타일속성에 대하여 알아보도록 하죠^^*
background-color는 배경색을 설정하는 속성으로 {background-color:red} 또는 {background-color:#ff0000}와 같이 사용됩니다.
아래 예제는 body를 Embeded방식으로해서 yellow로 하고 Class방법으로 각각의 태그들에 대해 pink색상을 지정한 예입니다.

[예제] - 실행화면 보기
<html>
<head>
<title>스타일시트 예제</title>
<style>
body {background-color:yellow}
.test_01 {background-color:pink}
</style>
</head>
<body>
<input type='text' class='test_01'>
<br><br><br>
<input type='button' class='test_01' value='인포카페'>
<br><br><br>
<textarea class='test_01'>크기가 지정 되었죠^^</textarea>
<br><br><br>
</body>
</html>

2 배경이미지 설정 - [ background-image ] ... [ TOP ]

background-image는 배경이미지의 URL을 설정하는 속성으로 {background-image:url('이미지 경로')}와 같이 사용됩니다.
예제를 볼까요^^*

[예제] - 실행화면 보기
<html>
<head>
<title>스타일시트 예제</title>
<style>
.test_01 {background-image:url('../sample_02.gif');width:150;height:150}
</style>
</head>
<body>
<input type='button' class='test_01' value='인포카페 버튼'>
<br><br><br>
<textarea class='test_01'>textarea 입니다.</textarea>
<br><br><br>
</body>
</html>

3 배경이미지 정렬방법 - [ background-repeat ] ... [ TOP ]

background-repeat는 이미지의 정렬을 지정하는 속성으로 아래와 같은 값을 정의할 수 있습니다.
repeat : 이미지를 바둑판식 배열로 정렬 합니다.
repeat-x : 이미지를 가로방향으로 반복해서 정렬 합니다.
repeat-y : 이미지를 세로방향으로 반복해서 정렬 합니다.
no-repeat : 이미지를 반복되지 않고 한 번만 표시합니다.
아래 예제에서 확연히 구분을 하실수 있을 겁니다. 실행화면 보기를 클릭하세요^^ 어서요^^*

[예제] - 실행화면 보기
<html>
<head>
<title>스타일시트 예제</title>
<style>
.test_01 {background-image:url('../sample_02.gif');background-repeat:repeat}
.test_02 {background-image:url('../sample_02.gif');background-repeat:repeat-x}
.test_03 {background-image:url('../sample_02.gif');background-repeat:repeat-y}
.test_04 {background-image:url('../sample_02.gif');background-repeat:no-repeat}
</style>
</head>
<body>
<table border='1'>
<tr><td width='600' height='300' class='test_01'>repeat 적용</td></tr>
</table>
<br><br><br>
<table border='1'>
<tr><td width='600' height='300' class='test_02'>repeat-x 적용</td></tr>
</table>
<br><br><br>
<table border='1'>
<tr><td width='600' height='300' class='test_03'>repeat-y 적용</td></tr>
</table>
<br><br><br>
<table border='1'>
<tr><td width='600' height='300' class='test_04'>no-repeat 적용</td></tr>
</table>
</body>
</html>

이해 다 하셨죠^^ 소스가 조금 긴가요--,.--;;

4 배경이미지 고정 - [ background-attachment ] ... [ TOP ]

background-attachment는 이미지가 지정되어 있는 경우 이미지를 고정되게 할 것인지, 스크롤에 따라서 내용도 함께 이동시킬것인지를 설정하는 속성이며 그 값으로는 다음과 같습니다.
fixed 이미지의 위치를 고정시킵니다.
scroll 이미지를 다른 내용과 함께 스크롤하도록 합니다.

[예제] - 실행화면 보기
<html>
<head>
<title>스타일시트 예제</title>
<style>
.test_01 {background-image:url('../sample_02.gif');background-attachment:fixed;}
</style>
</head>
<body>
<textarea class='test_01' style='width:300;height:150'>
안녕하세요^^
인포카페입니다. 이미지가 고정되어 있죠^^*
계속 스크롤바를 내려보세요.
1
2
3
4
5
6
7
8
9
10
끝
</textarea>
</body>
</html>

지금 적용한 스타일도 많이 사용하는것 같내요^^ 꼭 기억하고 계세요^^*
배경이미지를 다루는 속성은 이것 외에도 더 있는것 같더군요^^ 자세한 사항은 전문서적을 참조하세요^^
그럼! 다음강좌에서 뵈요^^*

출처 : Tong - 드렁크수달스님의 ■ CSS ■통

"쇼핑몰·홈페이지·오픈마켓
블로그·페이스북·이메일 등의 각종 마케팅 글쓰기,
각종 광고, 영업, 판매, 제안서, 전단지
반응율 3배×10배 이상 높이는 마법의 8단계 공식"

☞자세히보기

Comments

로그인한 회원만 댓글 등록이 가능합니다.

번호	제목	글쓴이	날짜	조회
3135	1-16.[문장,문서] 문장, 문서 꾸미기4 - ④ 문서에 선긋기 <hr> 태그	99 단국강토	02.16	3200
3134	1-15.[문장,문서] 문장, 문단 꾸미기3 - ③ <br> <p> 태그	99 단국강토	02.16	2270
3133	[문장,문서] 문장, 문단 꾸미기2 - ② <body> 속성 태그	99 단국강토	02.16	2512
3132	1-13.문장,문서] 문장, 문단 꾸미기 - ① 문장, 문단 태그 입문	99 단국강토	02.16	2556
3131	1=12.[글자] 움직이는 글자4 - ④ <marquee> 태그 다양한 실전 응용	99 단국강토	02.16	2155
3130	1-11.[글자] 움직이는 글자3 - ③<marquee> 태그 활용2	99 단국강토	02.16	2474
3129	1-10.[글자] 움직이는 글자2 - ② <marquee> 태그 활용	99 단국강토	02.16	2630
3128	1-9.[글자] 움직이는 글자1 - ① <marquee> 태그	99 단국강토	02.16	2593
3127	1-8.[글자] 글자 꾸미기 1 - ③ 글자 태그 정리	99 단국강토	02.16	2379
3126	1-6.[글자] 글자 기본 태그 - ② <font> <size> <color> 태그	99 단국강토	02.16	2862
3125	1-5.[태그] 태그의 이해 - ① <br>태그	99 단국강토	02.16	2006
3124	1-4.[HTML 기초] HTML 구조와 속성 - ④ HTML 들여다보기	99 단국강토	02.16	2399
3123	1-3.[HTML 기초] HTML 문서 - ③ HTML 만들기	99 단국강토	02.16	2567
3122	CSS 사용 표현 - 범위 표현	99 단국강토	02.16	2004
열람중	CSS 사용방법 - 배경표현	99 단국강토	02.16	2310
3120	CSS 사용방법 - 문단표현	99 단국강토	02.16	2047
3119	CSS 사용방법 - 테두리표현	99 단국강토	02.16	2332
3118	CSS 사용방법 - 커서표현	99 단국강토	02.16	2016
3117	CSS 사용방법 - 필터 표현	99 단국강토	02.16	2292
3116	내 전용 스타일 시트입니다.	99 단국강토	02.16	2016
3115	스타일 시트로 이미지 롤오버 만들기	99 단국강토	02.16	1889
3114	프리진의 css	99 단국강토	02.16	2123
3113	TextArea 박스 내부에 밑줄이미지 삽입	99 단국강토	02.16	3868
3112	CSS를 이용한 테이블 라인 표현하기	99 단국강토	02.16	3022
3111	테이블(table)와 관련된 스타일 시트	99 단국강토	02.16	2594
3110	스타일시트로 모서리가 라운딩 처리된 테이블[roundrect]	99 단국강토	02.16	2220
3109	LG전자 스타일시트	99 단국강토	02.16	2428
3108	TextArea 자동으로 늘리기	99 단국강토	02.16	4314
3107	자바스크립트 100선	99 단국강토	02.16	1376
3106	자바스크립트 100선	99 단국강토	02.16	2151

마케팅

특별 마케팅자료

다운로드 마케팅자료

+ 마케팅 더보기

+ 특별 마케팅자료 더보기

+ 다운로드 마케팅자료 더보기

창업,경영

기획,카피,상품전략

동기부여,성취

+ 창업,경영 더보기

+ 기획,카피,상품전략 더보기

+ 동기부여,성취 더보기