친절한효자손 취미생활

지난시간에 이어서 계속 백그라운드 속성에 대한 방법을 설명드리고 있습니다. 이번에는 백그라운드에 색상을 입력한 상황과, 이미지로 설정한 상황에서의 적용 위치에 대한 설명입니다. 큰 차이는 없지만 미묘한 차이점은 있습니다. 한번 잘 봐주시면 감사하겠습니다.


background-clip 을 알아보자

만약 백그라운드를 이미지를 사용하지 않고, 16진수의 색상코드를 사용해서 지정하셨다면 background-clip을 사용해서 적용 범위를 설정할 수 있습니다. 또한 다음의 세가지 속성을 적용시켜서 어디까지 적용되게 할지를 정할 수 있습니다. 각 요소에 대한 설명은 다음과 같습니다.


background-clip: border-box; ▶ 박스 테두리까지 포함하여 적용됨

background-clip: padding-box; ▶ 테두리를 제외한 박스의 안쪽 영역부터 적용됨

background-clip: content-box; ▶ 콘텐츠 부분에만 적용됨 (텍스트의 경우라면 글씨에만 적용)


여기서 굵게 작성된 부분은 잠시 뒤에 background-origin 에서도 동일하게 사용되므로 잘 기억해 두시면 되시겠습니다.


<div id="clip">

    <h1>background-clip</h1>

    <div class="ori1">일주일이 너무나 빨리 가는구나! 벌써 월요일이라니... ㅠㅠ</div>

    <div class="ori2">일주일이 너무나 빨리 가는구나! 벌써 월요일이라니... ㅠㅠ</div>

    <div class="ori3">일주일이 너무나 빨리 가는구나! 벌써 월요일이라니... ㅠㅠ</div>

</div>


먼저 html 본문의 div를 구성하고 안쪽에 p태그로 글씨를 넣었습니다. 다음은 CSS 스타일 부분입니다.


div {

    margin-bottom: 20px;

    width: 350px;

    padding: 25px;

}


#clip &gt; div {

    border: 5px dashed #123;

    background: orange;

    /*background-clip*/

}


#clip .ori1 {

    background-clip: border-box;

}


#clip .ori2 {

    background-clip: padding-box;

}


#clip .ori3 {

    background-clip: content-box;

}


이렇게 마크업 되어 있습니다. 차이점은 잠시뒤에 origin을 같이 설명드리고나서 한꺼번에 확인시켜 드리도록 하겠습니다.


background-origin 을 알아보자

만약 div 상자의 배경을 이미지로 넣어주셨다면 이 속성을 적용시켜서 어디까지 영역을 적용시킬지에 대해 결정하실 수 있습니다. 방법은 clip과 동일합니다. 그럼 바로 html 마크업 상태를 살펴보시겠습니다.


<div id="origin">

    <h1>background-origin</h1>

    <div class="ori4">일주일이 너무나 빨리 가는구나! 벌써 월요일이라니... ㅠㅠ</div>

    <div class="ori5">일주일이 너무나 빨리 가는구나! 벌써 월요일이라니... ㅠㅠ</div>

    <div class="ori6">일주일이 너무나 빨리 가는구나! 벌써 월요일이라니... ㅠㅠ</div>

</div>


이렇게 마크업했고요, 스타일 부분을 적용시키기전에 이미지가 한 장 필요하므로 여기에 올려두도록 하겠습니다.


테스트 이미지테스트용 이미지

네. 여기에 이렇게 올려두었고, 경로는 현재 위의 이미지 경로를 지정해 주었습니다. 여러분들께서는 각자 이미지 주소를 적용시켜주시면 됩니다.


div {

    margin-bottom: 20px;

    width: 350px;

    padding: 25px;

}


#origin > div {

    border: 5px dashed #138535;

    background: url(이미지경로) no-repeat;

}


#origin .ori4 {

    background-origin: border-box;

}


#origin .ori5 {

    background-origin: padding-box;

}


#origin .ori6 {

    background-origin: content-box;

}


CSS 스타일 상태는 이미지 주소 부분만 다르고 나머지는 같습니다. 이제 결과를 살펴보겠습니다.


See the Pen background-clip / origin by rgy0409 (@rgy0409) on CodePen.


차이점이 눈에 보이십니까? border-box를 사용하고 padding-box, content-box를 사용함에 따라 적용되는 영역이 달라지는것을 확인하실 수 있습니다. 그리고 서두에서 말씀 드렸듯 배경을 16진수 컬러를 사용한다면 clip을, 이미지를 사용하신다면 origin을 써서 적용시킨다는 차이점도 인지하고 계신다면 나중에 적용함에 있어서 어려움은 없을 것 입니다. 끝.




"친절한효자손 취미생활" 을 검색!


당신을 위한 콘텐츠

이 글을 공유합시다

facebook twitter googleplus kakaoTalk kakaostory naver band

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.

비밀글모드