<!--
1.img 태그를 사용하여 이미지 콘텐츠를 저장 :하이퍼링크가 있다
2.배경 속성을 사용하여 배경 이미지로 저장 :하이퍼링크가 없다
※배경 속성
background: 배경색상 배경이미지반복여부(repeat, repeat-x, repeat-y) 배경위치(left/center/right top/center/bottom);
background-attachment:fixed; 배경이미지를 고정
background-size:cover; 배경이미지를 박스크기로 확장
※벤더 프리픽스 :브랜드 접두사 >크로스 브라우징
1. 크롬:-webkit-
2.사파리:-webkit-
3.파이어 폭스:-moz-
4.오페라:-o-
5.인터넷 익스플로러:-ms-
-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>배경속성</title>
<style>
* {margin:0; padding:0; box-sizing: border-box}
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap');
h1, h2, h3, h4 h5, h6 { font-family: 'Abril Fatface', cursive; }
body { font-family: 'Roboto Condensed', sans-serif;font-size:15px; color: #333; background:#a7b1a3 url(./imgs/back-sample1.jpg) repeat-y center; }
header {width: 100%; height: 70px; background: white;}
header img { height:40px; margin:15px 0 0 50px;}
section { width:1000px; margin:0 auto; }
.bn { position:relative; width: 100%; height: 200px; background: #000 url(./imgs/chess.jpg) no-repeat left center;}
.bn h2 {
position:absolute; right: 50px; top:80px;
font-size:92px; color: #fff;text-transform: capitalize; }
.fix {
height:300px; margin:200px 0; padding:25px 0;
background: url(./imgs/ipad.jpg) no-repeat center;
background-attachment: fixed;
background-size: cover;
}
.fix p {
width: 500px; height: 250px;
margin:0 auto;
padding: 20px;
color:#fff;
background: rgba(0,0,0,0.7);
}
.gradient {
width:300px; height: 100px; margin: 200px auto;
background: linear-gradient( to left, salmon 0%, skyblue 50%, wheat 100%);
border-radius: 50px;
}
.repeat-linear-gradient {
width: 300px; height: 200px; margin: 150px auto;
background: repeating-linear-gradient(#daff, #daff 20px, #adff 35px, #ddaf 50px);
}
.repeat-radial-gradient {
width: 600px; height: 600px; margin: 150px auto;
text-align:center;
background:repeating-radial-gradient(#daff, #daff 20px, #adff 35px, #ddaf 50px);
}
.repeat-radial-gradient img {margin-top: 60px;}
.box1 {width: 200px; height: 200px; margin: 50px auto;
background: url(./imgs/office.jpg);background-size: cover;}
.colorzilla {
width: 500px; height: 150px; margin: 300px auto;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#afabe8+0,ffbcbc+31,bcf5ff+68,faffbc+100 */
background: rgb(175,171,232); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(175,171,232,1) 0%, rgba(255,188,188,1) 31%, rgba(188,245,255,1) 68%, rgba(250,255,188,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(175,171,232,1) 0%,rgba(255,188,188,1) 31%,rgba(188,245,255,1) 68%,rgba(250,255,188,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(175,171,232,1) 0%,rgba(255,188,188,1) 31%,rgba(188,245,255,1) 68%,rgba(250,255,188,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#afabe8', endColorstr='#faffbc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}
</style>
</head>
<body>
<header>
<a href="#"><img src="./imgs/delion.png"></a>
</header>
<section>
<div class="bn"><h2>chess</h2></div>
<div class="fix">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Mi eget mauris pharetra et. Non tellus orci ac auctor augue. Elit at imperdiet dui accumsan sit. Ornare arcu dui vivamus arcu felis. Egestas integer eget aliquet nibh praesent. In hac habitasse platea dictumst quisque sagittis purus. Pulvinar elementum integer enim neque volutpat ac.
</p>
</div>
<div class="gradient"></div>
<div class="repeat-linear-gradient"></div>
<div class="repeat-radial-gradient">
<img src="./imgs/logo.png">
<div class="box1"></div>
<div class="colorzilla"></div>
</div>
</section>
</body>
</html>
--------------------------------- Parallax Scrolling
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
<style>
* { margin:0; padding:0; box-sizing:border-box; }
body { height: 15000px; }
.bg {
height: 100vh;
background: url(./imgs/bg.jpg) no-repeat center;
background-size: cover;
}
.small-bg {
position: absolute; top:50%; width: 100%; height: 200px; margin-top: -100px;
background: url(./imgs/bg.jpg) no-repeat center;
background-attachment: fixed;
background-size: cover;
}
.bg h2 { position: absolute; top:80%; width: 100%; font-size:95px; color:#fff; text-align: center; text-transform: uppercase;}
</style>
</head>
<body>
<div class="bg">
<div class="small-bg"></div>
<h2>fox</h2>
</div>
</body>
</html>
'Coding' 카테고리의 다른 글
| CSS 선수학습(9) (0) | 2021.07.21 |
|---|---|
| CSS 복습/실습 (0) | 2021.07.20 |
| CSS 선수학습(7) (0) | 2021.07.16 |
| CSS 선수학습(6) (0) | 2021.07.15 |
| CSS 선수학습(5) (0) | 2021.07.14 |