netwareMore

CSS로 '위 첨자'와 '아래 첨자' 입력

위 첨자: superscript아래 첨자: subscriptHTML 코드 한글위 첨자한글위 첨자 한글아래 첨자한글아래 첨자 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;}.sup { vert..

북클럽 스킨 커버 아이템 추가 및 오류 수정 / 커버 갤러리2

북클럽 스킨 "커버 갤러리2" 아이템의 오류 수정 방법 - 'skin.html' 코드 수정 - 'cover-thumbnail-4' - class="title" "커버 갤러리2" 아이템의 HMTL 코드 소스는 'skin.html' 파일의 "cover-thumbnail-4"에서 관리합니다. "커버 갤러리2" 아이템을 활성화시키면 글의 제목이 중복 표시되는 오류가 발생합니다. 위 캡처 이미지의 "" 코드가 1, 2 겹쳐서 반복되고 있습니다. 한 개의 코드 라인을 삭제하면 간단하게 문제는 해결됩니다. 1번을 삭제하면 이 글 상단에 등록한 캡처 이미지처럼 그림과 글에 약간의 여백이 설정되어 안정감 있는 모습을 보입니다. 그리고 티스토리 치환자 태그 사이에 위치하는 것이 정상적인 코드입니다. 2번을 삭제하면 그림과..

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..

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을 지정하여 메우는..

웹 성능 최적화를 위한 LazyLoad 적용 이미지의 범위

뷰포트 근처의 이미지에는 LazyLoad를 적용하지 않는 것이 좋습니다. LazyLoad라는 웹 페이지 로딩 최적화를 위한 이미지 다운로드 및 출력 제어 방법에 관한 간단한 글을 올렸었습니다. 2021.06.20 관련 글lazysizes 스크립트를 사용한 Lazy Load 오프스크린 출력, TechWrite, Translation (tistory.com) 위 글은 'lazysizes'라는 스크립트를 이용 방법을 설명합니다. 적용 방법은, 태그에'class=lazyload'를 추가하고 'src='를 'data-src='로 변경하는 것입니다. 페이지의 모든 이미지에 LazyLoad를 적용하니까 텍스트는 빠르게 출력이 되는데, 뷰포트 범위의 사정권(?)에 있는 로고 이미지, 네비게이션바의 버튼 이미지, 심벌 ..

Position Sticky를 구현하는 Fixed JS 코드 4차 수정본

2021.04.19 - [IT/코딩 Javascript] - Position Sticky를 구현하는 Fixed JS 코드 오류 수정 2021.06.10 - [IT/코딩 Javascript] - Position Sticky를 구현하는 Fixed JS 코드 2차 수정본 2021.06.13 - [IT/코딩 Javascript] - Position Sticky를 구현하는 Fixed JS 코드 3차 수정본 2021.10.05 - [IT/코딩 Javascript] - Position Sticky를 구현하는 Fixed JS 코드 활용 4차 수정 코드 const nav = document.getElementById('main-header'), rectTop = nav.offsetTop, tmp = nav.cloneNo..

북클럽 스킨 사이드바의 '로그인'과 '로그아웃' 오류 수정

티스토리 블로그의 북클럽 스킨의 코드 오류를 수정하는 방법입니다. 모바일 접속할 때 팝업 창으로 뜨는 사이드바의 '로그인'과 '로그아웃'이 오류 수정 대상입니다. 텍스트로 링크되어 있는 이 버튼은 눌러도 반응이 없습니다. 블로그 관리자가 로그인한 상태이면 '로그아웃' 버튼이 보이고, 관리자가 로그인하지 않았으면 '로그인' 버튼이 보입니다. 오류가 발생하는 이유 아래 코드는 북클럽 스킨의 자바스크립트를 담고 있는 파일에서 복사한 오류 발생 부분입니다. 북클럽 스킨의 자바스크립트 코드는 'script.js' 파일에 담겨 있습니다. $profile.on("click", ".login", function(){ document.location.href = 'https://www.tistory.com/auth/lo..

Only one AdSense head tag supported per page

"TagError: adsbygoogle.push() error: Only one AdSense head tag supported per page. The second tag is ignored." 구글 애드센스 광고 코드를 태그에서 하나만 호출해야 한다는 알림 오류 메시지입니다. 태그 안에 직접 애드센스 스크립트 코드를 넣지 않고 티스토리 "블로그 관리 홈"의 "애드센스 관리" 페이지에서 2개의 광고 유형을 활성화시킨 상태입니다. 1. 전체 자동 광고 2. 본문 하단 및 목록하단 광고 두 개 중에서 하나를 끄니까 이 오류 메시지가 더 이상 나오지 않습니다. 어떤 유형의 코드를 사용하든 페이지의 헤드 태그에 애드센스 스크립트 태그가 단 하나만 있어야 합니다. 티스토리 계정에 구글 애드센스 계정을 연동하여..

CSS Selectors Level 3

Selectors Level 3Selectors are patterns that match against elements in a tree, and as such form one of several technologies that can be used to select nodes in an XML document. Selectors have been optimized for use with HTML and XML, and are designed to be usable in perforwww.w3.orghttps://www.w3.org/TR/selectors-3/#adjacent-sibling-combinators 다른 클래스를 호출하기 위한 코드를 찾다가 자꾸 잊는 내용을 상기시키기 위한 책갈피입니다.a..

position absolute의 height 설정

position: relative + position: absolute"position: relative" 객체는 document의 정상적인 흐름을 따르지만, "position: absolute" 객체는 그 흐름에서 튀어나와 분리됩니다. position 속성에 absolute 값을 지닌 child(자식) 객체에 top, bottom, left, right, height, width 값을 설정할 때 "position: relative" 값을 가진 가장 가까운 parent(상위, 부모) 객체를 기준으로 지정합니다. 바로 상위 객체에 position 속성으로 relative 값을 가진 객체가 없을 경우 찾을 때까지 더 상위 객체로 거슬러 올라갑니다. 만약에 없을 경우에는- "document body"를 이용하..