※ CSS 컬러
1. 색상 이름으로 표현할 수 있다.
- red, white, deeppink 등
2. RGB 색상값으로 표현할 수 있다.
- rgb(a, b, c)
- rbga(a, b, c, d) - d는 alpha 투명도(투명도는 0~1까지의 실수로 표현하며 높을 수록 불투명하다.)
3. 16진수 색상값으로 표현할 수 있다.
- rgb 색상값을 16진수로 표현한다. #000000 ~ #ffffff
* 컬러 사이트
https://materializecss.com/color.html
Color - Materialize
To apply a background color, just add the color name and light/darkness as a class to the element. This is a card panel with a teal lighten-2 class This is a card panel with a teal lighten-2 class
materializecss.com
* 특정 웹 페이지의 색상 알아내는 법
- f12를 눌러 개발자 도구에 들어가고 스타일 부분에 있는 color를 클릭한다. color를 클릭하면 해당 색상이 나오는데 그곳에 있는 스포이트를 클릭 후 내가 알아내고 싶은 색상을 클릭하면 해당 rgb 코드를 알아낼 수 있다. 만약 스타일 부분에 color가 없으면 페이지 요소 검색을 해서 나타낼 수 있다.
※ CSS의 배경
* 무료 배경 이미지 사이트
1. background-color
- html 요소의 배경색을 설정한다.
<head>
<style>
div {
width: 80%;
padding: 20px;
border: 1px solid black;
}
.color { background-color: aquamarine; }
</style>
</head>
<body>
<h2>CSS 배경 - 1</h2>
<div class="color">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
</body>
2. background-image
- html 요소의 배경으로 나타날 배경이미지를 설정한다. 배경 이미지는 기본 설정으로 바둑판 형식으로 반복되어 나타난다.
3. background-repeat
- 배경 이미지를 수평이나 수직 방향으로 반복하거나 반복하지 않도록 설정한다.
<head>
<title>CSS 배경 - 1</title>
<style>
.image {
background-image: url(./bg1.jpg);
height: 600px;
width: 900px;
/* y축으로는 더이상 반복되지 않는다. */
background-repeat: repeat-x;
/* x축으로는 더이상 반복되지 않는다. */
background-repeat: repeat-y;
/* 배경의 크기가 그림의 크기보다 작아도 반복해서 출력되지 않는다. */
background-repeat: no-repeat;
}
</style>
<head>
<body>
<h2>CSS 배경 - 1</h2>
<div class="image"></div>
</body>
4. background-position
- 반복되지 않는 배경 이미지의 상대 위치를 설정한다.%나 px을 이용해서 위치를 직접 설정할 수 있다. 상대 위치를 결정하는 기준을 해당 요소의 왼쪽 상단이다.
| left top | center top | right top |
| left center | center | right center |
| left bottom | center bottom | right bottom |
<head>
<title>CSS 배경 - 2</title>
<style>
/* 사진의 우하단 */
.bg1 { background-position: right bottom; }
/* 사진의 중앙 */
.bg2 { background-position: center; }
/* */
.bg3 { background-position: 10% 100px; }
</style>
</head>
<body>
<h2>CSS 배경 - 2</h2>
<div class="bg1">div>
<div class="bg2">div>
<div class="bg3">div>
</body>
5. background-attachment
- 위치가 설정된 배경 이미지를 원하는 위치에 고정시킬 수 있다. 고정된 배경 이미지는 스크롤과 무관하게 화면에 위치해서 움직이지 않는다.
<head>
<title>CSS 배경 - 3</title>
<style>
body {
background-attachment: fixed;
}
</style>
</head>
<body>
<h2>CSS 배경 - 3</h2>
<p></p>
</body>
6. background-size
- 배경 이미지의 크기를 설정한다. px, %를 사용한다.
* contain: 배경 이미지의 가로, 세로가 요소보다 작다는 조건하에 가능하다. 이미지의 가로, 세로 비율은 유지된다. 배경 이미지의 크기는 요소의 크기보다 작거나 같다.
* cover: 배경 이미지의 가로, 세로가 요소보다 크다는 조건하에 가능하다. 이미지의 가로, 세로 비율은 유지된다. 배경 이미지의 크기는 요소의 크기보다 크거나 같다.
<head>
<title>CSS 배경 - 4</title>
<style>
.bg1 {
background-size: 50px 100px;
}
.bg2 {
background-size: 400px;
background-position: center;
}
.bg3 {
width: 30%;
height: 200px;
background-size: cover;
}
.bg4 {
background-size: contain;
}
</style>
</head>
<body>
<h2>CSS 배경 - 4</h2>
<div class="bg1"></div>
<div class="bg2"></div>
<div class="bg3"></div>
<div class="bg4"></div>
</body>
7. background
- 배경 속성을 한번에 적용한다.
background: 배경색 url(파일경로) 반복여부 위치 고정
/* 사이즈는 위치 다음에 나오지만 따로 빼서 정리하는 것이 낫다. */
<head>
<title>CSS 배경 - 5</title>
<style>
body {
background: deepskyblue url(./bg2.jpg) no-repeat center fixed;
background-size: cover;
}
</style>
</head>
<body>
<h2>CSS 배경 - 5</h2>
</body>'CSS' 카테고리의 다른 글
| 국비 수업 28일 차(22.11.10.) - CSS position (0) | 2022.11.11 |
|---|---|
| 국비 수업 27일 차(22.11.09.) - 박스 모델 (0) | 2022.11.11 |
| 국비 수업 26일 차(22.11.08.) - CSS 텍스트 (0) | 2022.11.10 |
| 국비 수업 25일 차(22.11.07.) - CSS 선택자 (0) | 2022.11.08 |
| 국비 수업 25일 차(22.11.07.) - CSS, 문법 (0) | 2022.11.08 |
