색
CSS에서 색을 표현하는 세 가지 방법
1. 색상 이름으로 표현
2. RGB 색상값으로 표현
3. 16진수 색상값으로 표현
색상 이름으로 표현
CSS에서 색은 색 이름을 사용하여 지정할 수 있다.
HTML에서 색상 이름은 대소문자를 구분하지 않는다.
|
1
2
3
4
5
6
7
8
9
10
11
|
<html>
<body>
<h1 style="background-color:olive;">olive</h1>
<h1 style="background-color:blue;">blue</h1>
<h1 style="background-color:yellow;">yellow</h1>
<h1 style="background-color:purple;">purple</h1>
</body>
</html>
|
cs |
RGB 색상값으로 표현
RGB(Red,Green,Vlue)는 각각 0부터 255까지의 범위를 가진다.
빨강을 최댓값 (255)로 설정하고, 나머지는 0으로 설정하면 RGB(255,0,0)은 빨강색으로 표시된다.
검정 : RGB(0,0,0)
백색 : RGB(255,255,255)
16진수 색상값으로 표현
16진수 색상값은 RGB 색상 값을 각각 16진수로 변환한 것이다.
RGB 색상의 기본색(Red, Green, Blue)은 각각 00부터 FF까지의 범위를 가진다.
EX) 녹색 RGB 색상값 rgb(0,255,0)은 -> 16진수 색상값으로 #00FF00 이 된다.
배경
CSS에서 사용할 수 있는 background 속성
1. background-color (배경색)
2. background-image (배경 이미지)
3. background-repeat (배경 반복)
4. background-position (배경 위치)
5. background-attachment (배경-첨부 파일)
background-color 속성
해당 HTML 요소의 배경색(background color)을 설정한다.
<style>
body { background-color: lightblue; }
h1 { background-color: rgb(255,128,0); }
p { background-color: #FFFFCC; }
</style>
background-image 속성
해당 HTML 요소의 배경으로 나타날 배경 이미지(image)를 설정한다.
설정된 배경 이미지는 기본 설정으로 HTML 요소 전체에 걸쳐 반복되어 나타난다.
<style>
body { background-image: url("/examples/images/img_background_bad.png"); }
</style>
참고 : 배경 이미지를 사용하는 경우, 텍스트를 방해하지 않는 이미지를 사용
background-repeat 속성
배경 이미지는 기본적으로 수평과 수직 방향으로 모두 반복되어 나타난다.
이 속성을 이용하면 수평이나 수직 방향으로만 반복되도록 설정할 수 있다.
수평 반복
|
1
2
3
4
5
|
<style>
body { background-image: url("/examples/images/img_man.png"); background-repeat: repeat-x; }
</style>
|
cs |
수직 반복
|
1
2
3
4
5
|
<style>
body { background-image: url("/examples/images/img_man.png"); background-repeat: repeat-y; }
</style>
|
cs |
반복되지 않고 한 번만 나타나게 설정
|
1
2
3
4
5
|
<style>
body { background-image: url("/examples/images/img_man.png"); background-repeat: no-repeat; }
</style>
|
cs |
background-position 속성
반복되지 않는 배경 이미지의 상대 위치(relative position)를 설정한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<style>
body {
background-image: url("/examples/images/img_man.png");
background-repeat: no-repeat;
background-position: top right;
}
</style>
|
cs |
이 속성에서 사용할 수 있는 키워드의 조합
1. left top
2. left center
3. left bottom
4. right top
5. right center
6. right bottom
7. center top
8. center center
9. center bottom
또한, 퍼센트(%)나 픽셀(px)을 사용하여 상대 위치를 직접 명시할 수도 있다.
이때 상대 위치를 결정하는 기준은 해당 요소의 왼쪽 상단(left top)이 된다.
background-attachment 속성
위차가 설정된 배경 이미지를 해당 위치에 고정시킬 수도 있다.
고정된 배경 이미지는 스크롤과는 무관하게 화면의 위치에서 이동하지 않는다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<style>
body {
background-image: url("/examples/images/img_man.png");
background-repeat: no-repeat;
background-position: left bottom;
background-attachment: fixed;
}
</style>
|
cs |
단축 속성 background :
background 속성 한 번에 적용
|
1
2
3
4
5
|
<style>
body { background: #FFCCCC url("/examples/images/img_man.png") no-repeat left bottom fixed; }
</style>
|
cs |
단축 속성을 사용하는 경우 속성 값의 순서
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
'CSS' 카테고리의 다른 글
| 자주쓰는 속성(width,height,margin,padding,float,text-align,font) (0) | 2020.04.07 |
|---|---|
| CSS 링크 , 리스트 (0) | 2020.04.07 |
| CSS 기본 속성 - 텍스트 , font (0) | 2020.04.07 |
| CSS 적용 (0) | 2020.04.07 |
| CSS 문법, 선택자 (0) | 2020.04.07 |
