netwareMore

display none, visibility hidden, opacity 0

display: none;DOM에 등록된 객체로, 사용자의 눈에 보이지 않으며,  마우스나 키보드와 같은 입력 도구로 실행이 불가능하지만, 자바스크립트와 같은 코딩 언어로 실행시킬 수 있습니다.웹 페이지의 공간을 점유하지 않습니다.  DOM 메모리에 로딩되어 존재하는 객체이나 페이지를 구성하지 않고 보이지도 않습니다. Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off. To have an element take ..

티스토리 Odyssey 스킨의 "관련 사이트" 메뉴 오류 수정

Odyssey는 가장 최근에 티스토리에서 배포한 스킨입니다. 데모 사이트는 명칭이 문화재청으로 등록되어 있습니다. https://skin-demo-5zif0.tistory.com/ 이곳에 들어가면 티스토리에서 데모 사이트로 제공하는 스킨의 특징을 점검할 수 있습니다. 블로그 관리 홈으로 들어가면 "나의 링크" 메뉴가 있습니다. 자주 찾는 사이트를 추가하면 드롭 다운 메뉴로 페이지 오른쪽 하단에 "관련사이트"에 등록된 것이 보입니다. 겉 보기에는 멀쩡하지만 X 버튼을 눌러서 리스트를 접어도 그 위치를 마우스로 클릭하면 해당 링크로 연결되는 오류를 발견할 수 있습니다. 위의 이미지를 예로 설명하면, 일단 관련 사이트 메뉴를 접고 현재 보이지 않는 "티스토리"와 "다음"의 위치를 마우스로 찍으면 링크가 살아 ..

북클럽 스킨 main-slider 설정 변경

홈페이지를 제외한 사용자 지정 특정 페이지에만 main-slider를 실행시켜 블로그 첫페이지 로딩 속도뿐만 아니라 PageSpeed Insights의 측정 점수도 높이는 방법입니다.북클럽 스킨 main-slider 위치에 따른 구글 PageSpeed Insights 점수 변동 1. 블로그 첫 페이지에 main-slider 배치※ 북클럽 스킨의 기본 값은 main-slider를 첫 페이지에서만 보여 줍니다. #tt-body-index .main-slider { display: block;} 2. 카테고리 페이지에 main-slider 배치※ 하나의 블로그에는 일반적으로 여러 페이지의 카테고리가 존재합니다. 그 페이지들에 모두 main-slider를 보여 주는 것입니다. 첫 페이지 하나에만 main-sli..

CSS counter

블로그 초기 페이지에 사용하는 카운터 1, 2, 3 ...... 북클럽 스킨의 "cover-thumbnail-2"와 "cover-list"의 각 항목에 숫자를 부착한 것입니다. 원래는 자바스크립트로 구현했던 기능으로 script.js 파일에 코드를 추가하여 사용하였는 데, 구글 PageSpeed에서 웹페이지 로딩 속도를 측정할 때마다  대규모 화면 변화를 일으키는 요인 중 하나로 이것이 당첨되었습니다. 리스트가 전체 페이지를 차지하고 숫자를 부착할 때마다 화면을 갱신하는 등 좋지 않은 영향을 미친다는 것인데 확인하는 방법이 어려워서 통과! 철거하고 CSS로 대체하기로 결정! 아직까지 별다른 점검 사항이 없는 것 보니까 괜찮은 것 같습니다. 만족했겠죠? 3개의 CSS 속성을 묶어서 구현할 수 있는 기능입..

티스토리 북클럽 스킨의 홈프로모션 슬라이더 실행 구문 단순화

티스토리 스킨 "BookClub" skin.html main-slider 실행 조건 수정 원본 코드를 수정하게 되면, - 일부 구간에서 실행 조건이 2개에서 1개로 줄어듭니다. - 사진 전체의 URL 링크에서 "바로가기" 버튼에 한정된 링크로 변경됩니다. - 불필요한 코드를 삭제했으므로 skin.html 파일의 크기도 약간 줄어듭니다. ※ 슬라이더 관련 코드 원본 91행에서 수정 58행으로 축소 - 초기 페이지 로딩 속도가 아주 조~금 빨라질 것입니다. skin.html 원본의 조건문 구조 ...... promotion-1-url이 있으면 inner 컨테이너 만들고 박스 만들고 promotion-1-text가 있으면 등록하고 promotion-1-color가 있으면 등록하고 바로가기 버튼 등록 promo..

