웹 써핑을 하다 보면 블로그나 카페에 독특한 이미지로 전체 배경을 장식한 페이지를 보셨을 겁니다.
저의 이 포스트도 전체 배경을 집어 넣고 작성할 건데요.
웹 페이지에서 전체 배경으로 보여지는 소스 코드는
<STYLE> body { background-image:url(이미지 주소); background-attachment: fixed; background-repeat: no-repeat; background-position: bottom right;} table { background-color: transparent; } td { background-color: transparent; }</STYLE>
입니다.
위 소스 코드에서 이미지 주소에 들어갈 전체 배경을 만들어서 포스트 본문 상단이나 하단 아무 곳에 넣어주면
자신만의 전체 배경이 되는데요.
이미지 편집 툴인 포토샵으로 전체 배경을 만들어 보겠습니다.
저는 얼마전에 갈아 탄 cs5영문판으로 설명드릴 건데요.
포토샵 버전에 상관없이 참고하시면 될 겁니다.
1. 포토샵으로 전체 배경 만들기
포토샵을 실행하시고 file >open으로 적당한 크기의 이미지를 불러옵니다.
레이어 추가 아이콘을 눌러서 (단축키 Shift + Ctrl + N) 레이어 추가해 주시구요.
저는 박종우 선수의 독도 세레머니 이미지를 불러 와서 작업을 할려는데[대한축구 협회의 행동에 분통터짐 ♨]
이 이미지는 아무래도 검정색이 어울릴 것 같은데요...
이미지에 어울리는 전경색을 선택하시고 페인트 툴을 눌러서 이미지 위에 마우스 클릭으로 부어 주세요.
레이어의 Opacity를 클릭해서 이미지가 보일 정도로 수치를 조절해 주시구요.
좌 측 도구 상자에서 지우개 툴을 선택하세요.
포토샵 상단 도구 메뉴 브러쉬 모드에서 가장자리가 선명하게 찍히는 브러쉬가 아닌 부드러운 브러쉬를 선택해서 이미지 위에
콕 콕(마우스 클릭) 찍어 줍니다.
그리고 다시 Opacity 수치를 100%로 올려 줍니다.
원본 이미지에 비해 이미지 가장자리가 검게 변했지요? 마음에 드신다면 file > save나 save as로 확장자 포맷 지정하시고 pc에 저장~
여기서 끝이 아니구요. file > new 하시고 가로 X 세로 픽셀의 수치를 1280 X 1024로 정해 주시고 새 창을 열어 주세요.
(해상도를 1280 X 1024로 맞추는 건 pc 모니터의 해상도를 고려해서 인데요.
가령 모니터의 해상도가 1024 X 768이라고 해서 전체 배경을 1024 X 768로 만들면,1280 X 1024의 해상도로 설정된 pc에서
보면 여백이 생겨서 이상하게 보이기 때문입니다.)
새로 열린 창에 작업해 놓은 이미지에 맞는 색상을 페인트 툴로 부어 주시고...
file > open하시고 작업해 논 이미지를 불러 옵니다.
그리고 이동 툴을 선택해서 작업해 놓은 이미지를 드래그로 새 창 원하는 위치에 갖다 놓으시고 마음에 든다면 저장~끝입니다.
아주 간단하게 전체 배경이 만들어 졌지요?
이제 만들어진 전체 배경을 업로드해서 소스 코드안에 넣어 주기만 하면 됩니다.
2.전체 배경 업로드하기
전체 배경 업로드는 티스토리,다음 카페,블로그 포토 업로더를 통한 업로드가 아니고 글쓰기 에디터에서 파일 첨부 기능으로 업로드를
해야 합니다. 그 이유는 티스토리,다음카페, 블로그의 포터 업로더가,,, 가로 픽셀 1024 이하로 업로드 되기 때문입니다.
1). Daum 카페,블로그에서 이미지주소 가져오기
업로드한 전체 배경의 이미지 주소를 소스 코드 url에 집어 넣기만 하면 되는 간단한 작업인데요.다음 카페,블로그는 글쓰기에서
파일 첨부로 이미지 주소를 얻을수 있습니다.
첨부 파일을 등록하고 작성한 글 확인 페이지에서 보면 파일이름과 옆에 돋보기 아이콘이 보이실 겁니다.파일이름을 클릭하고
파일 받기 창을 띠워서 이미지 주소를 얻을 수도 있구요. 돋보기 아이콘을 클릭해서 이미지 주소를 가져올 수 있습니다.
먼저 파일 이름을 클릭해 볼까요? 파일 받기 창이 뜨는데요.파일 이름에 마우스 놓으시고 우 클릭하시고 속성을 클릭해서 등록 정보
창을 띠웁니다.
등록 정보 창에서 url이 이미지 주소인데요. 일단 드래그 > 우클릭 복사[Ctrl + C]합니다.
http://cfile264.uf.daum.net/attach/1929DA49502AC34C1C15F4 요 놈이 이미지 주소인데요,그런데 이 이미지 주소를 그대로
전체 배경 소스 코드에 붙여 넣고 적용하면 이미지가 안보일 겁니다.왜냐하면 이미지 주소 안에 /attach/때문인데요.
해결 방법은 attach를 image로 바꿔주면 됩니다~^^*
그러면 돋보기 아이콘을 클릭해 볼까요? 업로드된 전체 배경 이미지 창이 보여 지는데요.마찬가지로 이미지 창에 우 클릭 > 속성 클릭
등록 정보 창을 열어 줍니다.
위에 파일 이름으로 들어간 등록 정보 창과 돋보기 아이콘으로 띠운 등록 정보 창의 차이점을 보셨나요?
돋보기 아이콘으로 띠운 등록 정보의 url 코드는 image로 나타나기 때문에 수정없이 바로 복사해서 전체 배경 소스에 적용하면
되겠습니다~^^*
2).티스토리에 업로드하고 이미지 주소 가져오기
티스토리에서 업로드는 Daum 블로그나 카페와 동일합니다.다만 위에 파일이름 클릭에서 처럼 이미지 주소의 코드만 수정하시면
되는데요.에디터 글쓰기에서 파일 첨부하시고 저장하기전에 html에 첵크하시고 cfile4.uf@13236644502ADE07250A4D이 부분만
복사하시고 비공개로 저장하면 되겠습니다.
복사된 이미지 주소 cfile4.uf@13236644502ADE07250A4D에서 수정해야 할 코드는 @는 제거하시고 그 부분에 .tistory.com/image/
로 수정해 줍니다.즉 cfile4.uf.tistory.com/image/13236644502ADE07250A4D입니다.
전체 배경에 적용될 url은 https://t1.daumcdn.net/cfile/tistory/13236644502ADE0725이구요.
그러므로 티스토리 페이지에 적용될 전체 배경 소스 코드는
<STYLE> body { background-image:url(https://t1.daumcdn.net/cfile/tistory/13236644502ADE0725); background-attachment: fixed; background-repeat: no-repeat; background-position: bottom right;} table { background-color: transparent; } td { background-color: transparent; }</STYLE>입니다.
cfile27.uf@147D2938502AEB2F1BA0CF.txt">
background image.txt
그리고 티스토리에서 업로드된 이미지들은 Daum 블로그, 카페에서 적용이 됩니다만,Daum 블로그나 카페에서 업로드 된 이미지는
티스토리에서는 엑박으로 나타나며 적용이 안될 겁니다?.............아닌가요??
'컴퓨터 &태그자료' 카테고리의 다른 글
| [스크랩] 필수 프로그램 다운로드 (0) | 2012.11.17 |
|---|---|
| [스크랩] 용량줄이는 방법과 Fade in Fade Out 강좌(기초) (0) | 2012.11.17 |
| [스크랩] 유투브 영상 mp3로 다운 (0) | 2012.11.15 |
| [스크랩] 태그사용에 주의사항 (0) | 2012.11.15 |
| [스크랩] 시스템 레지스트리 백업하기와 복원하기 (0) | 2012.11.15 |