반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배경색</title>
<style>
/*
background-color: #008000;
background-color: rgb(0, 128, 0);
background-color: green;
배경색 적용 범위를 조절하는 background-clip 속성
background-clip 속성값
border-box - 박스 모델에서 테두리까지 적용. 기본값.
padding-box - 박스 모델에서 테두리를 뺀 패딩 범위까지 적용
content-box - 박스 모델에서 콘텐츠 부분에만 적용
*/
.desc {
border: 5px dotted #222;
background-color: #ffd9a0;
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">
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
</div>
<div class="desc" id="clip-padding">
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
</div>
<div class="desc" id="clip-content">
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배경 이미지</title>
<style>
body {
background-image: url('images/bg1.jpg');
background-repeat: no-repeat;
}
/*
배경 이미지 반복 방법을 지정하는 background-repeat 속성
background-repeat 속성값
repeat - 브라우저 화면 가득 찰 때 까지 가로 세로 반복, 기본값
repeat-x - 브라우저 화면 가득 찰 때 까지 가로만 반복
repeat-y - 브라우저 화면 가득 찰 때 까지 세로만 반복
no-repeat - 반복 없음.
배경 이미지 위치를 조절하는 background-position 속성
기본형 - background-position: <수평 위치> <수직 위치>;
수평 위치: left | center | right | <백분율> | <길이 값>
수직 위치: top | center | bottom | <백분율> | <길이 값>
*/
</style>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배경 이미지</title>
<style>
/*
배경 이미지 위치를 조절하는 background-position 속성
기본형 - background-position: <수평 위치> <수직 위치>;
수평 위치: left | center | right | <백분율> | <길이 값>
수직 위치: top | center | bottom | <백분율> | <길이 값>
*/
ul {
list-style-type: none;
margin-left: -30px;
}
li {
background-image: url('images/book-icon.png');
background-repeat: no-repeat;
background-position: left center;
padding-left: 50px;
line-height: 40px;
}
</style>
</head>
<body>
<h1>이지스퍼블리싱</h1>
<ul>
<li>회사소개</li>
<li>도서</li>
<li>자료실</li>
<li>동영상 강의</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배경 이미지</title>
<style>
/*
배경 이미지 적용 범위를 조절하는 background-origin 속성
background-origin 속성값
content-box - 박스 모델에서 내용 부분에만 배경 이미지를 표시. 기본값.
padding-box - 박스 모델에서 패딩까지 배경 이미지를 표시
border-box - 박스 모델에서 테두리까지 배경 이미지를 표시
배경 이미지를 고정하는 background-attachment 속성
background-attacthment 속성값
scroll - 화면을 스크롤하면 배경 이미지도 스크롤 됨. 기본값.
fixed - 화면을 스크롤하면 배경 이미지는 고정되고 내용만 스크롤 됨.
*/
body {
background-image: url('images/bg2.png');
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
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/bg3.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">
<h2>바빠 시리즈</h2>
<h3>바쁜 학생을 위한 빠른 학습법</h3>
<p>쉬운 내용은 압축하여 빠르게, 어려운 내용은 더 많이 공부하는 효율적인 학습 설계가 되어 있는 바빠 연산법과 '손이 기억하는 훈련 프로그램;안 바빠 영어 시리즈가 있습니다.</p>
</div>
<div id="bg2">
<h2>바빠 시리즈</h2>
<h3>바쁜 학생을 위한 빠른 학습법</h3>
<p>쉬운 내용은 압축하여 빠르게, 어려운 내용은 더 많이 공부하는 효율적인 학습 설계가 되어 있는 바빠 연산법과 '손이 기억하는 훈련 프로그램;안 바빠 영어 시리즈가 있습니다.</p>
</div>
<div id="bg3">
<h2>바빠 시리즈</h2>
<h3>바쁜 학생을 위한 빠른 학습법</h3>
<p>쉬운 내용은 압축하여 빠르게, 어려운 내용은 더 많이 공부하는 효율적인 학습 설계가 되어 있는 바빠 연산법과 '손이 기억하는 훈련 프로그램;안 바빠 영어 시리즈가 있습니다.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배경 이미지</title>
<style>
/*
배경 이미지 크기를 조절하는 background-size 속성
background-size 속성값
auto - 원래 배경 이미지 크기만큼 표시. 기본값
contain - 요소 안에 배경이미지가 다 들어오도록 이미지를 확대, 축소
cover - 배경 이미지로 요소를 모두 덮도록 이미지를 확대, 축소
<크기> - 이미지의 너비와 높이를 지정
값이 하나만 주어질 경우 너비값으로 인식해 이미지의 높이값은 자동 계산
<백분율> - 배경 이미지가 들어갈 요소의 크기를 기준으로 백분율로 값을
지정하고 크기에 맞도록 이미지를 확대, 축소
*/
#container {
width: 1100px;
margin: 50px auto;
}
.box {
float: left;
border: 1px solid #222;
width: 300px;
height: 300px;
margin: 20px;
background: url('images/bg4.jpg') no-repeat left top;
}
#bg1 {
background-size: auto;
}
#bg2 {
background-size: 200px;
}
#bg3 {
background-size: 50%;
}
#bg4 {
background-size: 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>
반응형
'IT > CSS' 카테고리의 다른 글
| CSS - 4일차 연결선택자, 가상클래스 (0) | 2023.05.17 |
|---|---|
| CSS - 3일차 속성선택자 (0) | 2023.05.15 |
| CSS - 2일차 box-width, border-radius, box-shadow (0) | 2023.05.11 |
| CSS - 2일차 float,clear (0) | 2023.05.11 |
| CSS - 2일차 display (0) | 2023.05.11 |