Chrome 계열 웹브라우저의 개발자 도구 성능 모니터

Microsoft Edge 상단 오른쪽 3점 아이콘("설정 및 기타") - 단축키 팝업 창의 "기타 도구" 개발자 도구 - 단축키 개발자 도구 상단 오른쪽 3점 아이콘("사용자 지정 및 DevTools 제어") 1차 팝업 창 "기타 도구" 2차 팝업 창 "성능 모니터" 성능 모니터(Performance Monitor) - 페이지의 실시간 로딩이나 런타임 성능과 관련된 여러 가지 요소들 관찰 기능 - live performance and memory stats 1. CPU 사용(CPU usage) - 현재 접속한 웹페이지의 CPU 사용 점유율 - 시스템의 CPU 전체 점유율과 무관 - CPU usage percentage 2. JS 힙 크기(JavaScript heap size) - 현재 접속한 웹페이지의..

GNB navigation 코드 수정

코드를 머리로 짜는 것이 아니라 필요한 코드를 인터넷 검색하여 수정 작업을 진행하고 있습니다. 모르니까! 티스토리의 블로거들이 북클럽 스킨의 내비게이션 메뉴 GNB의 코드를 별다르게 유용한 목적으로 사용하지 않는 듯하여 새로운 기능을 추가하여 본래의 기능을 개선하고 있습니다. 이 페이지는 새로 만든 코드를 분실하면 처음부터 맨발로 다시 만들어야 하므로 그 변경 과정을 기록하는 것입니다. ※ 아무것도 모르는 상태에서 코드를 발로 작성하기 때문에 티스토리 블로그 서버에 악영향을 미칠 수도 있습니다. 클라이언트 처리 코드이므로 괜찮을 수도 있겠네요. 그래도 계속해서 개선해 나가야 합니다. 잘못된 코드 발견하시면 조언 부탁드립니다. 1. GNB NavBar의 현재 페이지 표시 코드 수정 // script.js ..

font-size의 변환, pixel을 em/rem으로

font-size 단위 변환pixels → (R)EM 계산 방법 2(r)em = " (root) font size(px, pixel) * 2 " pxbody의 기본 font-size가 16px일 때 2(r)em은 16*2, 즉 32px ※ rem은 root의 기본 font-size에 대한 상대 수치※ em은 parent element의 font-size에 대한 상대 수치 2px= " 2 / (root/parent element) font-size " (r)em= 0.125(r)em 폰트 계산기 webSemantics | Web development resources, Font size conversion px-pt-em-rem-percent (websemantics.uk) nekoCalc, PX to R..

CSS selector, nth-child()와 nth-of-type() 비교

※ CSS selectordiv:nth-child(3) 하나의 부모 container에 들어 있는 자식들 중 3번째 자식이 이면 CSS 적용시키고, 만약 와 같은 다른 요소이면 이 규칙은 적용되지 않습니다. 요약하면, - 유형(type) 상관 없이 부모 객체의 3번째 자식 객체를 찾아서- 앞에 지정한 요소(div)와 동일한 유형(div)의 자식일 경우에만 CSS 적용div:nth-of-type(3) 하나의 부모 container에 들어 있는 자식들 중 만 선택 대상에 포함하여 그들 중 3번째 자식에게 CSS 적용- 부모 객체의 유형(type) 자식들만 찾아서- 그것들(div) 중 3 번째 자식에게 CSS 적용부모 container에 child가 1개만 있을 때 1. first-child와 last-ch..

HTML inline vs inline-block vs block elements

1. inline- height와 width 속성 설정 (X)- span, a, img, em, strong, i, small 2. inline-block- height와 width 속성 설정 (O) 3. block- height와 width 속성 설정 (O)- 행(line) 전체(full width) 점유- the entire width of its parent element  ※ element(요소)의 block-level과 inline-level 속성은 CSS의 "display" 값의 지정으로 변경이 가능합니다.※ inline-level element에 margin, padding, border 설정은 가능하지만 주변 요소와 설정에 따라서 지정한 효과가 나타나지 않을 수 있습니다. CSS에 inli..