09_배경 관련 스타일
background-color
배경색을 지정할 때 사용
<style>
body{
background-color: skyblue;
}
#div-bg{
background-color: white;
border:30px solid blue;
padding : 20px;
width : 50%;
/* div의 content의 가로길이를 body의 50%로 지정 */
box-sizing: content-box;
/* width를 content만으로 지정함 */
box-sizing : border-box;
/* width를 border까지 포함하여 지정함 */
}
</style>
<body>
<div id="div-bg">
날카로우나 일월과 창공에 같은 것이다. 할지니, 수 일월과 이상을 봄바람이다.
얼음과 놀이 귀는 인도하겠다는 인생을 같이,
</div>
</body>
background-clip
배경을 적용시키고자 하는 범위를 지정할 때 사용 [표현법] 선택자 { background-clip : border-box / padding-box / content-box; }
<style>
.div-test{
margin : 30px;
border : 10px dashed;
padding : 20px;
background-color: yellow;
}
#div1{
background-clip: border-box; /* 기본값 */
/* 배경색이 border까지 적용 */
}
#div2{
background-clip: padding-box;
/* 배경색이 padding까지 적용 */
}
#div3{
background-clip: content-box;
/* 배경색이 content까지 적용 */
}
</style>
<body>
<div class="div-test" id="div1">
동력은 생의 그들을 얼마나 아름다우냐?
</div>
<div class="div-test" id="div2">
동력은 생의 그들을 얼마나 아름다우냐?
</div>
<div class="div-test" id="div3">
동력은 생의 그들을 얼마나 아름다우냐?
</div>
</body>
배경 이미지 테스트
[표현법] 선택자{ background-image : url("이미지경로"); background-repeat : repeat / repeat-x / repeat-y / no-repeat background-size : auto / contain / cover / 가로길이(px); background-position : 좌 / 우 / 가운데 중 하나 , 위 / 아래 / 가운데 중 하나 선택 또는 x좌표(px,%) y좌표(%); background-attachment : scroll / fixed; }
<style>
#bg-img{
border : 1px solid black;
width : 70%;
height : 800px;
background-image: url("resources/image/bono.jpg");
/* 기본적으로 repeat가 적용되어 있음 */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;
background-size:auto; /* 원본 크기로 */
background-size:contain; /* 가로든 세로든 간에 둘 중에 하나가 가득찰때까지 크기를 맞춰줌 */
background-size: cover; /* 크기를 맞게 설정하고 나서, 크기가 잘리면 잘리는대로 놔둠. */
background-size: 100%;
background-position: 50% 50%; /*center center;*/
background-attachment : scroll; /* 스크롤 이동 시 올라가거나 내려감 */
background-attachment : fixed; /* 스크롤 이동 시 고정됨. */
}
</style>
<body>
<div id="bg-img"></div>
</body>
Author And Source
이 문제에 관하여(09_배경 관련 스타일), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kojam9041/09배경-관련-스타일저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)