CSS - background-image
2020. 7. 31. 14:32ㆍWeb(CSS)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
|
@charset "UTF-8";
body{border: 1px solid red;
margin: 0;
background-image: url('img/jpg/gorilla.jpg');
background-repeat: no-repeat;
background-position: center 50%;
background-size: 50% 50%;
background-attachment: fixed;}
h1{background-color: #00a;
margin: 4em 0;
padding: 0.5em 1em;
color: #fff;}
/* 각 목록마다 배경이미지로 처리해서... */
ol>li{list-style: none; /* 목록앞의 기본 모양을 제거 */
background-image: url("img/gif/colorpicker.gif");/* 배경지정 */
background-repeat: no-repeat;/*배경이 하나만 나오게*/
background-size: 10px 10px;/* 배경의 크기를 조절 */
background-position: left 10px;/* 배경의 위치 가로세로 조절 */
padding-left: 1em}/* 배경과 겹친 글자를 우측이로 이동 */
ul,ol{line-height: 1.8;}
ul>li{color: #00a;
font-weight: bold;
font-size: 1.2em;}
ol>li{color: #000;
font-weight: normal;
font-size: 0.8em;}
section{
border: 4px dashed #ccc;
margin: 3.5em 1em;
padding: 1em;
}
section>h2{
border-bottom: 4px double #ccc;
color: #337;
}
/*background - attachment*/
.attp{border: 1px solid;
margin: 3em 1em;
padding: 1em;
line-height: 1.8;
width: 500px; height: 300px;
overflow: auto; /* 영역밖의 넘치는 내용이 있으면 스크롤바 생성 */
background-image: url("img/jpg/turkey.jpg");
}
.attp:first-line {
font-size: 1.5em;
font-weight: bold;
color: #0a3;
}
.att01{background-attachment: scroll;}
.att02{background-attachment: fixed;}
.att03{background-attachment: local;}
.att-txt{
background-color: #005;
color: #fff;
white-space: pre; /* 공백 처리 그대로 살려줌 */
width: 500px;
float: right; /* 띄워서 우측으로 배치 */
}
//-----------------------------------------------
@charset "UTF-8";
body{border: 1px solid red;
margin: 0;
background-image: url('img/jpg/gorilla.jpg');
background-repeat: no-repeat;
background-position: center 50%;
background-size: 50% 50%;
background-attachment: fixed;}
h1{background-color: #00a;
margin: 4em 0;
padding: 0.5em 1em;
color: #fff;}
/* 각 목록마다 배경이미지로 처리해서... */
ol>li{list-style: none; /* 목록앞의 기본 모양을 제거 */
background-image: url("img/gif/colorpicker.gif");/* 배경지정 */
background-repeat: no-repeat;/*배경이 하나만 나오게*/
background-size: 10px 10px;/* 배경의 크기를 조절 */
background-position: left 10px;/* 배경의 위치 가로세로 조절 */
padding-left: 1em}/* 배경과 겹친 글자를 우측이로 이동 */
ul,ol{line-height: 1.8;}
ul>li{color: #00a;
font-weight: bold;
font-size: 1.2em;}
ol>li{color: #000;
font-weight: normal;
font-size: 0.8em;}
section{
border: 4px dashed #ccc;
margin: 3.5em 1em;
padding: 1em;
}
section>h2{
border-bottom: 4px double #ccc;
color: #337;
}
/*background - attachment*/
.attp{border: 1px solid;
margin: 3em 1em;
padding: 1em;
line-height: 1.8;
width: 500px; height: 300px;
overflow: auto; /* 영역밖의 넘치는 내용이 있으면 스크롤바 생성 */
background-image: url("img/jpg/turkey.jpg");
}
.attp:first-line {
font-size: 1.5em;
font-weight: bold;
color: #0a3;
}
.att01{background-attachment: scroll;}
.att02{background-attachment: fixed;}
.att03{background-attachment: local;}
.att-txt{
background-color: #005;
color: #fff;
white-space: pre; /* 공백 처리 그대로 살려줌 */
width: 500px;
float: right; /* 띄워서 우측으로 배치 */
}
|
cs |
배경 이미지를 어떻게 처리할 것인가에 대한 여러 기능을 배워보았다.
이것저것 적용시켜 보면서 자신이 원하는 구도에 따라 이미지를 적용시키고 프레임을 적용시키면 될 것 같다.
'Web(CSS)' 카테고리의 다른 글
| CSS - overflow (0) | 2020.07.31 |
|---|---|
| CSS - float (0) | 2020.07.31 |
| CSS- display (0) | 2020.07.31 |
| CSS - padding (0) | 2020.07.27 |
| CSS - margin (0) | 2020.07.27 |