background image , repeat ,background-position , background-size
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p:hover{
border-color: burlywood;
background-color: violet;
color:aquamarine;
}
.abox{
width:1500px;
height:1000px;
border: 1px solid #777;
color:blueviolet;
background-color: black;
background-image: url(img/생선만\ 골라먹는\ 아기\ 고양이.jpg); /*백그라운드 이미지 */
background-repeat: no-repeat; /*이미지 반복여부*/
/*이미지 위치 */
/* background-position: bottom right; */
background-position: 100px 200PX; /* 좌에서 떨어진 위치 , 상(위)에서 떨어진 위치 */
background-size: 800px 500px; /*좌우,상하*/
}
</style>
</head>
<body>
<p class = "abox">
안녕하세요? 오늘을 날씨는 맑습니다.
</p>
</body>
</html>
background-attachment : fixed;
사진을 백그라운드에고정시킨다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#wrap {
height:500px;
border: 1px solid #777;
background-image: url(img/아기고양이.jpg);
background-repeat: no-repeat;
/* background-size: contain; 무조건 이미지가 잘리지 않도록 하고 , 나머지는 비움 */
background-size:cover; /* 빈공간없이 꽉채우고 , 이미지를 자름 */
}
#wrap-mid{
height: 500px;
border:1px solid #777;
background-image:url(img/아기고양이.jpg);
background-size: cover;
background-attachment: fixed;/* 스크롤과 상관없이 백그라운드 고정 - 마치 움직이는 효과*/
}
</style>
</head>
<body>
<section id="wrap">
/.......................................
</section>
<section id="wrap-mid">
</section>
<section style="height: 1000px; border : 1px solid #777;" >
</section>
</body>
</html>
밑의 이미지가 스크롤에 따라 마치 움직이는 것 처럼 나온다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.btn {
display: block;
width: 300px;
height: 45x;
background-image: url(img/kakao_login_medium_wide.png);
background-repeat: no-repeat;
background-color: #fee500;
}
.btn2 {
width: 300px;
height: 45px;
background-image: url(img/kakao_login_medium_wide.png);
background-repeat: no-repeat;
border: none;
cursor: pointer;
background-color: #fee500;
}
.btn3 {
background-image: url(img/KakaoTalk_20240116_155138492.png);
background-size: 433px 412px;
background-position: -225px -209px;
background-repeat: no-repeat;
width: 44px;
height: 44px;
cursor:alias;
border : 1px solid #e3e3e3;
border-radius:20px;
}
.nw {
display : block;
background-image:url(img/KakaoTalk_20240116_155138492.png);
background-size:433px 412px;
background-position: -225px -209px;
background-repeat: no-repeat;
width:100px;
height:100px;
cursor:grab;
}
.new{
background-image:url(img/KakaoTalk_20240116_155138492.png);
background-size:433px 412px;
background-position:0px;
background-repeat: no-repeat;
width:433px;
height:412px;
cursor: pointer;
background-color: aqua;
}
.btn5{
background-image:url(img/KakaoTalk_20240116_155138492.png);
background-size: 433px 412px;
background-position: -225px -209px;
background-repeat: no-repeat;
width:44px;
height:44px;
cursor:pointer;
display: block;
}
</style>
</head>
<body>
<a href="#" class="btn"></a>
<a href="http://comic.naver.com/index" class="btn5"></a>
<hr>
<button class="btn2"></button>
<button class="btn3"></button>
<button class="nw"></button>
<button class="new"></button>
</body>
</html>
'CSS > CSS 이론에따라 직접해보기' 카테고리의 다른 글
레이아웃-1 Float (0) | 2024.01.26 |
---|---|
패딩과 마진 (1) | 2024.01.26 |
02-2 디스플레이 (1) | 2024.01.26 |
02-1 폰트,오버플로우 (0) | 2024.01.26 |
01. 선택자 (1) | 2024.01.24 |