728x90
1. background-color : 배경에 색 넣기
tag {
background-color: 원하는 색상;
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>실습해보기</title>
<style>
div {
width: 300px;
height: 300px;
/* 색상코드 입력 가능 ex) #FFD400 */
background-color: yellow;
}
</style>
</head>
<body>
<div>
<h1>test</h1>
</div>
</body>
</html>
https://namu.wiki/w/헥스%20코드 색상 코드 참고
헥스 코드 - 나무위키
이 문서에 수록된 색상과 헥스 코드보다 더 많은 정보를 얻고자 한다면 다음 링크에서 확인이 가능하다. CSS Color Module Level 3 명세를 참고해도 된다. CSS 색상명은 대소문자를 구분하지 않지만 Pasca
namu.wiki
2. background-image : 배경에 이미지 넣기
tag{
background-image: url('이미지의 경로');
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>실습해보기</title>
<style>
div {
width: 300px;
height: 300px;
/* 경로는 현재 컴퓨터에 있는 이미지의 상대 경로를 입력
이외의 절대경로 또는 이미지 URL 사용 가능 */
background-image: url('../test/books.jpg');
}
</style>
</head>
<body>
<div>
<h1>test</h1>
</div>
</body>
</html>이때 배경의 이미지는 현재 배경의 크기보다 커서 왼쪽 위에서 부터 정해진 크키만큼만 보여지고 있다.
그래서 이미지를 어느 부분부터 보여줄 것인지 정해주는 ★background-position★ 사용해 보았다.
| background-position 속성 | 의미 |
| x, y | 좌표 지정 |
| x : 속성 | left, center, right |
| y : 속성 | top, center, bottom |
<style>
div {
width: 300px;
height: 300px;
background-image: url('../test/books.jpg');
/* 중앙을 보여주도록 설정 */
background-position: center;
}
</style>하지만 아직 내가 원하는 이미지를 맞춰서 보여주는 것은 아니다.
그래서 이미지의 크기를 조절해주는 ★background-size★ 사용해 보았다.
| background-size 속성 | 의미 |
| auto | 이미지 크기를 유지 |
| length | 가로, 세로 지정 |
| cover | 비율을 유지하며 배경을 사용하는 요소를 다 채울 수 있게 이미지를 확대 또는 축소 |
| contain | 비율을 유지하며 배경을 사용하는 요소를 벗어나지 않는 최대 크기로 이미지를 확대 또는 축소 |
<style>
div {
width: 300px;
height: 300px;
background-image: url('../test/books.jpg');
/* 현재 정해준 배경의 크기를 이미지가 완전히 덮을 수 있도록 설정
이외의 auto, 길이 지정 등 가능 */
background-size: cover;
}
</style>728x90
'WEB > CSS' 카테고리의 다른 글
| [CSS] 다중 클래스 접근 및 Font-weight : Bold 설정 (0) | 2024.05.16 |
|---|---|
| [CSS] 글자 관련 CSS 정리 (0) | 2023.02.16 |
| [CSS] 여백(margin/padding) 기본 개념 정리 (0) | 2023.02.12 |
| [CSS] CSS 선택자(Selector) 정리 (0) | 2023.02.12 |
| [CSS] 구글 웹 폰트 사용해보기 (0) | 2023.02.07 |
