목차
- CSS 색상 표현
1-1. 영문 색상 이름
1-2. RGB값 기준 16진수
1-3. RGB/RGBA
1-4. HSL/HSLA - 배경 스타일
2-1. background-color
2-2. background-clip
2-3. background-image
2-4. background-repeat
2-5. background-size
2-6. background-position
2-7. background-origin
2-8. background-attachment
2-9. background
1. CSS 색상 표현
1-1. 영문 색상 이름
<head>
<style>
body {
/* 색상명 */
background-color: pink;
}
</style>
</head>- 영문으로 정의된 색상 이름으로 표현한다.
- 표현 방법 : red, black, blue 등
1-2. RGB값 기준 16진수
<head>
<style>
body {
/* Hex Code(16진수) */
background-color: #FFC0CB;
}
</style>
</head>- RGB값 기준으로 생성된 16진수 헥스 코드(Hex Code)로 작성할 수 있다.
- 표현 방법 : #16진수 3자리 입력
- 예를 들어 #ff0000은 red;와 같다.
1-3. RGB/RGBA
<head>
<style>
body {
/* RGB(적녹청) */
background-color: rgb(255, 192, 203);
background-color: rgba(255, 192, 203, 0.5);
}
</style>
</head>- RGB값을 Red, Green, Blue 정도를 0~255로 지정한다.
- 표현 방법 : rgb(0~255, 0~255, 0~255) 입력
- RGBA는 투명도까지 적용할 수 있다. 투명도는 투명 상태인 0부터 불투명 상태인 1까지를 다룬다.
- 표현 방법 : rgba(0~255, 0~255, 0~255, 0~1) 입력
1-4. HSL/HSLA
<head>
<style>
body {
/* HSL(색조, 채도, 명도) */
background-color: hsl(350, 100%, 88%);
background-color: hsla(350, 100%, 88%, 0.5);
}
</style>
</head>- HSL 통해 색조, 채도, 명도에 대해 다룰 수 있다.
- 표현 방법 : hsl(색상값, 채도값(%), 명도값(%)) 입력
- HSLA도 마찬가지로 Alpha라는 속성 통해 투명도를 지정한다. 0~1까지 투명한 정도를 표현할 수 있다.
- 표현 방법 : hsla(색상값, 채도값(%), 명도값(%), 투명도) 입력
2. 배경 스타일
2-1. background-color
선택자 { background-color : 색상표현; }
<head>
<style>
div-bg { background-color: white; }
</style>
</head>
<body>
<div id="div-bg">
...................
</div>
</body>- 배경색을 지정하는 속성이다.
- white; 처럼 속성값으로서 ① 영문 색상명을 기재하거나, 나아가 ② 16진수 헥스 코드, ③ RGB/RGBA, ④ HSL/HSLA로도 적용할 수가 있다.
2-2. background-clip
선택자 { background-clip : 속성값; }
- 배경 범위 조절하는 속성이다.
- '개발자 도구'에서 Styles 영역을 참고해 살피면 도움된다: margin, border, padding, content
- 속성값으로 border-box, padding-box, content-box가 쓰인다.
속성값A. border-box;
<head>
<style>
#div1 { background-clip: border-box; }
</style>
</head>- 흰 배경 영역을 기준으로 살피면 된다.
- 박스 모델의 가장 바깥 테두리인 border-line까지 포함한다.
속성값B. padding-box;
<head>
<style>
#div2 { background-clip: padding-box; }
</style>
</head>- 테두리 제외한 padding 영역까지만 포함한다.
속성값C. content-box;
<head>
<style>
#div3 { background-clip: content-box; }
</style>
</head>- 내용(content) 부분만 적용한다.
2-3. background-image
선택자 { background-image : url(경로); }
<head>
<style>
#bg-img { background-image: url("../resources/images/bgsample.PNG"); }
</style>
</head>- 요소에 배경 지정하는 속성이다.
- 배경은 기본적으로 요소 크기만큼 반복해 채워진다.
2-4. background-repeat
선택자 { background-repeat : 속성값; }
| repeat | 가로, 세로 반복 |
| repeat-x | 가로만큼 반복(폭) |
| repeat-y | 세로만큼 반복(높이) |
| no-repeat | 이미지 한 번만 출력 |
- 배경 이미지 반복 출력 여부를 설정한다.
2-5. background-size
선택자 { background-size : 속성값; }
| auto | 이미지 원본 크기만큼 표시 |
| contatin | 요소 안에 이미지가 들어올 수 있게 확대/축소 |
| cover | 요소 범위를 이미지가 덮을 수 있도록 확대/축소 |
| 고정 크기(px) | 수치화된 픽셀(px) 값으로 고정된 가로, 세로 표현 |
| 상대 크기(%) | 수치화된 퍼센트(%) 값으로 상대적 가로, 세로 표현 |
<head>
<style>
#bg-img {
background-image: url("../resources/images/bgsample.PNG");
background-size: 150px 100px;
background-size: 80% 80%;
}
</style>
</head>- 가로 150px, 세로 100px인 고정 사이즈를 지정한 예시이다.
- 그 아래서는 다시금 가로와 세로 크기를 80%로 정정하였다. 이 경우 #bg-img가 가리키는 <div id="bg-img"> 영역의 80%씩을 의미한다. 따라서 출력되는 창의 크기에 맞춰 배경 크기 역시 조정된다.
2-6. background-position
선택자 { background-position : 속성값; }
| 수평 | left / center / right |
| 수직 | top / center / bottom |
| 크기값(px) / 백분율 | 수치화된 값으로 가로, 세로 표현 |
<head>
<style>
#bg-img {
background-position: left top;
background-position: right top;
background-position: center top;
background-position: left bottom;
background-position: right bottom;
background-position: center bottom;
background-position: center center;
background-position: 30px 50px;
}
</style>
</head>- 배경 요소의 위치를 설정한다.
- 픽셀(px) 통해 원하는 지점을 지정할 수도 있다.
2-7. background-origin
선택자 { background-origin : 속성값; }
| border-box | 테두리 기준 |
| padding-box | 테두리 제외한 패딩 기준 |
| content-box | 내용부분 기준 |
- 배경 이미지를 배치할 때 기준을 지정하는 속성이다.
2-8. background-attachment
선택자 { background-attachment : 속성값; }
| scroll | 기본값, 움직임 |
| fixed | 움직이지 않게 고정시킴 |
- 웹 페이지상에서 위아래로 스크롤을 움직일 때, 배경이미지가 뒤따라 움직이거나 혹은 움직이지 않고 고정되게끔 만드는 속성이다.
- fixed를 통해 고정시키면 스크롤을 따라다니는 모양새를 보인다.
2-9. background
선택자 { background : image값 repea값 attachmen값 position값 clip값 origin값 size값; }
- 배경 이미지에 대한 속성을 일괄 적용할 수 있다.
'Frontend > CSS' 카테고리의 다른 글
| [CSS3] 레이아웃 스타일 | display | z-index | flex | grid (0) | 2022.02.13 |
|---|---|
| [CSS3] 테두리 스타일 | border-style | box-shadow (0) | 2022.02.12 |
| [CSS3] 목록 스타일 | 불릿 기호 변경/삭제 | list-style (0) | 2022.02.11 |
| [CSS3] 텍스트 스타일 | 문단 스타일 | font | text (0) | 2022.02.11 |
| [CSS3] link | 외부 스타일시트 | 웹 폰트 | CSS 단위 (0) | 2022.02.10 |
