noimage

Background를 활용해 보아요

table기반일 땐 왠지 싫어했던 background 항목! 한 껏 이용하려면 어떻게 해야할까?

Background. 배경. table기반일 땐 괜히 싫어 했다는 말은 순전히 나의 개인적인 취향이었지만, 지금도 비슷한 생각을 가지고 있는 사람이 있으리라고 생각한다. 당시에 background를 싫어했던 유일한 이유는. CSS를 잘 활용하지 못 했기 때문이다.

오래전에 내가 CSS를 사용하는 것은, 단지 body의 배경 색상이나 이미지를 조정하고 전체 문서의 폰트를 9pt로 맞추기 위해서 사용하는 것이었다.
따라서 한개의 td나 table에 배경 이미지를 사용하기 위해서는 HTML코드 안에서 아래 처럼 사용했다.

가뜩이나 중복 table때문에 HTML의 코드가 정신이 없는 상태에서 배경을 깔기 위한 코드가 더해지면 더더욱 코드가 지저분 해졌기 때문에 싫어했던 것이다.

하지만 background 항목에 대해 잘 이해하고 CSS를 적극적으로 사용하여 코드를 정리해주기 시작하면, 여러 부분에 걸쳐 유용하게 사용할 수 있는 기특한 녀석이다. 특히 웹디자이너라면 적극 사용해야 할 리스트 0순위에 올려야 할 것이다.

그렇다면 background-배경속성을 어디에 어떻게 활용할 수 있을 지, 예제를 몇개 만들어 보기로 했다.


아래는 참고용으로, background의 기본 속성에 대한 설명이다.

 

Background의 기본 속성

background-color

배경 색상을 설정한다.
ex.


background-image

배경 이미지를 설정한다.
배경 색상과 배경 이미지를 함께 설정해 주면 배경 색상 위에 배경 이미지가 표시된다.
ex.


background-repeat

배경 이미지를 사용할 경우 반복될 패턴을 설정해준다.
설정하지 않을 경우의 기본값은 repeat이다.

background-repeat: repeat;
가로, 세로 모두 반복 하여 패턴 반복한다.
background-repeat: repeat-x;
x축 즉 가로 축으로만 패턴 반복한다.
background-repeat: repeat-y;
y축 즉 세로 축으로만 패턴 반복한다.
background-repeat: no-repeat;
반복하지 않고 한 번만 표시한다.

background-attachment

문서가 길어질 경우 혹은 스크롤이 있는 박스 안에서 배경이미지가 있을 경우, 이미지가 스크롤에 영향을 받을지 아닐지를 설정한다.
설정하지 않을 경우의 기본값은 scroll이다.

background-attachment: scroll;
문서를 스크롤 할 경우 배경 이미지가 문서를 따라 오르고 내린다.
background-attachment: fixed;
문서를 스크롤 할 경우 배경 이미지가 고정된 위치를 가진다.예를 들어 body에 fixed로 배경이미지를 적용한 경우 컨텐츠는 오르고 내리되, 배경 이미지는 움직이지 않는다.
background-attachment 예제보기

background-position

배경 이미지의 위치를 설정해준다.
좌측 상단을 기준으로 픽셀 좌표나 퍼센트로 설정하거나 top, left, center, right, bottom을 설정할 수 있다.

background-position: top left;
상단 좌측에 위치
background-position: right bottom;
하단 우측에 위치
background-position: left;
중앙 좌측에 위치
background-position: top;
중앙 상단에 위치
background-position: 200px;
좌측으로 부터 200px 부분에 위치
background-position: 200px 40px;
좌측으로 부터 200px, 상단으로 부터 40px 부분에 위치

background (shorthand-단축속성)

위의 항목들을 다음과 같이 줄여 쓸 수 있다.

background: red;
색상만 설정
background: #F00 url(images/bg.gif) no-repeat scroll left top;
모든 항목을 다 설정
background: #F00 url(images/bg.gif) no-repeat;
배경 색상, 이미지, 반복 여부 설정

관련 링크

  • 집에서 하는일 없이 가만 앉아 게임만 하는줄 알았더니,,
    시맨틱 웹의 전파를 위해 홀홀단신(?) 열심히이신
    kukie님을 향하여 박수를…
    짝짝~짝!짝!짝!.. 대한~ 민국.. ㅡㅡa

  • tux

    혹시…. 책을 준비하시는 중인가요??
    대단하십니다. 멋쟁이~~b

  • tux

    찾아낼라고 한건아닌데.. 제가 저걸 쓸데가 있어 카피해서 제 에디터에 붙여넣길 했는데 하필 저놈만 스펠링이..-_-;;
    bakground-repeat 으로 되있네요. 희안하네~

  • 동치미: 뿌헤~ 겜 안한지 꽤 됐다 왜 그래~ 근데 요새는 배틀 필드2를 조금씩;

    tux: background속성을 많이 사용하는 것이 생각이 나서 조금씩 정리해보고 있어요
    근데 정말 어케 저거 하나만 c가 빠졌을까요 ㅎㅎ 상콤하게 수정;

  • tux:블로그가 참 이뽀요~ 근데 코멘트를 쓸수 있는 공간이 없네요? 승인된 사람만 글을 작성할 수 있는 건가요???

  • tux

    동치미// 아뇨.. 원래 아무나 글쓰기 가능한데요, 블로그 수정좀 하려고 다 닫아 놨어요.. 구조상 문제 때문에 해결중이라.. ^^;

  • tux:
    언제쯤 글을 쓸 수 있을까요? ^^

  • 대형이

    와~ 밖에… 멋지네요~

  • 오타발견;;

    background-repeat: retpeat-x;
    x축 즉 가로 축으로만 패턴 반복한다.
    background-repeat: retpeat-y;
    y축 즉 세로 축으로만 패턴 반복한다.

    retpeat;;;;;

  • 감사

  • Pingback: 문서 전체(body)에 배경색/이미지 사용하기 at kukie()