margin 3

Article Thumbnail 구글 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.
Article Thumbnail Flex 컨테이너의 수평 위치 중앙에 배치 flex 컨테이너 스크롤-바를 수평 위치 중앙에 배치하기 위하여 justify-content와 overflow를 동시에 설정할 때 발생하는 호환성 문제를 해결하는 방법입니다. 현재 사용 코드 #header { position: relative; max-width: 1366px; margin: 0 auto; } #gnb { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } ...... #gnb ul { display: -webkit-flex; display: -ms-flexbox; display: flex; flex-wrap: nowrap; .. 2022. 1. 11.
Article Thumbnail 구글 애드센스 광고 배너 상, 하단 마진 없애는 방법 .navigation + .google-auto-placed .adsbygoogle { margin: 0 auto !important; } 구글 애드센스 배너를 자동으로 설정하면, 블로그나 운영 사이트의 상단 메뉴바 혹은 헤더 바로 아래 배치됩니다. 배너 상단과 하단의 간격은 마진으로 10px입니다. --- 헤더 (혹은 메뉴바) --- 10px의 공백, margin 10px --- 애드센스 배너 --- 10px의 공백, margin 10px 이 형태인데 사이트 디자인에 상, 하단 공백을 없애고 싶을 경우 다음과 같은 CSS 코드를 추가합니다. .google-auto-placed .adsbygoogle { margin: 0 auto !important; } - 구글 애드센스 코드: 'google-auto-.. 2021. 7. 18.