배경을 어디에 넣을지 정하는 속성

개요

HTML 요소는 박스(box)로 이루어져 있습니다. 배경 이미지나 배경색을 그 박스 중 어디에 넣을 지 정하는 속성이 background-clip입니다.

기본값 : border-box
상속 : No
애니메이션 : No
버전 : CSS Level 3

문법

background-clip: border-box | padding-box | content-box | initial | inherit;

border-box : 테두리 영역과 그 안쪽 영역을 채웁니다.
padding-box : 안쪽 여백 영역과 그 안쪽 영역을 채웁니다.
content-box : 내용 영역과 그 안쪽 영역을 채웁니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

예제

background-clip 속성 값에 따라 어디를 채우는지를 확인하는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      div {
        box-sizing: border-box;
        width: 100%;
        margin: 20px 0px;
        padding: 20px;
        border: 10px dotted #dadada;
        background-color: #eeeeee;
      }
      .a {
        background-clip: border-box;
      }
      .b {
        background-clip: padding-box;
      }
      .c {
        background-clip: content-box;
      }
    </style>
  </head>
  <body>
    <p><code>background-clip: border-box;</code></p>
    <div class="a">Lorem Ipsum Dolor</div>
    <p><code>background-clip: padding-box;</code></p>
    <div class="b">Lorem Ipsum Dolor</div>
    <p><code>background-clip: content-box;</code></p>
    <div class="c">Lorem Ipsum Dolor</div>
  </body>
</html>

브라우저 지원

Chrome : 4.0+
Firefox : 4.0+
Internet Explorer : 9.0+
Opera : 10.5+
Safari : 3.0+

CSS / 애니메이션 / animation

CSS의 애니메이션 속성으로 동적인 효과를 만들 수 있습니다. IE는 버전 10 이상부터 지원합니다. animation 예제 다음은 CSS로 만든 간단한 애니메이션입니다. 작은 박스가 커졌다 작아집니다. 코드는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> @keyframes big { ...

CSS / background-image / 배경 이미지 정하는 속성

개요 background-image는 이미지를 배경으로 사용하게 하는 속성입니다. 기본값 : none 상속 : No 애니메이션 : No 버전 : CSS Level 1 문법 background-image: none | url | initial | inherit none : 이미지를 배경으로 사용하지 않습니다. url : 이미지의 URL을 입력합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 왼쪽 위에서 시작하여 가로 방향과 세로 방향으로 해당 요소를 다 채울 때까지 반복되어 ...

CSS / CSS를 HTML에 적용시키는 방법

HTML에 CSS를 적용시키는 방법은 세가지가 있습니다. 각 방법은 장단점이 있으니 상황에 맞게 적절한 방법을 택합니다. Inline Style Sheet HTML 태그의 style 속성에 CSS 코드를 넣는 방법입니다. Internal Style Sheet HTML 문서 안의 <style>과 </style> 안에 CSS 코드를 넣는 방법입니다. Linking Style Sheet 별도의 CSS 파일을 만들고 HTML 문서와 연결하는 방법입니다. Inline Style Sheet Inline Style Sheet는 HTML 태그의 ...

CSS / Flex / display

display: flex Flex로 요소를 배열하고 싶을 때 Container에 display: flex;를 추가합니다. 아래와 같은 문서에... <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .jb-container { padding: 10px; ...

CSS / background-size / 배경 이미지의 가로 크기와 세로 크기를 정하는 속성

CSS / 변수 사용하기

CSS 변수 CSS에 변수를 만들고 사용할 수 있습니다. 변수를 이용하면 여러 값을 한 번에 변경할 수 있습니다. 변수 선언 --variable-name: value; 변수를 정의하면, 변수를 정의한 요소와 그 하위 요소에서 그 변수를 사용할 수 있습니다. 만약 어느 곳에서나 사용할 수 있게 하려면 :root에 정의합니다. 변수 사용 property: var( --variable-name ) 예제 변수 --my-color-1을 red로 설정하고 사용합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> :root ...

CSS / border / 테두리 만드는 속성

개요 border는 테두리를 만드는 속성입니다. 위, 오른쪽, 아래, 왼쪽 선을 한 번에 정합니다. 기본값 : medium, none, color 상속 : No 애니메이션 : Yes 버전 : CSS Level 1 문법 border: border-width border-style border-color | initial | inherit border-width : 선의 두께를 정합니다. 기본값은 medium입니다. border-style : 선의 모양을 정합니다. 기본값은 none입니다. border-color : 선의 색을 정합니다. 기본값은 꾸미려는 요소의 ...

CSS / Grid / display

display: grid 그리드(grid)는 콘테이너(container)와 아이템(item)으로 구성됩니다. 아래는 그리드를 위한 간단한 HTML 문서입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; ...

CSS / 표(table) 꾸미기 / 정렬하기

표와 관련된 정렬 표와 관련된 정렬에는 표 정렬, 셀 안의 내용 가로 정렬, 셀 안의 내용 세로 정렬이 있습니다. 기본 모양은 표 : 왼쪽 정렬 제목 셀(th) 안의 내용 가로 정렬 : 가운데 정렬 내용 셀(td) 안의 내용 세로 정렬 : 왼쪽 정렬 셀 안의 내용 세로 정렬 : 가운데 정렬 입니다. <!doctype html> <html lang="ko"> <head> ...

CSS / background-color / 배경색을 정하는 속성

개요 background-color로 배경의 색을 정합니다. 그 색으로 border와 padding을 포함한 영역을 칠합니다. margin 영역은 칠하지 않습니다. 기본값 : transparent 상속 : No 애니메이션 : Yes 버전 : CSS Level 1 문법 background-color: transparent | color | initial | inherit transparent : 배경색이 없습니다. color : 색을 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta ...

CODING FACTORY

CSS / background-clip / 배경을 어디에 넣을지 정하는 속성

개요

문법

예제

브라우저 지원

Related Posts