body_background

body에 background, background-images 사용하기

Background를 활용해 보아요.의 첫번째 예제.
HTML 문서의 배경에 색상과 이미지를 적용해 보자.

설명

HTML문서의 바탕에 색상을 넣거나 배경 이미지를 커다랗게 깔아야할 경우.

기존의 방식

이렇게 body에 직접 유효하지 않은 bgcolor 코드와 style을 입력하는 경우가 많다.

 

배경색 설정하기

배경 이미지 설정하기 (고정된 이미지 한 개 사용)

배경 이미지 설정하기 (이미지 한 개를 반복해서 패턴으로 사용)

배경색과 이미지를 함께 배경에 설정하기

최종 예제 파일 보기

위의 모든 예제를 포함 한 파일 보기

 

repeat등 기본값이 정해져 있는 속성의 경우 따로 지정하지 않아도 되나, 배경 이미지를 사용하면서 단축속성을 사용할 경우는 배경 색상을 입력하지 않으면 validator에서 warning을 띄운다.

관련 링크

예제에 사용한 배경 이미지의 출처는 squidfingers patterns.

  • tux

    배경 이미지를 사용하면서 단축속성을 사용할 경우는 배경 색상을 입력하지 않으면 validator에서 warning을 띄운다.

    CSS validation은 별로 신경 안쓰고 살다보니… 모르고 있었습 thangks *^^* (LJH ver.)

  • oldlovas

    와 정말 깔끔하고 자세하게 정리하셨군요. 멋져요D:)

  • tux: error가 아니라 warning으로 뜨는 거라서, 크게 신경 쓰지는 않아도 될 것 같긴 하지만.. 기왕이면 깨끗한게 더 좋을 것 같아요 ㅎㅎ

    oldlovas: 감사합니다~

  • 끼야.. 저런 이미지까지 만들어서 넣으시다니. 대단한 정성이시네요! 멋집니다.

  • 관련링크는 노가다로 넣은건가 +_+?

  • kingori : 감사합니다.

    정태영:~ 응~ 수동이 아닌 것에 대한 방법은~ 난 몰라~ 이런것도 플러그인이 있을까? 안 찾아봤는데.. 생각해보니 관련링크를 자동으로 체크해 줄 수도 없고.. @.@ 모르겠당~ㅎㅎ

  • 배경색을 미리 지정해주지 않으면 이미지 로딩이 느릴 경우 뒷 배경 때문에 글자가 보이지 않아서 잠깐 불편할 때가 있더군요. 잊기 쉬운 배경색 지정인데 이런 것도 습관화 해야겠습니다.

  • Pingback: kukie » Background를 활용해 보아요()