코드 그라데이션
9. 배경색과 배경 이미지 본문
배경 지정하는 속성
background-color : 배경 색 지정하는 속성
- 스타일 상속에 따르면 글꼴이나 글자 크기 등은 <body>태그 선택자에서 지정하면 문서 전체에 상속
- 따로 하위 요소에서 스타일을 수정하지 않는 한 문서 전체에 똑같이 적용된다.
- 예외로 background-color 값은 상속되지 않는다.
background-clip : 배경색의 적용 범위를 조정하는 속성
속성값
예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>BGClip</title>
<style>
.desc {
border:5px dotted red;
background-color:yellowgreen;
width:350px;
padding:20px;
margin-right:20px;
float:left;
}
#clip-border {
background-clip: border-box;
}
#clip-padding {
background-clip: padding-box;
}
#clip-content {
background-clip: content-box;
}
</style>
</head>
<body>
<div id="container">
<div class="desc" id="clip-border">
<h3>고양이 </h3>
<p>현존하는 모든 집고양이들은 대략 2000만년 전에 하나의 조상으로부터 갈라져 나온 것으로 추측되며, 그 중 고양이의 조상으로 여겨지는 것은 아프리카들고양이(Felis lybica)라는 동물이다. 중동에 살던 인류가 약 만년 전에 사막고양이를 가축화하여 인간과 함께 살기 시작한 것으로 생각된다</p>
</div>
<div class="desc" id="clip-padding">
<h3>고양이 </h3>
<p>현존하는 모든 집고양이들은 대략 2000만년 전에 하나의 조상으로부터 갈라져 나온 것으로 추측되며, 그 중 고양이의 조상으로 여겨지는 것은 아프리카들고양이(Felis lybica)라는 동물이다. 중동에 살던 인류가 약 만년 전에 사막고양이를 가축화하여 인간과 함께 살기 시작한 것으로 생각된다</p>
</div>
<div class="desc" id="clip-content">
<h3>고양이 </h3>
<p>현존하는 모든 집고양이들은 대략 2000만년 전에 하나의 조상으로부터 갈라져 나온 것으로 추측되며, 그 중 고양이의 조상으로 여겨지는 것은 아프리카들고양이(Felis lybica)라는 동물이다. 중동에 살던 인류가 약 만년 전에 사막고양이를 가축화하여 인간과 함께 살기 시작한 것으로 생각된다</p>
</div>
</div>
</body>
</html>
실행 결과
background-image : 웹 요소에 배경 이미지를 삽입
예제 - 기본적인 배경 이미지 삽입
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배경 이미지</title>
<style>
body {
background-image :url('images/pandas.jpg');
}
</style>
</head>
<body>
</body>
</html>
실행 결과 - 전체가 꽉 참
background-repeat : 배경 이미지의 반복 방법 지정
속성값
background-position : 배경 이미지의 위치 조절
- 속성값을 2개로 지정한다면 첫 번째 값은 수평 위치의 값이 되고, 두 번째 값은 수직 위치의 값이다.
- 속성값을 하나만 지정한다면, 그 값은 수평 위치값으로 간주.
- 수직 위치값은 50% 나 center 로 간주.
예제 - 불릿 대신에 배경 이미지 사용하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>불릿 대신 이미지</title>
<style>
ul {
list-style:none; /* 불릿 없앰 */
margin-left:-30px; /* 왼쪽 여백 줄임 */
}
li {
background-image:url('images/LCD.png'); /* 배경 이미지 파일 */
background-size: 20px;
background-repeat:no-repeat; /* 배경 이미지 반복 안함 */
background-position:left center; /* 배경 이미지 위치 */
padding-left:50px; /* 왼쪽 패딩 (박스 모델) */
line-height:40px; /* 줄간격 */
}
</style>
</head>
<body>
<h1>웹개발</h1>
<ul>
<li>Java</li>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Database</li>
</ul>
</body>
</html>
실행 결과
background-origin : 배경 이미지의 적용 범위를 조절
- 박스 모델에 패딩이나 테두리가 있다면 배경 이미지를 패딩까지 표시하거나 테두리까지 포함해서 지정할 수도 있다.
속성값
background-attatchment : 배경 이미지를 고정하는 속성
- 배경 이미지가 있는 웹 문서를 브라우저에서 열고 스크롤 막대를 위아래로 조절하면 문서 전체가 움직인다.
- 그러므로 배경 이미지도 함께 이동한다.
속성값
예제 - 배경 이미지 배치하고 고정하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배경 이미지</title>
<style>
body {
background-image:url('images/pandas.jpg'); /* 문서 전체 배경 이미지 */
background-repeat:no-repeat; /* 배경 이미지 반복 안 함 */
background-position:right top; /* 배경 이미지를 오른쪽 상단에 위치시킴 */
background-attachment:fixed; /* 배경 이미지 고정 */
background-size: 20px;
}
div {
width:400px;
height:250px;
padding: 20px;
border: 20px solid rgba(204, 204, 204, 0.493);
margin-bottom:20px;
overflow:auto;
background-image:url('images/LCD.png'); /* 텍스트 상자의 배경 이미지 */
background-repeat:no-repeat; /* 배경 이미지 반복 안 함 */
background-position:right top; /* 배경 이미지를 오른쪽 상단에 위치시킴 */
}
#bg1 {
background-origin:padding-box; /* 패딩까지 배경 이미지 표시 */
}
#bg2 {
background-origin:border-box; /* 테두리까지 배경 이미지 표시 */
}
#bg3 {
background-origin:content-box; /* 내용 영역만 배경 이미지 표시 */
}
</style>
</head>
<body>
<div id="bg1">
<h3>고양이 </h3>
<p>현존하는 모든 집고양이들은 대략 2000만년 전에 하나의 조상으로부터 갈라져 나온 것으로 추측되며, 그 중 고양이의 조상으로 여겨지는 것은 아프리카들고양이(Felis lybica)라는 동물이다. 중동에 살던 인류가 약 만년 전에 사막고양이를 가축화하여 인간과 함께 살기 시작한 것으로 생각된다</p>
</div>
<div id="bg2">
<h3>고양이 </h3>
<p>현존하는 모든 집고양이들은 대략 2000만년 전에 하나의 조상으로부터 갈라져 나온 것으로 추측되며, 그 중 고양이의 조상으로 여겨지는 것은 아프리카들고양이(Felis lybica)라는 동물이다. 중동에 살던 인류가 약 만년 전에 사막고양이를 가축화하여 인간과 함께 살기 시작한 것으로 생각된다</p>
</div>
<div id="bg3">
<h3>고양이 </h3>
<p>현존하는 모든 집고양이들은 대략 2000만년 전에 하나의 조상으로부터 갈라져 나온 것으로 추측되며, 그 중 고양이의 조상으로 여겨지는 것은 아프리카들고양이(Felis lybica)라는 동물이다. 중동에 살던 인류가 약 만년 전에 사막고양이를 가축화하여 인간과 함께 살기 시작한 것으로 생각된다</p>
</div>
</body>
</html>
실행 결과
background-size : 배경 이미지 크기 조절하는 속성
- 속성값이 하나라면 너비로 인지
- 이 때 높이는 원래 이미지의 너비와 높이 비율에 따라 자동 계산한다.
속성값
예제 - 배경 이미지 크기 조절하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배경 이미지 크기 조절하기</title>
<style>
#container{
width:1100px;
margin:50px auto;
}
.box{
float:left;
border:1px solid #222;
width:300px;
height:300px;
margin:20px;
background:url('../Day05/images/안녕.jpg') no-repeat left top;
}
#bg1 { background-size:auto;} /* 원래 배경 이미지 크기로 표시 */
#bg2 { background-size:200px;} /* 너비는 200px, 높이는 자동 계산 */
#bg3 { background-size:50%;} /* 배경 이미지 너비는 요소 너비의 50%, 높이는 자동 계산 */
#bg4 { background-size:100% 100%;} /* 배경 이미지 너비와 높이는 요소 너비의 100%, 요소 높이의 100% */
#bg5 { background-size:contain;} /* 요소 안에 배경 이미지가 다 보이도록 표시 */
#bg6 { background-size:cover;} /* 요소를 완전히 덮도록 배경 이미지 표시 */
</style>
</head>
<body>
<div id="container">
<div class="box" id="bg1"></div>
<div class="box" id="bg2"></div>
<div class="box" id="bg3"></div>
<div class="box" id="bg4"></div>
<div class="box" id="bg5"></div>
<div class="box" id="bg6"></div>
</div>
</body>
</html>
실행 결과
문제
모양
정답 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배경 이미지</title>
<style>
body {
background:url('../Day05/images/안녕.jpg') left top no-repeat fixed; /* 배경 이미지 */
background-size:cover; /* 배경 이미지 크기 */
}
h1 {
margin-top:150px; /* 상단 마진 */
font-size:80px; /* 글자 크기 */
text-align: center; /* 가운데 정렬 */
color:#fff; /* 글자 색 */
text-shadow:2px 2px #000; /* 텍스트 그림자 */
}
</style>
</head>
<body>
<h1>Java</h1>
</body>
</html>
728x90
'Front > Mega-CSS' 카테고리의 다른 글
| 11. 연결 선택자 (0) | 2023.05.15 |
|---|---|
| 10. 색 그라데이션 (0) | 2023.05.14 |
| <중요> 8. 웹 문서 레이아웃, 위치 (0) | 2023.05.14 |
| 7. 박스 모델 (2) 테두리와 여백 (0) | 2023.05.13 |
| 6. 박스 모델 (1) 블록 레벨 요소, 인라인 레벨 요소 (0) | 2023.05.13 |
'Front/Mega-CSS' Related Articles
more
Comments