CSS / background-origin / 배경 이미지를 어느 영역부터 채워나갈지를 정하는 속성

개요

HTML 요소는 박스로 이루어져 있고, 바깥 여백 영역(Margin Area), 테두리 영역(Border Area), 안쪽 여백 영역(Padding Area), 내용 영역(Content Area)으로 구분합니다. background-origin으로 배경 이미지를 어느 영역부터 채워나갈지를 정합니다.

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

문법

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

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

background-origin 속성은 채우기를 시작하는 위치를 정하는 것으로, 다른 영역을 채우지 않는 것은 아닙니다. 배경 이미지를 반복시키면 시작점 바깥의 영역도 채웁니다. 예제 2에서 확인하세요.

예제 1

속성 값에 따라 어디서부터 채우는지 확인하는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      div {
        box-sizing: border-box;
        width: 100%;
        height: 150px;
        margin: 20px 0px;
        padding: 20px;
        border: 20px dotted #dadada;
        background-image: url( "images/jb-bg-01.jpg" );
        background-repeat: no-repeat;
        color: blue;
      }
      .a {
        background-origin: border-box;
      }
      .b {
        background-origin: padding-box;
      }
      .c {
        background-origin: content-box;
      }
    </style>
  </head>
  <body>
    <p><code>background-origin: border-box;</code></p>
    <div class="a">Lorem Ipsum Dolor</div>
    <p><code>background-origin: padding-box;</code></p>
    <div class="b">Lorem Ipsum Dolor</div>
    <p><code>background-origin: content-box;</code></p>
    <div class="c">Lorem Ipsum Dolor</div>
  </body>
</html>

예제 2

속성값에 관계없이 배경 이미지를 반복 시키면 테두리 영역과 그 안쪽 영역을 다 채웁니다. 채우기 시작하는 위치만 달라집니다.

다음은 위 예제에서

background-repeat: no-repeat;

를 삭제했을 때의 결과입니다.

브라우저 지원

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

CSS

CSS / text-decoration / 선으로 텍스트를 꾸미는 속성

개요 text-decoration은 선으로 텍스트를 꾸밀 수 있게 해주는 속성입니다. 기본값 : none 상속 : No 애니메이션 : No 버전 : CSS Level 1 문법 text-decoration: none | line-through | overline | underline | initial | inherit none : 선을 만들지 않습니다. line-through : 글자 중간에 선을 만듭니다. overline : 글자 위에 선을 만듭니다. underline : 글자 아래에 선을 만듭니다. initial : 기본값으로 ...

CSS / 반응형 레이아웃 만들기

반응형 웹디자인 웹사이트의 레이아웃을 만들 때 방문자가 사용하는 모니터의 화면 해상도를 고려해야 합니다. 너무 크게 가로폭을 만들면 작은 해상도의 모니터로 접속했을 때 가로 스크롤이 생겨 컨텐츠를 보는 게 불편하기 때문입니다. 특히 스마트폰이나 태블릿 등 모바일 기기는 화면이 작기 때문에 가독성에 더욱 신경써야 합니다. 이러한 문제를 해결하는 방법 중의 하나가 반응형 웹디자인입니다. 해상도에 따라 ...

CSS / float와 overflow

float float는 요소를 왼쪽 또는 오른쪽에 배치할 때 유용한 속성입니다. float 속성을 부여한 요소의 다음 요소는 float 속성을 부여한 요소가 차지하는 위치만 제외하고 나머지 공간을 채우게 됩니다. 사진을 왼쪽 또는 오른쪽에 배치하고 그 주위를 텍스트로 채울 때 사용하거나, 사이트 레이아웃을 만들 때 사용합니다. overflow overflow는 내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 정하는 속성입니다. ...

CSS / max-width, height로 반응형 웹디자인을 위한 이미지 스타일링 하기

반응형 웹디자인은 웹브라우저의 가로폭에 따라 레이아웃이 변하고, 그에 따라 각 요소의 가로폭도 변합니다. 텍스트는 일반적으로 바뀐 폭에 맞추어 줄바꿈이 되지만, 이미지는 줄바꿈이라는 게 없기 때문에 문제가 생깁니다. 어떤 문제가 발생하는지 살펴보고 해결책을 찾아보겠습니다. 이미지 크기를 정하지 않은 경우 이미지의 크기를 정하지 않으면 부모 요소보다 큰 이미지는 부모 요소를 벗어나서 나타납니다. <!doctype html> <html lang="ko"> <head> ...

CSS / clip / 요소의 특정 부분만 보이게 하는 속성

개요 clip 속성으로 요소의 특정 부분만 나오도록 할 수 있습니다. 기본값 : auto 상속 : No 애니메이션 : Yes 버전 : CSS Level 2 문법 clip: auto | shape | initial | inherit auto : 요소의 모든 부분이 나옵니다. shape : 특정 부분이 나오도록 합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 특정 부분만 나오게 할 때는 다음과 같은 코드로 나오는 ...

CSS / Flex / justify-content

justify-content로 flex-direction으로 정한 방향으로의 정렬을 정합니다. 예를 들어 flex-direction의 값이 row라면 가로 방향의 정렬을 정합니다. 기본값은 flex-start로 시작점부터 아이템을 배치합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> * { ...

CSS / 표(table) 꾸미기 / 테두리 만들기

테두리 만드는 속성 테두리는 border 속성으로 만듭니다. table, th, td 요소에 적용할 수 있습니다. tr 요소에는 적용되지 않습니다. 기본 모양 아무런 꾸밈을 하지 않았다면 기본 모양은 테두리가 없는 것입니다. th 요소는 보통 굵은 글씨에 가운데 정렬이 기본 모양입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

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 / content / 요소 앞 또는 뒤에 문자열 등 콘텐트 만들기

content 속성은 선택한 요소의 내용 앞이나 뒤에 콘텐트를 붙입니다. 예를 들어 p 요소 내용 앞에 콘텐트를 넣으려면 p:before { content: xxx; } 와 같이 하고, 뒤에 붙이려면 p:after { content: xxx; } 와 같이 합니다. content 속성을 이용하여 XXX라는 문자열을 넣으려면 다음과 같이 합니다. p:before { content: "XXX"; } 이미지를 넣고 싶다면 다음과 같이 합니다. p:before { content: ...

CSS / Flex / order / 아이템의 순서 정하는 속성

Flex로 아이템을 배치할 때, 입력한 순서대로 출력됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; margin: 0px; ...

CODING FACTORY