꼭좀 봐주세요 bg 처리때문에 그렇거든요 정보
꼭좀 봐주세요 bg 처리때문에 그렇거든요
본문
그림에 보시면 화살표 있는 부분에 bg 처리한거를여
보시면 참 잘하셨던데요 저는 저렇게 안되는데 어떤 방법으로
한건지 알고 싶습니다.
출처 홈페이지
http://funnymom.net/
보시면 참 잘하셨던데요 저는 저렇게 안되는데 어떤 방법으로
한건지 알고 싶습니다.
출처 홈페이지
http://funnymom.net/
댓글 전체
화면 드래그 해보시면 아시겠지만
background 속성으로 넣은건 아니구요
테이블 사방을 저 선이 포함된 이미지들이 막고 있네요
bg처리는 아닙니다 ^^
bgcolor 이나 background는 드래그 했을때 파랗게 드래그가 되지 않아요
background 속성으로 넣은건 아니구요
테이블 사방을 저 선이 포함된 이미지들이 막고 있네요
bg처리는 아닙니다 ^^
bgcolor 이나 background는 드래그 했을때 파랗게 드래그가 되지 않아요
그럼 어떻게 처리를 해야 될까요 ㅡㅡ비법을 모르것네요
너무 광범위한 답변이라...
책을 사서 보실것을 권장해 드립니다.
"CSS 비밀 매뉴얼"을 한번 보시면 답이 나와 있습니다.
책을 사서 보실것을 권장해 드립니다.
"CSS 비밀 매뉴얼"을 한번 보시면 답이 나와 있습니다.
배경은 css의 가장 큰 장점중에 하나입니다. 방법은 여러가지 있습니다.
위처럼 고정된 너비 x 높이 일 경우 방법은 아래처럼 해 보세요
------------------------------------------------------------
1) 우선 사용하시는 그래픽 프로그램에서 (photoshop 혹 gimp등) 위처럼 이미지를 만드세요
2) 전체를 원하는 너비 x 높이 로 자른다음 이미지를 저장하세요
3) 다음, css 에서 이 배경이미지를 적용하세요.
3-1) 아래처럼 할 수 있습니다.아래에서 center top는 정렬을 위쪽 중앙에 하라는 의미이며, no-repeat는 배경색을 반복하지 말라는 뜻 입니다.
{background-image:url('images/bgboard.jpg') center top no-repeat }
너비는 고정되고 높이는 가변적일 경우는 아래처럼 하면 됩니다.
--------------------------------------------------------------
1) 우선 사용하시는 그래픽 프로그램에서 (photoshop 혹 gimp등) 위처럼 이미지를 만드세요
2) 다음에 3가지 방법이 있습니다. 디자인에 따라서 최적의것을 선택하세요. 모든 경우는 2-1) 이 무난합니다.
2-1) 상단, 중간, 하단 3가지로 이미지를 나누어 각 각 따로 저장합니다
2-2) 상단 및 하단 2가지로 이미지 제작
2-3) 이미지를 하나로 제작
3) 다음, css 에서 이 배경이미지를 적용하세요.
3-1 css에서는 위쪽에 (제목등이 있는곳) bg 를 하나 적용하고
3-2 중간부분에 똑 적용합니다. 이것은 위 아래로 내용에 따라 늘거나 줄어듭니다
3-3) 마지막 부분에 bg 이미지를 적용합니다.
머리통 부분은 아래처럼 해 주고
{background-image:url('images/bg-board-north.jpg') center top no-repeat }
다만, 중간 몸뚱아리 부분은 y 축으로 내용에 따라 늘어나야 하니까, 이처럼 해 주면 됩니다. {background-image:url('images/bg-board-body.jpg') center top repeat-y}
마지막으로 아랫도리는 아래처럼 해 주면 됩니다
{background-image:url('images/bg-board-south.jpg') center top no-repeat }
위의 절차는 마치 게시판의 "머리통" "몸뚱아리" "아랫도리" 와 같은 이치입니다.
참고로, http://funnymom.net/ 에서는 이미지를 각각 만들어서 넣었네요 - 즉, 수작업으로 하였다는 의미입니다.
위처럼 고정된 너비 x 높이 일 경우 방법은 아래처럼 해 보세요
------------------------------------------------------------
1) 우선 사용하시는 그래픽 프로그램에서 (photoshop 혹 gimp등) 위처럼 이미지를 만드세요
2) 전체를 원하는 너비 x 높이 로 자른다음 이미지를 저장하세요
3) 다음, css 에서 이 배경이미지를 적용하세요.
3-1) 아래처럼 할 수 있습니다.아래에서 center top는 정렬을 위쪽 중앙에 하라는 의미이며, no-repeat는 배경색을 반복하지 말라는 뜻 입니다.
{background-image:url('images/bgboard.jpg') center top no-repeat }
너비는 고정되고 높이는 가변적일 경우는 아래처럼 하면 됩니다.
--------------------------------------------------------------
1) 우선 사용하시는 그래픽 프로그램에서 (photoshop 혹 gimp등) 위처럼 이미지를 만드세요
2) 다음에 3가지 방법이 있습니다. 디자인에 따라서 최적의것을 선택하세요. 모든 경우는 2-1) 이 무난합니다.
2-1) 상단, 중간, 하단 3가지로 이미지를 나누어 각 각 따로 저장합니다
2-2) 상단 및 하단 2가지로 이미지 제작
2-3) 이미지를 하나로 제작
3) 다음, css 에서 이 배경이미지를 적용하세요.
3-1 css에서는 위쪽에 (제목등이 있는곳) bg 를 하나 적용하고
3-2 중간부분에 똑 적용합니다. 이것은 위 아래로 내용에 따라 늘거나 줄어듭니다
3-3) 마지막 부분에 bg 이미지를 적용합니다.
머리통 부분은 아래처럼 해 주고
{background-image:url('images/bg-board-north.jpg') center top no-repeat }
다만, 중간 몸뚱아리 부분은 y 축으로 내용에 따라 늘어나야 하니까, 이처럼 해 주면 됩니다. {background-image:url('images/bg-board-body.jpg') center top repeat-y}
마지막으로 아랫도리는 아래처럼 해 주면 됩니다
{background-image:url('images/bg-board-south.jpg') center top no-repeat }
위의 절차는 마치 게시판의 "머리통" "몸뚱아리" "아랫도리" 와 같은 이치입니다.
참고로, http://funnymom.net/ 에서는 이미지를 각각 만들어서 넣었네요 - 즉, 수작업으로 하였다는 의미입니다.