티스토리 블로그 고정형 플로팅배너 예쁘게 수정하기

티스토리 블로그 고정형 플로팅배너 예쁘게 수정하기

지난번에 왼쪽옆으로 고정형 플로팅배너를 달아봤습니다.

그런데 약간 수정하고 싶다는 충동이 강하게 일어나서, 변화를 주기로 했습니다.

(먼저 플로팅배너와 관련된 이전포스팅부터 확인하면 좋겠죠.^^)

수정전과 수정후를 비교해서 말씀드리면

우선 모서리부분을 동그랗게 처리했고,

click 이미지를 테두리 밖으로 꺼내놨습니다.

테두리 및 이미지 수정하기

1. 모서리를 동그랗게 하려면 table style에서 border-radius 를 추가하면 됩니다.

px로 입력하는데, 수치가 커질 수록 동그란 각(?)도 커지겠죠.

2. 다음은 click 이미지를 테두리 밖으로 꺼낼텐데요.

table/tr/td 안에 묶여있던 클릭이미지를 table 밖으로 꺼내면 되는데요.

div style을 새로 입력하며 위치를 조정해줍니다.

3. 단, 기존에 첨부한 이미는 배경이 포함된 jpg 파일입니다.

배경이 흰색이 아니라면 불편해 보일수 있기 때문에

배경이 없는 png 파일로 수정하세요.

4. 이것이 최종적으로 수정한 코드인데요.

click이미지의 크기때문에 div style에서 margin-left와 top을 수정했습니다.

혹, 다른 이미지를 넣을거라면 이미지 크기에 맞춰 수정해주시면 되겠습니다.

불친절한 파파엘 Life