09_배경 관련 스타일

kojam9041·2022년 4월 19일

KH정보교육원 - CSS

목록 보기

8/11

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>

kojam9041

이전 포스트

08_테두리 관련 태그

다음 포스트

09_배경 관련 스타일

KH정보교육원 - CSS

background-color

background-clip

배경 이미지 테스트

08_테두리 관련 태그

10_레이아웃 관련 스타일1

0개의 댓글