이 실습에서는 CSS 를 사용하여 고급 배경 스타일을 적용하는 방법을 배우고, 색상 및 이미지 조작을 통해 웹 페이지 디자인을 향상시키는 데 중점을 둡니다. 이 실습에서는 HTML 요소에 배경색 설정, 배경 이미지 추가 및 크기 조정, 이미지 위치 및 반복 제어, 여러 배경 속성을 결합하여 시각적으로 매력적인 웹 레이아웃을 만드는 데 필요한 필수 기술을 다룹니다.
실습을 통해 이름이 지정된 색상, 16 진수 코드 및 RGB 함수를 사용하여 배경색을 지정하는 다양한 방법을 탐색하고, 정확한 크기 조정 및 위치 지정 기술로 배경 이미지를 통합하는 방법을 배웁니다. 이 실습이 끝나면 CSS 배경 속성을 사용하여 더 동적이고 매력적인 웹 페이지 디자인을 만드는 실질적인 기술을 습득하게 될 것입니다.
이 단계에서는 CSS 를 사용하여 HTML 요소에 배경색을 설정하는 방법을 배웁니다. 배경색은 다양한 요소에 색상을 추가하여 웹 페이지의 시각적 디자인을 향상시키는 기본적인 방법입니다.
먼저 배경색 스타일링을 시연할 HTML 파일을 만들어 보겠습니다. WebIDE 를 열고 ~/project 디렉토리에 styles.html이라는 새 파일을 만듭니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Background Color Example</title>
<style>
/* 여기에 CSS 를 추가할 것입니다 */
</style>
</head>
<body>
<div class="box1">First Box</div>
<div class="box2">Second Box</div>
<p class="paragraph">This is a paragraph with a background color.</p>
</body>
</html>이제 다양한 요소에 배경색을 설정하기 위해 CSS 를 추가해 보겠습니다. HTML 파일의 <style> 섹션을 업데이트합니다.
.box1 {
background-color: blue;
color: white;
padding: 20px;
margin: 10px;
}
.box2 {
background-color: #ff5733;
color: white;
padding: 20px;
margin: 10px;
}
.paragraph {
background-color: rgb(200, 230, 255);
padding: 15px;
}이 예시에서는 세 가지 방법으로 배경색을 지정하는 방법을 시연했습니다.
blue)#FF5733)rgb(200, 230, 255))파일을 저장하고 웹 브라우저에서 열어 요소에 적용된 다양한 배경색을 확인해 보세요.
이 단계에서는 CSS 를 사용하여 HTML 요소에 배경 이미지를 추가하고 크기를 제어하는 방법을 배웁니다. ~/project 디렉토리에 있는 styles.html 파일을 수정하여 이전 예제를 계속 확장해 보겠습니다.
샘플 이미지는 ~/project 디렉토리에 있습니다.
이제 styles.html 파일을 다음 내용으로 업데이트합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Background Image Sizing</title>
<style>
.image-container {
width: 500px;
height: 300px;
border: 2px solid black;
margin: 20px;
}
.cover-background {
background-image: url("background-sample.jpg");
background-size: cover;
}
.contain-background {
background-image: url("background-sample.jpg");
background-size: contain;
}
.custom-size-background {
background-image: url("background-sample.jpg");
background-size: 200px 150px;
}
</style>
</head>
<body>
<div class="image-container cover-background">
Cover: Fills entire container
</div>
<div class="image-container contain-background">
Contain: Fits entire image
</div>
<div class="image-container custom-size-background">
Custom Size: 200x150 pixels
</div>
</body>
</html>이 예시는 배경 이미지 크기를 조절하는 세 가지 다른 방법을 보여줍니다.
background-size: cover; - 컨테이너 전체를 채우도록 이미지를 확장합니다.background-size: contain; - 컨테이너 전체에 맞도록 이미지를 확장합니다.background-size: 200px 150px; - 배경 이미지에 특정 픽셀 크기를 설정합니다.이 HTML 파일을 브라우저에서 열면 세 가지 다른 배경 이미지 크기 조정 기법을 볼 수 있습니다.
이 단계에서는 CSS 를 사용하여 배경 이미지의 위치를 제어하는 방법을 배웁니다. ~/project 디렉토리에 있는 styles.html 파일을 계속 수정하여 다양한 배경 위치 지정 기법을 시연해 보겠습니다.
styles.html 파일을 다음 내용으로 업데이트합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Background Image Positioning</title>
<style>
.image-container {
width: 500px;
height: 300px;
border: 2px solid black;
margin: 20px;
color: white;
font-weight: bold;
}
.top-left {
background-image: url("background-sample.jpg");
background-size: cover;
background-position: top left;
}
.center {
background-image: url("background-sample.jpg");
background-size: cover;
background-position: center;
}
.bottom-right {
background-image: url("background-sample.jpg");
background-size: cover;
background-position: bottom right;
}
.custom-position {
background-image: url("background-sample.jpg");
background-size: cover;
background-position: 20% 80%;
}
</style>
</head>
<body>
<div class="image-container top-left">Top Left Position</div>
<div class="image-container center">Center Position</div>
<div class="image-container bottom-right">Bottom Right Position</div>
<div class="image-container custom-position">Custom Position (20% 80%)</div>
</body>
</html>이 예시는 배경 이미지를 위치시키는 네 가지 다른 방법을 보여줍니다.
background-position: top left; - 이미지를 왼쪽 상단 모서리에 배치합니다.background-position: center; - 이미지를 컨테이너 중앙에 배치합니다.background-position: bottom right; - 이미지를 오른쪽 하단 모서리에 배치합니다.background-position: 20% 80%; - 백분율 값을 사용하여 사용자 정의 위치를 지정합니다.이 HTML 파일을 브라우저에서 열면 다양한 위치 지정 값이 배경 이미지 배치에 어떤 영향을 미치는지 확인할 수 있습니다.
이 단계에서는 background-repeat CSS 속성을 사용하여 배경 이미지 반복을 제어하는 방법을 배웁니다. ~/project 디렉토리에 있는 styles.html 파일을 계속 수정하여 다양한 반복 기법을 시연해 보겠습니다.
styles.html 파일을 다음 내용으로 업데이트합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Background Image Repetition</title>
<style>
.image-container {
width: 500px;
height: 300px;
border: 2px solid black;
margin: 20px;
color: white;
font-weight: bold;
}
.repeat {
background-image: url("background-sample.jpg");
background-size: 100px 100px;
background-repeat: repeat;
}
.repeat-x {
background-image: url("background-sample.jpg");
background-size: 100px 100px;
background-repeat: repeat-x;
}
.repeat-y {
background-image: url("background-sample.jpg");
background-size: 100px 100px;
background-repeat: repeat-y;
}
.no-repeat {
background-image: url("background-sample.jpg");
background-size: 200px 200px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="image-container repeat">Repeat (Default)</div>
<div class="image-container repeat-x">Repeat X (Horizontal)</div>
<div class="image-container repeat-y">Repeat Y (Vertical)</div>
<div class="image-container no-repeat">No Repeat</div>
</body>
</html>이 예시는 네 가지 다른 배경 이미지 반복 기법을 보여줍니다.
background-repeat: repeat; - 이미지를 가로 및 세로로 반복합니다 (기본값).background-repeat: repeat-x; - 이미지를 가로로만 반복합니다.background-repeat: repeat-y; - 이미지를 세로로만 반복합니다.background-repeat: no-repeat; - 이미지가 반복되지 않도록 합니다.이 HTML 파일을 브라우저에서 열면 다양한 반복 값이 배경 이미지 표시에 어떻게 영향을 미치는지 확인할 수 있습니다.
이 단계에서는 여러 배경 속성을 결합하여 더 복잡하고 흥미로운 배경 디자인을 만드는 방법을 배웁니다. ~/project 디렉토리에 있는 styles.html 파일을 수정하여 고급 배경 스타일링 기법을 시연해 보겠습니다.
styles.html 파일을 다음 내용으로 업데이트합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Multiple Background Properties</title>
<style>
.image-container {
width: 600px;
height: 400px;
border: 2px solid black;
margin: 20px;
color: white;
font-weight: bold;
padding: 20px;
}
.multiple-backgrounds {
background-image:
linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url("background-sample.jpg");
background-size: cover, cover;
background-position: center, center;
background-repeat: no-repeat, no-repeat;
}
.layered-backgrounds {
background-image:
url("small-pattern.jpg"), linear-gradient(to right, #ff6b6b, #4ecdc4);
background-size:
100px 100px,
cover;
background-position:
top left,
center;
background-repeat: repeat, no-repeat;
}
</style>
</head>
<body>
<div class="image-container multiple-backgrounds">
Overlay Background with Image
</div>
<div class="image-container layered-backgrounds">
Layered Background with Pattern and Gradient
</div>
</body>
</html>small-pattern.jpg는 ~/project 디렉토리에 있습니다.
이 예시는 두 가지 고급 배경 기법을 보여줍니다.
오버레이를 사용한 여러 배경:
계층화된 배경:
이 HTML 파일을 브라우저에서 열면 여러 배경 속성을 사용하여 복잡하고 시각적으로 흥미로운 디자인을 만들 수 있습니다.
이 실습에서는 포괄적인 단계별 접근 방식을 통해 CSS 에서 배경 스타일을 적용하는 방법을 학습했습니다. 이 실습에서는 이름이 지정된 색상, 16 진수 코드 및 RGB 함수와 같은 다양한 방법을 사용하여 배경색을 설정하고 배경 이미지 조작을 탐색하는 것을 포함하여 웹 페이지 디자인을 향상시키는 필수 기술을 다루었습니다.
실습 연습에서는 HTML 요소에 배경 이미지를 추가하고, 크기, 위치 및 반복을 제어하며, 여러 배경 속성을 결합하는 방법을 시연했습니다. 실습 예제를 통해 학습자는 다양한 스타일링 기법을 사용하여 시각적으로 매력적이고 동적인 웹 페이지 배경을 만드는 CSS 사용에 대한 실질적인 기술을 습득했습니다.
