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 / 선택자(Selector) / 전체 선택자, 타입 선택자, 속성 선택자

전체 선택자 전체 선택자(Universal Selector)는 모든 HTML 요소를 선택합니다. 별표(*)로 나타냅니다. 예를 들어 * { color: blue; } 는 모든 요소의 색을 파란색으로 만듭니다. 다른 선택자와 같이 사용할 때는 생략할 수 있습니다. 즉, *.abc { color: blue; } .abc { color: blue; } 는 같은 결과를 만듭니다. 타입 선택자 타입 선택자(Type Selector)는 h1, p, div, span 등 HTML 요소(Element)를 선택하는 ...

CSS / caption-side / 표(table)의 캡션의 위치를 정하는 속성

개요 caption-side는 표(table)의 캡션의 위치를 정하는 속성입니다. 기본값 : top 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 문법 caption-side: top | bottom | initial | inherit top : 기본값입니다. 표의 위에 캡션을 위치시킵니다. bottom : 표의 아래에 캡션을 위치시킵니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta ...

CSS / CSS로 드롭다운(Dropdown) 메뉴 만들기

CSS만으로 만든 드롭다운 메뉴입니다. Ipsum, Dolor에 마우스를 올리면 하위 메뉴가 나옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS Tips | Dropdown Menu</title> <style> .dropdown > ul > li { ...

CSS / 링크 꾸미기

선택자 링크는 <a> 태그로 만듭니다. 따라서 <a> 태그를 선택하여 꾸밉니다. 예를 들어 a { color: red; } 는 링크의 색을 빨간색으로 만듭니다. 가상 클래스를 이용하면 좀 더 다양하게 꾸밀 수 있습니다. a:link – 방문하지 않은 링크 a:visited – 방문했던 링크 a:hover – 마우스가 올려진 링크 a:active – 클릭하는 순간 링크 주의할 점은 a:hover는 a:link와 a:visited 뒤에 와야 하고, a:active는 ...

CSS / opacity / 요소를 투명하게 만드는 속성

개요 opacity로 요소의 투명도를 정할 수 있습니다. 기본값 : 1 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 문법 opacity: number | initial | inherit number : 0.0부터 1.0까지의 수를 넣습니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 숫자가 작을수록 투명해집니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS Reference ...

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 : 안쪽 여백 영역 왼쪽 ...

CSS / 동영상을 배경으로 사용하는 방법

동영상을 배경으로 사용하면 좀 더 다이나믹하고 화려하게 웹페이지를 꾸밀 수 있습니다. 단, 네트워크 속도가 느리거나 컴퓨터 사양이 좋지 않거나 구 버전의 웹브라우저를 사용하면 문제가 생길 수 있으니, 신중히 결정하는 것이 좋습니다. 예제로 사용한 동영상 예제에서 사용한 동영상은 Pixabay에서 구했습니다. 상업적으로 사용 가능하고, 출처 표시를 하지 않아도 됩니다. https://pixabay.com/videos/network-loop-energy-technology-12716/ 전체 코드와 결과 다음은 간단하게 만든 예제의 ...

CSS / 인터넷 익스플로러(IE)에서 구글 웹폰트 사용하는 방법

구글 웹폰트 IE 미지원 구글 웹폰트를 사용하면 수많은 글꼴을 쉽게 사용할 수 있습니다. 구글 서버에 있는 글꼴을 가져다 쓰므로 트래픽도 절약할 수 있습니다. 그런데 한가지 문제가 있습니다. IE를 지원하지 않습니다. 구글 웹폰트의 CSS 소스를 보면 @font-face { font-family: 'Nanum Gothic'; font-style: normal; font-weight: 400; src: local('NanumGothic'), url(https://fonts.gstatic.com/s/nanumgothic/v9/PN_3Rfi-oW3hYwmKDpxS7F_z-7r_xFtIsPV5MbNOyrVj67GNc972x-dpix2LdhN-iTB6aWWhDX3G.0.woff2) format('woff2'); ...

CSS / IE8 이하에서 border-radius, box-shadow 적용시키는 방법

CSS3에서 많은 속성이 추가되었습니다. 그 중에서 개인적으로 가장 많이 사용하는 것이 border-radius입니다. 테두리를 둥글게 만들거나 이미지를 원으로 만들 때 이미지 편집 프로그램을 사용할 필요가 없기 때문입니다. 하지만 문제가 있습니다. IE8 이하에서는 적용되지 않는다는 것이죠. 이 문제를 해결해주는 것이 PIE입니다. 간단한 코드 한 줄로 IE8 이하에서도 border-radius를 적용시킬 수 있습니다. PIE 다운로드 다음 링크에서 PIE를 다운로드 받습니다. http://css3pie.com/download/ 업로드 압축을 풀면 ...

CSS / font-variant / 소문자를 작은 대문자로 바꾸는 속성

개요 font-variant는 소문자를 작은 대문자, 즉 소문자 크기의 대문자로 바꾸는 속성입니다. 따라서 한글에서는 의미 없는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 font-variant: normal | small-caps | initial | inherit normal : 소문자를 작은 대문자로 바꾸지 않습니다. small-caps : 소문자를 작은 대문자로 바꿉니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype ...

CODING FACTORY