모든건 내 안에 있다-BODY(배경색,배경이미지)

※ 한번 보시겠어요?

여기에는 제목이^_^
여기는 내용입니다.
브라우저에서 보여지는 모든 내용이 이 안에 있어요.

↓

1. 배경색 삽입하기

Bgcolor

BODY태그는 배경색과 문자색을 넣는 속성을 가지고 있습니다. 배경 속성(attribute)은 bgcolor이며 색상을 설정하지 않을 경우는 기본값 흰색이 적용됩니다.
문자 속성(attribute)은 text이며 색상을 설정하지 않을 경우는 기본값 검은색이 적용됩니다.

모든건 내 안에 있다
html의 기본 배경색은 흰색(#FFFFFF)이며
글자는 검은색(#000000)입니다

html의 기본 배경색은 흰색(#FFFFFF)이며
글자는 검은색(#000000)입니다.

※ 16진수와 색상명의 원리

16진수의 색상체계는 #RRGGBB 형식으로 설정됩니다. 즉, 색상은 RR(RED), GG(GREEN), BB(BLUE)형식을 기본값으로 하며, 00에서 FF까지의 값으로 표시합니다. 가장 작은 수 00은 어두운 색에 가까우며, 가장 큰 수 FF는 밝은 색에 가깝습니다. 즉, #000000은 검은색으로, #FFFFFF은 흰색으로 표현됩니다.
빨간색의 경우는 RR부분만 밝고 나머지는 어둡게 해버리면 빨간색이 만들어집니다. 그래서 빨간색을 16진수로 표현하면 #FF0000가 되며, 파란색을 16진수로 표현하면 #0000FF가 됩니다.
색상 명으로 색상을 지정해 주기도 하는데, 이 방법은 MS사에서 만든 윈도우 환경과 동일하게 적용되어, Explorer(익스플로러)에서 처음으로 적용한 방식입니다. 현재 많은 웹 브라우저에서 호환되고는 있으나 되도록이면 16진수로 나타내는 것을 추천합니다. 굳이 색상 명으로 표현하고자 할 때는 기본색인 red, green, black, white만 사용하기 바랍니다. 그 밖에 yellow, purple등의 색상은 브라우저마다 조금씩 다르게 표현될 수 있으므로 되도록이면 삼가하는게 좋겠죠?

※ 배경색은 인쇄될까요?

저는 지난번 검색엔진 강좌를 쓸 때 인쇄를 한 번 해보았습니다. 배경은 진한색으로.. 글자는 노랑색으로 했더니..어머머,, 글자색이 안보이는거예요. 이 때 아하~! 배경색은 인쇄가 안되는구나~! 하는걸 알게 되었답니다.^^*
그런데요. 오늘 해보니 인쇄가 되는군요. 호호... 알지도 못하고 잘난 척 했었는데, 까치님께서 가르쳐 주셨어요.^^ (순서는 다음과 같습니다. 도구 ☞ 인터넷옵션 ☞ 고급 ☞ 인쇄 ☞ 배경색 및 이미지인쇄를 체크하고 인쇄를 해보니... 멀쩡하게 인쇄되네요? 까치님 고마워요.^^*)

2. 배경이미지 삽입하기

Background

BODY 태그에 background 속성은 배경이미지를 삽입할 때 사용됩니다.
(※ background는 texture file for background를 뜻합니다.)

bgcolor 속성은 이미지가 아닌 색상을 적용하기 때문에 페이지 로딩할 때 속도에 문제가 없으나 background속성은 이미지를 이용하기때문에 이미지의 용량이 크면 클수록 페이지가 뜨는데 시간이 오래 걸립니다.
배경이미지는 적용한 이미지크기 만큼을 웹 페이지에 보여주며, 웹 페이지 전체크기보다 작으면 패턴형식으로 반복되어 표시됩니다.
배경 이미지는 애니메이션으로 표현 가능합니다.
배경 이미지에는 월페이퍼, 워터마크 형식이 사용됩니다. 워터마크는 작은 이미지를 규칙적으로 반복하여 마치 욕실 바닥에 타일을 붙이듯이 필요한 공간을 채우는 것입니다. 사용되는 이미지 파일의 포맷형식은 gif나 jpg입니다. 그리고 월 페이퍼는 큰 이미지 1개로 모두 채우는 것입니다.
화면전체를 차지하는 배경이미지를 사용하는 경우 전체적인 분위기나 디자인 효과는 뛰어날지 모르지만 이미지 용량이 커지는 경우 로딩되는데 많은 시간이 소요되므로 가능한 용량을 줄여주는 것이 좋습니다. 투명이미지나 흑백이미지, 또는 색상수를 줄여주어야 합니다
이미지를 구하는 방법은 사진을 스캐닝 하여 포토샵에서 작업을 하거나, 또는 인터넷에서 원하는 이미지를 찾아 이미지위에 마우스 포인터를 놓고, 오른쪽 버튼을 눌러보세요. '다른이름으로 그림 저장' 이라는 메뉴를 선택하고, 파일명을 지정해주시면 됩니다.

배경이미지 삽입하기
이렇게 멋진 그림을 배경화면에 넣을 수 있답니다

이렇게 멋진 그림을 배경화면에 넣을 수 있답니다.

※ 이미지를 한 번만 보여주기

이미지가 브라우저의 크기보다 크게 제작되면 한 번만 보여지는 것이 가능합니다. 최근 보편적으로 사용하는 모니터 해상도는 1024 x 768이며 그 보다 더 높은 모니터 해상도는 1280 x 1024 정도입니다. 그렇다면 1280 x 1024를 보는 사용자들까지 고려하여 1280 x 1024보다 더 크게 이미지를 제작하여 백그라운드로 삽입한다면 이미지가 웹 페이지보다 넘쳐버리므로 한 번만 적용됩니다.

※ 배경이미지 고정하기

'배경 이미지 고정하기 속성'은 문서가 길어져 스크롤 바가 생기는 경우, 스크롤 바를 내렸을 때 글자만 움직이고 배경이미지는 고정된 것처럼 그대로 있게 할 때 사용합니다. 위와같이 bgproperties속성을 고정(fixed)시키면 간단히 해결됩니다. 그러나 이 속성은 인터넷 익스플로러에서만 지원되고 있습니다.

※ 배경 이미지 고정하기는 경우에 따라 유용하게 사용할 수 있습니다. 하지만 W3C에서는 배경이미지를 고정시키기보다는 CSS활용을 권장하고 있습니다. CSS를 활용하면 큰 이미지를 삽입하지 않고도 가로, 세로 200픽셀 정도의 크기만으로도 움직이지 않는 배경화면을 제작할 수 있습니다. CSS를 이용한 배경이미지 적용법은 나중에 CSS를 다룰때 한번 살펴보기로 하겠습니다.

※ 배경이미지 사용시 유의점

배경으로 사용하는 이미지는 일반 이미지와는 다르게 몇 가지 규칙을 따르는 것이 좋습니다.

작은 이미지(주로 5KB 이내의 용량)를 사용합니다.
이미지 자체는 옆에서 보이는 것과 같이 작은 크기 일지라도 배경으로 사용되면 자동으로 상하좌우가 타일링 되어 브라우저 화면에 꽉 채워집니다. 그러므로 브라우저에 로딩되는 시간 또한 실제 이미지의 크기만큼 소요되므로 가능하면 작은 그림을 사용하는 것이 기다리는 사람을 덜 지루하게 만들겠지요?
흐리거나 연한 이미지를 사용합니다.
배경으로 사용하는 이미지는 너무 밝거나 짙은 이미지면 본문이 잘 눈에 띄지않고 난잡해 보일수 있으므로 보통 흐리거나 연한 이미지를 많이 사용합니다.
이미지와 비슷한 색상으로 배경색을 지정합니다.
배경색상은 로딩되는데 시간이 걸리지 않지만 이미지는 로딩되는데 시간이 걸리므로 자연스러운 로딩을 위해 이미지와 비슷한 색상으로 배경색을 지정하여 이미지가 로딩되는 동안 색이 먼저 나타나게 하여 지루함을 해소시키는 것도 사소한 것 같지만 아주 센스있는 연출법 입니다.

※ 배경이미지 샘플 ☞BACKGROUND SAMPLER

※ Wartermark가 무슨 뜻이죠?
불법복제를 막기위해 개발된 최신기술의 일종입니다. 컴퓨터에서 사용되는 워터마크는 흐린 바탕무늬나 로고를 디지털이미지 원본에 삽입해 사용자가 이미지를 보거나 소프트웨어를 사용하는데 지장을 주지 않으면서도 복제를 방지하는 독특한 기술입니다.