예전.... 이라고 하려다보니 벌써 3년전이군요...
꼬마님 포스트를 참고해서 블로그 댓글창에 배경그림 넣는 방법을 포스팅 했었는데요.
2008/07/22 - [IT.컴퓨터.인터넷.취미/블로그 꾸미기] - 블로그 댓글창에 배경그림을 넣어보자!!
이때는 뭐가 뭔지도 잘 모르고 약간 이해하는 정도여서(그렇다고 지금은 잘 안다는건 절대!!!! 아니랍니다.)
필요한 설정에 대해서는 자세하게 언급을 못했었는데요.
이번에는 꼭 필요한 설정에 대해서 알아보겠습니다.
우선 제가
요 원본 이미지를 'Image ready'를 이용해서 위 아래 타이틀을 지우고 필요한 텍스트를 넣어서
요렇게 만들었었죠.
다운을 받으려는데 마우스 오른쪽 클릭이 안되신다면 '요거 클릭'
이전 포스트에서 이미지 경로를 제 블로그주소로 썼더니 그 경로를 그대로 이용하시는 분들이 계셔서 파일을 다운 받으실 수 있게 링크 추가하는거랍니다.
제 블로그로 링크를 거는 것보다 자신의 블로그에 업로드 해서 이미지 경로를 지정하시는게 조금 아니 쬐끔 더 빨리 보일 수 있거든요.ㅎㅎ
이제부터 중요한 댓글창 크기와 이미지 위치 조절에 대한 설명입니다.
1. 댓글창 크기 조절
눈치로 보기는 창의 크기 조절이라기 보다는 텍스트의 글자수 관련이라 보여집니다.
참고로 위에서 "background-image:url~~~" 이 부분을 보시면 아시겠지만 스킨과 같이 업로드를 해서 경로가 저렇게 표시됩니다.
그러면 정작 필요한 댓글창의 크기는 어떻게 변경할까요?
바로 'stlye.css'에 답이 있습니다.
현재 댓글창의 크기는 가로: 560px, 세로: 100px로 설정되어 있군요.
위의 설정에 따른 댓글창의 크기입니다. 그대로 쓰셔도 괜찮구요.
이해를 돕기위해 가로, 세로 크기를 모두 늘려보겠습니다.
크기를 늘려봤습니다. 가로: 630px, 세로: 120px입니다. 차이가 느껴지시죠?
- 배경이 깔려있는 이미지를 쓴다거나.
- 크기가 큰 이미지를 쓴다거나.
크기 조절이 필수겠죠?
그런데 한가지 아쉬운게 있습니다. 창 내부에 붙어있는 스크롤바에 이미지가 조금 가려지는데요.
이 아쉬운 부분을 해결하기 위해,
2. 이미지 위치 조절
사실 이 부분은 이전 포스트에도 다뤄져 있습니다.
위에 1번 설명의 그림처럼 'background-position:right' 이 부분이 그림의 위치를 설정하는 소스인데요.
당연히 right를 left로 바꾸면 이미지가 댓글창의 왼쪽에 보이게 될겁니다.
위의 그림에서 보여지듯이 스크롤바에 우리의 포(쿵푸팬더)가 조금 가려지죠?
왼쪽으로 조금만 이동시켰으면 좋겠는데....
방법이 있을까요? 에이.... 없으면 이걸 쓰고 있겠어요?ㅋㅋㅋㅋ
바로 퍼센테이지입니다.
위의 위치 소스의 left, right는 퍼센테이지로 바꿔 쓸 수 있는데요.
left = 0%, right = 100% 여기에 추가로 center = 50%가 되죠.
자~!! 감이 오시나요? 저는 왼쪽으로 조금만 이동시키려고 하기 때문에 수치를 92%로 입력했습니다.
확실한 비교를 위해 두 이미지를 같이 놓고 볼까요?
정확한 비교를 위해서 캡쳐할때 동작도 맞게 하느라 고생 좀 했답니다..ㅋㅋㅋ
이렇게 두가지 방법으로 필요한 어떤 이미지라도 넣을 수 있겠죠?
이 글이 많은 분들에게 도움이 되었으면 좋겠구요 전 딴짓 좀 하다가 야구중계를 봐야겠네요.
요즘 LG가 가파른 하향세를 타고 있어서 걱정입니다... 아흑!!
