IT 160 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. 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. 구글 애드센스 계정 정지 광고 게재 중단 계정이 일시적으로 정지되었으며, 이로 인해 광고 게재가 중단되었습니다. 정책 센터에서 계정 정지의 원인을 찾아보시기 바랍니다. 정책 센터 페이지 정책 센터 페이지에서는 해당 계정의 광고 게재를 중단한 이유를 알려 줍니다. 계정이 일시중지됨 정책 위반으로 인해 계정이 2021년 12월 4일까지 일시중지됩니다. 정지 기간에는 광고가 게재되지 않고, 수익 지급이 보류되며, 최근에 발생한 수익이 계정에서 차감되어 광고주에게 환급될 수 있습니다. 자세히 알아보기 정지 기간 중이나 정지 기간 이후에 추가 정책 위반이 발견되면 계정이 영구적으로 사용중지될 수 있습니다. 무효 트래픽으로 인해 게시자의 계정이 정지되는 가장 일반적인 이유를 고객센터에서 알아보세요. 게시자가 취할 수 있는 조치 무효 트래픽 소스를 확인하고.. 2021. 11. 7. 'Google Better Ads Standards'와 티스토리 https://developers.google.com/web/updates/2017/12/better-ad An update on Better Ads Yesterday, the Coalition for Better Ads announced the "Better Ads Experience Program." This Program provides guidelines for companies like Google on how they can use the Better Ads Standards to help improve users' experience with ads on the web. In June, we announced Chrome's plans to support the Better Ads Stand.. 2021. 11. 4. Google Adsense, Kakao Adfit 사이드바의 위아래 margin 삭제 1. 본문과 사이드바에 모두 적용 .google-auto-placed, .revenue_unit_wrap { width: 100%; max-width: 1080px; margin: 40px auto !important; } 2. PC 접속 페이지의 사이드바에 적용 :not(.mobile-menu) #aside .google-auto-placed, :not(.mobile-menu) #aside .google-auto-placed ins, :not(.mobile-menu) #aside .revenue_unit_wrap { margin: 20px auto !important; } 2021.10.30 "2. PC 접속 페이지의 사이드바에 적용" 수정 구글의 배너 설정이 약간 변경되었습니다. 위의 코드는 상하 스.. 2021. 10. 19. CSS로 '위 첨자'와 '아래 첨자' 입력 위 첨자: superscript 아래 첨자: subscript HTML 코드 한글위 첨자 한글위 첨자 한글아래 첨자 한글아래 첨자 CSS 코드 기본(디폴트) vertical-align: baseline; 위 첨자(superscript) vertical-align: super; 아래 첨자(subscript) vertical-align: sub; font-size를 'small'이나 'smaller' 값으로 지정하여 글자의 크기를 더 작게 만듭니다. px나 em 단위로 지정해도 되겠죠. Class 지정 방법 선택 .superscript { vertical-align: super; font-size: small; } .subscript { vertical-align: sub; font-size: small; .. 2021. 10. 17. 북클럽 스킨 커버 아이템 추가 및 오류 수정 / 커버 갤러리2 북클럽 스킨 "커버 갤러리2" 아이템의 오류 수정 방법 - 'skin.html' 코드 수정 - 'cover-thumbnail-4' - class="title" "커버 갤러리2" 아이템의 HMTL 코드 소스는 'skin.html' 파일의 "cover-thumbnail-4"에서 관리합니다. "커버 갤러리2" 아이템을 활성화시키면 글의 제목이 중복 표시되는 오류가 발생합니다. 위 캡처 이미지의 "" 코드가 1, 2 겹쳐서 반복되고 있습니다. 한 개의 코드 라인을 삭제하면 간단하게 문제는 해결됩니다. 1번을 삭제하면 이 글 상단에 등록한 캡처 이미지처럼 그림과 글에 약간의 여백이 설정되어 안정감 있는 모습을 보입니다. 그리고 티스토리 치환자 태그 사이에 위치하는 것이 정상적인 코드입니다. 2번을 삭제하면 그림과.. 2021. 10. 10. jQuery fadeOut(), fadeIn() fadeOut() / fadeIn() .fadeOut( [ duration ], [ callback ] ) Returns: jQuery .fadeOut( [ duration ], [ easing ], [ complete ] ) $(selector).fadeOut( speed, easing, callback) The fadeOut() method Animates the opacity of the matched elements. Hides the matched elements by fading them to transparent. Hidden elements will not be displayed at all. 1. Once the opacity reaches 0, 100% 투명하게 되면, 2. the di.. 2021. 10. 9. Position Sticky를 구현하는 Fixed JS 코드 활용 1. 원글: Position Sticky를 구현하는 Fixed JS 코드 오류 수정 2. 수정: Position Sticky를 구현하는 Fixed JS 코드 2차 수정본 3. 수정: Position Sticky를 구현하는 Fixed JS 코드 3차 수정본 4. 수정: Position Sticky를 구현하는 Fixed JS 코드 4차 수정본 5. 활용: 본문 cloneNode()를 사용하여 DOM 객체의 복제본을 만들지 않고, siblings()를 사용하여 'position: fixed' 지정할 객체의 위 혹은 아래 객체(element)에 margin 속성을 부여하는 방법입니다. 1. 'position: fixed' 객체의 빠져나간 공간을 상위 sibling 객체에 marginBottom을 지정하여 메우는.. 2021. 10. 5. 웹 성능 최적화를 위한 LazyLoad 적용 이미지의 범위 뷰포트 근처의 이미지에는 LazyLoad를 적용하지 않는 것이 좋습니다. LazyLoad라는 웹 페이지 로딩 최적화를 위한 이미지 다운로드 및 출력 제어 방법에 관한 간단한 글을 올렸었습니다. 2021.06.20 관련 글lazysizes 스크립트를 사용한 Lazy Load 오프스크린 출력, TechWrite, Translation (tistory.com) 위 글은 'lazysizes'라는 스크립트를 이용 방법을 설명합니다. 적용 방법은, 태그에'class=lazyload'를 추가하고 'src='를 'data-src='로 변경하는 것입니다. 페이지의 모든 이미지에 LazyLoad를 적용하니까 텍스트는 빠르게 출력이 되는데, 뷰포트 범위의 사정권(?)에 있는 로고 이미지, 네비게이션바의 버튼 이미지, 심벌 .. 2021. 10. 3.
