background 속성
background-image: url(1.jpg); 이미지주소
background-position: top center; 이미지 위치
backgroudn-size: 가로 세로, cover , contain;
background-repeat: no-repeat; 반복(초기값은 repeat)
background-color: red;
linear-gradient 배경화면
이미지 스프라이트(Image Sprite)
웹페이지의 첫 로딩 속도를 줄여주는 여러 방법 중 하나로 서버로의 요청 횟수를 최소화 해줘서 모바일환경과 같이 한정된 자원을 사용하는 플랫폼의 최적화 요소 중에서도 실제 적용하기에 아주 손쉬운 방법.
원리는 아이콘이나 버튼과 같은 반복되서 표시되지 않는 그림들 처럼 독립된 여러 그림을 하나의 그림으로 합쳐놓고 CSS의 background-position속성을 이용해 이미지의 특정 부분만 노출되도록 하는 것이다. 이렇게 하면 서버로의 요청 횟수를 줄여주면서 사이트 로딩 속도를 줄여주고 내려받는 이미지의 크기까지 줄여줄 수있는 효과를 얻을 수 있다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>백그라운드</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<header>
<h1>Website Title</h1>
<p>Website slogan included here.</p>
<nav class="site-nav">
<ul class="group">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
<div class="content-area group">
<div class="main-area">
<h2>Main Column Heading</h2>
<nav class="ui-menu">
<ul class="group">
<li class="ui-home"><a href="#">Home</a></li>
<li class="ui-profile"><a href="#">Profile</a></li>
<li class="ui-settings"><a href="#">Settings</a></li>
</ul>
</nav>
<p>This is the main area (or column). Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
<div class="birds">
<p>Birds are great!</p>
</div>
<!-- /birds -->
<p>nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui
officia deserunt mollit anim id est
laborum.</p>
<ul>
<li>Example list item</li>
<li>Example list item</li>
<li>Example list item</li>
<li>Example list item</li>
<li>Example list item</li>
<li>Example list item</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea
commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>In reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum
dolor sit
amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud.</p>
</div>
<aside class="sidebar">
<p>This is the sidebar. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco
laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu.</p>
</aside>
</div>
<footer>
<p>© 2021 - This is the footer.</p>
</footer>
</div>
</body>
</html>style.css
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
html {
background-color: #869960;
/* line-height 줄높이 */
line-height: 1.7;
}
body {
font-family: 'PT Sans', Arial, sans-serif;
font-size: 15px;
}
img {
max-width: 100%;
height: auto;
}
a {
text-decoration: none;
}
/* Birds Background Demo */
.birds {
/* background-color: #c2bbb1;
background-image: url(images/bird.jpg);
background-position: center center;
background-repeat: no-repeat; */
/* 위 4줄을 아래 한 줄로 나타낼 수 있다 */
/* background: url() position repeat color */
background: url(images/bird.jpg) center center no-repeat red;
background-size: cover;
/* text-align은 문단 정렬 방식 */
text-align: center;
padding: 100px 0;
}
.birds p {
margin: 0;
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
text-shadow: 1px 1px 0 #000;
display: inline-block;
padding: 10px;
}
/* End Birds Demo */
/* UI 메뉴 */
.ui-menu ul{
margin: 0;
padding: 0;
}
.ui-menu li{
float: left;
list-style: none;
margin-right: 20px;
}
.ui-menu a{
/* a태그는 인라인이기 때문에 블록으로 해야 가로세로 수정 가능 */
display: block;
width: 50px;
height: 50px;
background-image: url(images/sprites.png);
text-indent: -9999px;
background-repeat: no-repeat;
}
.ui-menu .ui-profile a{
background-position: 0 -50px;
}
.ui-menu .ui-settings a{
background-position: 0 -100px;
}
.ui-menu .ui-home a:hover {
background-position: -50px 0;
}
.ui-menu .ui-profile a:hover{
background-position: -50px -50px;
}
.ui-menu .ui-settings a:hover{
background-position: -50px -100px;
}
/* Main Column Typography */
.main-area h2 {
font-size: 200%;
font-weight: normal;
font-style: italic;
letter-spacing: 4px;
word-spacing: 10px;
text-transform: lowercase;
}
.main-area p {
font-size: 108%;
}
/* Banner Overlay */
.image-banner {
position: relative;
}
.image-banner img {
display: block;
}
.banner-description {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
background-color: rgba(0, 0, 0, 0.65);
padding: 15px 25px;
}
.container {
/* background-image는 배경, 기본은 패턴이 반복됨 */
background-image: url(images/color-tile.png);
/* background-repeat을 설정해서 no-repeat 등으로 반복 설정 */
background-repeat: repeat-x;
background: url(images/color-tile.png) left top repeat-x,
url(images/color-tile.png) left bottom repeat-x;
width: 940px;
margin-left: auto;
margin-right: auto;
background-color: #FFF;
padding-top: 15px;
padding-left: 40px;
box-sizing: border-box;
}
header {
background-image: url(images/image.png);
background-position: center right;
background-repeat: no-repeat;
padding-top: 20px;
color: #617140;
}
header h1 {
margin: 0;
font-weight: normal;
font-size: 165%;
}
header p {
margin: 0;
}
/* Site Navigation */
.site-nav {
margin-top: 20px;
}
.site-nav ul {
margin: 0;
padding: 0;
}
.site-nav li {
list-style: none;
float: left;
margin-right: 5px;
}
.site-nav a {
display: block;
color: #617140;
text-decoration: none;
padding: 10px 20px;
background-color: #fff;
border: 3px solid #e5e9dc;
border-bottom: none;
}
.site-nav a:hover {
background-color: #e5e9dc;
}
/* End Site Navigation */
.content-area {
border-top: 3px solid #e5e9dc;
border-bottom: 3px solid #e5e9dc;
}
.main-area {
width: 66%;
float: left;
padding-right: 40px;
box-sizing: border-box;
}
.sidebar {
width: 34%;
float: left;
background-color: #e5e9dc;
/* 그라데이션 backgound-image: linear-gradient(방향,색1,색2) */
background-image: linear-gradient(to bottom,#9adcff,white);
padding: 20px 40px;
box-sizing: border-box;
font-size: 114%;
}
footer {
text-align: center;
font-size: 85%;
color: #999;
padding-bottom: 20px;
padding-top: 20px;
}
.fix {
clear: both;
}
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1;
}
안녕하세요!!