padding 3 구글 adsense margin 오류 수정 .revenue_unit_wrap { margin-top: 20px; margin-bottom: 20px; } 티스토리 블로그에서 보여 주는 구글 애드센스 광고 CSS 코드를 개발자 도구로 살펴보았습니다. 상, 하 각각 20픽셀의 마진을 주어 본문의 내용과 거리를 두고 있습니다. 간단하게 그리면 아래와 같은 구조를 이루게 됩니다. block element인 "wrap" 안에 그리고 "container" 안에 배치하였습니다. "container" 박스 안의 마지막 개체이므로 애드센스 광고 하단의 20px margin이 "container" 하단 경계선과 접합니다. 아래 그림은 구글 크롬, 마이크로소프트 엣지, 그리고 Mozilla Foundation의 Firefox 브라우저들에서 렌더링 된 실제 모습을 간.. 2022. 6. 21. padding과 margin의 음수 값 margin은 (border 외곽의) element 주위의 여백이나 element 사이의 간격을 지정하기 위하여 사용하며, 양수와 음수 값을 모두 허용합니다. padding은 길이 단위나 비율(%)을 설정하여 element의 border와 content 사이의 거리를 지정합니다. padding의 음수 값(minus 혹은 negative)은 허용하지 않기 때문에 설정을 무시하거나 초기 값 혹은 디폴트 값인 "0"으로 해석하기도 합니다. /* 예제 */ padding-left: calc(100% - 560px); padding-left의 값을 가변적으로 사용한 예문입니다. 100%의 width가 560픽셀 이상일 경우에는 문제가 되지 않지만, 만약 100%의 width가 560픽셀 미만이라면 padding-.. 2021. 12. 11. 티스토리 북클럽 스킨의 포스트 커버 높이 수정 북클럽(BookClub) 스킨을 사용하는 블로그의 포스트 커버(Post-Cover) 높이를 수정하는 방법입니다. - 글 본문에 끼워 넣은 이미지를 본문 글의 상단에 재배치하여 시각적인 효과를 주는 커버 이미지이기 때문에, 텍스트 위주의 블로그, 내용을 짧게 전달하는 블로그 등에서는 별 필요가 없는 기능입니다.. - 기능 자체를 중지시키는 방법도 있지만, 인덱스, 방명록, 태그 페이지와 차이를 줄 수 있기 때문에 높이만 줄여서 사용하는 것도 괜찮습니다. 수정 전 포스트 커버 스크린샷입니다. 높이 340px(픽셀)입니다. 북클럽 데모 페이지를 참고하세요. 수정 후 포스트 커버 스크린샷입니다. 높이 100px로 줄였습니다. - 모바일 화면은 180px 블로그 관리 페이지 > 꾸미기 > 스킨 편집 > HTML .. 2020. 8. 15.
