css
CSS background 배경 속성은 웹 페이지의 디자인을 꾸미고 여러 시각적 효과를 부여하는 데 사용되는 스타일 속성입니다. 배경 속성은 웹 페이지의 배경 색상, 이미지, 크기, 위치 등을 제어합니다.
background-color 속성은 요소의 배경 색상을 지정하는 데 사용됩니다. 아래는 간단한 HTML과 CSS를 사용한 background-color 속성의 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 배경 색상 적용 예제 */
.box {
width: 300px;
height: 200px;
border: 2px solid #333;
text-align: center;
color: white;
background-color: orange; /* 배경 색상 지정*/
}
</style>
</head>
<body>
<div class="box">
<h1>배경 색상 예제</h1>
<p>배경 색상을 지정한 예제입니다.</p>
</div>
</body>
</html>background-color 를 orange 로 주었습니다.
이 예제에서 background-image 속성은 Unsplash 에서 무작위 이미지를 가져오는 URL을 사용하고 있습니다. background-repeat: no-repeat은 이미지를 반복하지 않도록 설정하며, background-size: cover는 이미지가 요소를 완전히 덮도록 설정합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 배경 이미지 적용 예제 */
.box {
width: 500px;
height: 300px;
/* Unsplash 에서 무작위 이미지 가져오기 */
background-image: url('https://source.unsplash.com/random');
background-repeat: no-repeat; /* 배경 반복 없음 */
background-size: cover; /* 이미지가 요소를 완전히 덮음 */
border: 2px solid #333;
color: white;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<h1>배경 이미지 예제</h1>
<p>배경 이미지를 지정한 예제입니다.</p>
</div>
</body>
</html>background-image 속성과 함께
background-repeat: no-repeat,
background-size: cover 를 적용 했습니다.
background 로 여러 배경 속성을 한 줄로 간결하게 표현이 가능합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 배경 이미지 적용 예제 */
.box {
width: 500px;
height: 300px;
/* Unsplash 에서 무작위 이미지 가져오기 */
/* background 로 여러 속성을 한 줄로 표현 */
background: url('https://source.unsplash.com/random') no-repeat center center/cover;
border: 2px solid #333;
color: white;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<h1>배경 이미지 예제</h1>
<p>배경 이미지를 지정한 예제입니다.</p>
</div>
</body>
</html>
background 로 이미지 url 과 no-repeat center center/cover 를 사용해
이미지의 반복 없이 중앙에 위치하도록 설정
CSS의 background 속성은 웹 페이지의 디자인을 풍부하게 꾸밀 때 필요한 필수적인 도구입니다.
배경 속성으로 색상, 이미지, 크기, 위치 등을 조절하여 원하는 디자인을 구현할 수 있습니다.
Queue란 무엇인가? Java에서 Queue는 데이터 구조의 일종으로, 데이터를 선입선출(FIFO, First-In-First-Out) 방식으로 처리합니다. 이 글에서는 Queue의…
Stack이란 무엇인가? Java에서 Stack은 자료구조의 한 종류로, 데이터를 순서대로 쌓아 올리는 형태로 운영됩니다. 컴퓨터 과학에서…
소개 자바에서 Map 인터페이스는 키(Key)와 값(Value)의 쌍을 저장하는 자료구조입니다. 이는 연관 배열이라고도 불리며, 각 키는…
소개 자바에서 Set은 중복을 허용하지 않는 데이터 집합을 의미합니다. List와 달리 동일한 요소를 여러 번…
해시(Hash)란 무엇인가? 해시(Hash)는 자바 프로그래밍에서 빠르고 효율적인 데이터 저장 및 검색을 위한 핵심적인 개념입니다. 이…