테이블(테두리)에 대하여(7)

Table 에관하여 7신 Table 테두리 일곱번째 시간입니다. 오늘은 테이블의 배경그림을 style을 이용하는 방법에 관하여 알아보겠습니다 이것은 테이블뿐만 아니라 css를 작성하여 body의 배경고정할때 사용하여도 됩니다.

배경에 관한 style 속성 style="background-color:색상코드; background-image:url(이미지 주소);background-attachment:fixed; background-repeat:요소; background-position:정열위치;" 1. background-color:색상코드 background-color 속성은 요소의 배경색을 설정하는속성입니다 여기에서 설정한값은 박스의 내용과 패딩부분에 적용되며 여백부분은 항상 투명합니다. 초기값은 transparent(투명)이며요소에 16진수의 색상 코드를 넣어주시면 됩니다. 2. background-image:url(이미지 웹주소) background-image속성은 요소의 배경 이미지를 설정하는 속성 입니다. 여기에서 설정한 이미지는 박스의 내용과 패딩부분에 적용되며 여백부분은 항상 투명합니다. 환경에 따라서는 배경 이미지가 표시되지 않는 경우도 있기 때문에 배경색도 함께 지정해 주는것이 좋습니다. url : 배경 이미지의 url을 지정합니다. none : 배경 이미지를 사용하지 않는것을 표시 합니다. 3. background-attachment: background-attachment 속성은 배경 이미지가 지정되어 있는 경우 그이미지를(윈도우에 대하여) 그위치에 고정하게 할것인지, 스크롤에 따라서 내용도 함께 이동시킬것인지를 설정하는 속성 입니다. fixed -배경 이미지의 위치를 고정 시킵니다. scroll- 배경 이미지를 다른 내용과 함께 스크롤 되도록 합니다. 4. background-repeat: 배경 이미지의 정열을 설정하는 속성입니다 repeat ; 배경 이미지를 바둑판식 배열로 정열합니다 repeat-x ; 배경 이미지를 가로방향으로 반복해서 정열합니다 repeat-y ; 배경 이미지를 세로방향으로 반복해서 정열합니다 no-repeat ; 배경 이미지를 반복하지 않고 한번만 표시 합니다. 5. background-position: background-position은 배경 이미지의 표시위치를 설정하는 속성 입니다. 지정하는 단위로는 실수 값을 사용할수도 있고 %, 또는 left center right top bottom 을 사용하기도합니다. 예를 보면서 알아보죠 이런 작은 그림이 하나 있습니다. 이것을 넓이가 500 이고 높이가 400쯤되는 테이블에 배경그림으로 하면 이렇게 나오죠. 그림이 반복되어 나오게 됩니다. 그림을 반복되지 않게 하고 글넣을곳은 크게 하고 싶을때가 있습니다. 이럴때 style을 이용하여 만들수 있습니다. 예를보겠습니다

1. background-repeat:no-repeat; 배경 이미지를 반복하지 않고 한번만 표시 본문 내용

결과 보기 가을 편지 이 해 인 1 그 푸른 하늘에 당신을 향해 쓰고 싶은 말들이 오늘은 단풍잎으로 타버립니다 밤새 산을 넘은 바람이 손짓을 하면 나도 잘 익은 과일로 떨어지고 싶습니다 당신 손 안에 이렇게 테이블 내에 그림이 한장만 표시 되었습니다.

2. 이번엔 가로로 그림을 정열해 보겠습니다. 위의 소스에서 background-repeat:no-repeat 부분을 background-repeat:repeat-x 로 바꿔 주면 됩니다. 본문 내용

결과 보기 2 호수에 하늘이 뜨면 흐르는 더운 피로 유서처럼 간절한 시를 씁니다 당신의 크신 손이 우주에 불을 놓아 타는 단풍잎 흰 무명옷의 슬픔들을 다림질하는 가을 은총의 베틀 앞에 긴 밤을 밝히며 결 고운 사랑을 짜겠습니다

3. 이번엔 세로로 그림을 정열해 볼까요. 위의 소스에서 background-repeat:repeat-x 부분을 background-repeat:repeat-y 로 바꿔 주면 됩니다. 배경이 중앙에 있어서 세로로 정열하니깐 보기가 좀그러네요. 정열을 왼쪽으로 하죠 그럴려면 background-position:center를 background-position:left 로 바꾸시면됩니다 본문 내용

결과 보기 세월이 흐를수록 드릴 말씀은 없습니다 옛적부터 타던 사랑 오늘은 빨갛게 익어 터질 듯한 감홍시 참 고마운 아픔이여 4 이름 없이 떠난 이들의 이름 없는 꿈들이 들국화로 피어난 가을 무덤 가 흙의 향기에 취해 가만히 눈을 감는 가을 이름 없이 행복한 당신의 내가 가난하게 떨어져 누울 날은 언제입니까 이렇게 여러 형태로 배경을 사용할수 있습니다. 배경그림의 위치설정(background-position:)에 관하여 좀더 알아 보겠습니다. 지금까지의 배경 그림은 중앙정렬이었지만 내가 원하는 위치에 그림을 넣을수가 있습니다. 쉬운방법이 left center right top bottom 을 이용 하는 방법이고 %를 사용해도 됩니다 그럼 left center right top bottom 의 사용방법을 먼저 알아보죠

1. background-position:left top 으로 하면 좌측상단에 그림이 위치 합니다. background-position:left top;

결과 보기 background-position:left top;

2. background-position:center top 으로 하면 중앙 상단에 그림이 위치 합니다. background-position:center top;

결과 보기 background-position:center top;

3. background-position:right top 으로 하면 우측 상단에 그림이 위치 합니다. background-position:right top;

결과 보기 background-position:right top;

4. background-position:left center 으로 하면 좌측 중간에 그림이 위치 합니다. background-position:left center;

결과 보기 background-position:left center;

5. background-position:center center 으로 하면 정중앙에 그림이 위치 합니다. background-position:center center;

결과 보기 background-position:center center;

6. background-position:right center 으로 하면 우측 중간에 그림이 위치 합니다. background-position:right center;

결과 보기 background-position:right center;

7. background-position:left bottom 으로 하면 좌측하단에 그림이 위치 합니다. background-position:left bottom;

결과 보기 background-position:left bottom;

8. background-position:center bottom 으로 하면 중앙 하단에 그림이 위치 합니다. background-position:center bottom;

결과 보기 background-position:center bottom;

9. background-position:right bottom 으로 하면 우측 하단에 그림이 위치 합니다. background-position:right bottom;

결과 보기 background-position:right bottom;

이렇게 배경 그림을 마음대로 위치 시킬수가 있습니다 좀더 큰 테이블에서 배경그림의 위치를 세밀하게 조정 하실려면 % 를 사용 하시면 더욱 미세한 위치까지 설정할수 있습니다 left top 대신 10% 65%를 넣어 보세요 예를 다보여 드리면 좋겠지만 스스로 연구해보는것도 좋을듯 하네요. 가로정열이나 세로 정열시에도 위와 같은 위치조절법을 사용 하시면 됩니다. 다음 시간에는 레이어를 이용 하는 방법을 연구해 보겠습니다 안녕히..