<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배경 이미지</title>
<style>
/* images/bg1.jpg를 문서 배경 이미지로 사용하기 */
body {
background-image :url('images/bg1.jpg');
}
</style>
</head>
<body>
</body>
</html>불릿은 ul에서 없앴다
background-position: left center -> 좌우 위아래
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>불릿 바꾸기</title>
<style>
ul {
list-style:none; /* 불릿 없앰 */
margin-left:-30px; /* 왼쪽 여백 줄임 */
}
li {
padding-left:50px; /* 왼쪽 패딩 (박스 모델) */
line-height:40px; /* 줄간격 */
/* 목록 불릿 대신 배경 이미지 사용하기 */
background-image:url('images/book-icon.png'); /* 배경 이미지 파일 */
background-repeat:no-repeat; /* 배경 이미지 반복 안함 */
background-position:left center; /* 배경 이미지 위치 */
}
</style>
</head>
<body>
<h1>이지스퍼블리싱</h1>
<ul>
<li>회사소개</li>
<li>도서</li>
<li>자료실</li>
<li>질문답변</li>
<li>동영상강의</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배경 이미지</title>
<style>
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 ~ #bg3 스타일을 사용해 배경 이미지 범위 */
#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>auto = 원본크기 유지,
float를 썼으면 clear로 처리해줘야함 그래서 밀려남
covre을 가장 많이 사용
<!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('images/bg4.jpg') no-repeat left top;
}
/* #bg1 ~ #bg6 스타일을 사용해 배경 이미지 크기 조절하기 */
#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; /* 요소를 완전히 덮도록 배경 이미지 표시 */
background-position: center center; } /* 커버하는데 완전히 중앙정렬 하고 싶으면 이렇게 */
</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('images/bg5.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>Do it!</h1>
</body>
</html>
to right bottom, blue, white
방향 -> 색상
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>선형 그러데이션</title>
<style>
div {
width:500px;
height:300px;
border-radius:10px;
}
/* 왼쪽 위에서 오른쪽 아래로, blue에서 white로 변하는 선형 그러데이션 스타일 .grad 만들기 */
.grad {
background: blue;
background: linear-gradient(to right bottom, blue, white); /* 왼쪽 위에서 오른쪽 아래 방향으로, 파랑에서 흰색으로 */
}
</style>
</head>
<body>
<div class="grad"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>선형 그러데이션</title>
<style>
div {
width:500px;
height:300px;
border-radius:10px;
}
/* 45도 각도로, #f00에서 #fff로 변하는 선형 그러데이션 .grad 스타일 만들기 */
.grad {
background: #f00; /* CSS3를 지원하지 않는 브라우저용 */
background: linear-gradient(45deg, #f00, #fff); /* 45도 (오른쪽 위)방향으로, 빨간색에서 흰색으로 */
}
</style>
</head>
<body>
<div class="grad"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>원형 그러데이션</title>
<style>
div {
width:300px;
height:300px;
border-radius:50%;
box-shadow: 10px 5px 10px #ccc;
}
/* 20% 20%에서 시작하여 흰색에서 파란색으로 바뀌는 원형 그러데이션 .grad 스타일 만들기 */
.grad {
background: blue; /* css3를 지원하지 않는 브라우저용 */
background: radial-gradient(circle at 20% 20%,white,blue);
}
</style>
</head>
<body>
<div class="grad"></div>
</body>
</html>(yellow, yellow 20px, red 20px, red 40px)
0에서 20까지 옐로우 - 20에서 40까지 레드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>원형 그러데이션 반복</title>
<style>
div {
width: 500px;
height: 300px;
border: 1px solid #222;
border-radius: 10px;
margin-bottom: 30px;
}
/* 시작은 yellow, 20px 위치에 red 인 선형 그러데이션 반복하는 패턴 .grad1 스타일 만들기 */
.grad1 {
background: red;
background: repeating-linear-gradient(yellow, yellow 20px, red 20px, red 40px);
}
/* 시작은 white, 10% 위치에 #ccc 인 원형 그러데이션 반복하는 패턴 .grad2 스타일 만들기 */
</style>
</head>
<body>
<div class="grad1"></div>
</body>
</html>
'코딩 > CSS 실습' 카테고리의 다른 글
| [코드 연습장]CSS: 다양한 고급 선택자를 활용한 폼(Form)과 리스트 디자인 (0) | 2026.03.25 |
|---|---|
| [코드 연습장] CSS: Flexbox 기초 정렬 실습 및 반응형 프로필 카드 만들기 (0) | 2026.03.23 |
| [코드 연습장]CSS: 상대 단위(em/rem)와 유동적 이미지(Fluid Image) 기초 실습 (0) | 2026.03.23 |
| [코드 연습장] margin, padding, left-top등 박스 모델과 레이아웃 제어 (0) | 2026.03.19 |
| [코드 연습장] CSS 박스 만들기 (border, border-radius 활용) (1) | 2026.03.18 |