1.1 background-color 속성
background-color 속성은 요소의 배경색을 지정해줘. 이 속성을 통해 배경색을 설정해서
콘텐츠를 시각적으로 구분하고 텍스트와 다른 요소의 가독성을 향상시킬 수 있어.
값:
- 색상 이름:
red,blue,green같은 미리 정의된 색상 이름을 사용할 수 있어 - 16진수 값: 예를 들어
#ff0000,#00ff00,#0000ff - RGB: 예를 들어
rgb(255, 0, 0),rgb(0, 255, 0),rgb(0, 0, 255) - RGBA: 예를 들어
rgba(255, 0, 0, 0.5)(반투명 빨강) - HSL: 예를 들어
hsl(0, 100%, 50%),hsl(120, 100%, 50%),hsl(240, 100%, 50%) - HSLA: 예를 들어,
hsla(0, 100%, 50%, 0.5)(반투명 빨강).
사용 예:
CSS
.color-red {
background-color: red;
}
.color-hex {
background-color: #3498db;
}
.color-rgba {
background-color: rgba(46, 204, 113, 0.7);
}
HTML
<body>
<div class="color-red">이 요소는 빨간색 배경을 갖고 있어.</div>
<div class="color-hex">이 요소는 16진수로 지정된 색상의 배경을 갖고 있어.</div>
<div class="color-rgba">이 요소는 반투명한 초록색 배경을 갖고 있어.</div>
</body>
코드 설명:
background-color: red;: 요소의 배경을 빨간색으로 설정background-color: #3498db;: 16진수 값으로 배경색을 설정background-color: rgba(46, 204, 113, 0.7);: RGBA를 사용하여 반투명 초록색 배경을 설정
1.2 background-image 속성
background-image 속성은 요소의 배경 이미지를 설정해줘. 이 속성을 통해 시각적으로 매력적인 배경을 만들어
웹 페이지의 디자인과 인식을 향상시킬 수 있어.
이 속성에는 이미지의 URL을 값으로 전달해야 하는데, 예를 들어 url('image.jpg')를 설정하면 돼.
사용 예:
CSS
.background-url {
background-image: url('https://via.placeholder.com/150');
width: 150px;
height: 150px;
border: 1px solid #000;
}
HTML
<body>
<div class="background-url">이 요소는 배경 이미지를 갖고 있어.</div>
</body>
코드 설명:
background-image: url('https://via.placeholder.com/150');: 요소의 배경으로 이미지를 설정. 여기서는 이미지 URL을 사용했어
background-image 사용 장점:
- 시각적 매력: 배경 이미지는 더 매력적이고 흥미로운 웹 페이지를 만드는 데 도움을 줘.
- 컨텍스트: 배경 이미지는 페이지 콘텐츠의 시각적 인식을 강화하며 추가적인 컨텍스트나 정보를 제공할 수 있어.
- 브랜딩: 배경 이미지는 브랜드의 일부가 될 수 있으며, 사이트의 일관된 스타일과 인지도를 유지하는 데 도움을 줘.
배경 이미지 사용 팁:
- 이미지 최적화: 페이지의 성능을 향상시키려면, 품질을 크게 손상시키지 않고 이미지의 크기를 줄이는 게 중요해
- 브라우저 호환성: 사용된 이미지가 모든 대상 브라우저에서 제대로 표시되는지 확인해
- 대체 텍스트: 중요한 의미를 가진 이미지에 대해서는, 제한된 능력을 가진 사용자들을 위해 정보를 전달할 수 있는 텍스트 설명 같은 대체 방법을 준비해야 해
1.3 background-color와 background-image의 동시 사용
background-color와 background-image 속성은 복잡하고 매력적인 배경을 만들기 위해 함께 사용할 수 있어.
예를 들어, 배경 이미지가 로드되지 않을 경우 표시될 수 있는 배경색을 설정하거나,
컬러 배경과 반투명 이미지를 함께 사용할 수 있지.
사용 예:
CSS
.combined-background {
background-color: #3498db;
background-image: url('https://via.placeholder.com/150');
width: 300px;
height: 300px;
color: white;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border: 1px solid #000;
}
HTML
<body>
<div class="combined-background">
이 요소는 이미지와 컬러 배경이 결합된 배경을 갖고 있어.
</div>
</body>
코드 설명:
background-color: #3498db;: 배경색을 설정background-image: url('https://via.placeholder.com/150');: 배경 이미지를 설정width: 300px;height: 300px;: 요소의 크기를 설정color: white;: 배경에서 텍스트의 가독성을 높이기 위해 텍스트 색상을 설정display: flex;align-items: center;justify-content: center;text-align: center;: 요소 안의 텍스트를 가운데 정렬border: 1px solid #000;: 요소 주위에 테두리를 추가하여 시각적으로 강조
GO TO FULL VERSION