IT 160 CSS counter 블로그 초기 페이지에 사용하는 카운터 1, 2, 3 ...... 북클럽 스킨의 "cover-thumbnail-2"와 "cover-list"의 각 항목에 숫자를 부착한 것입니다. 원래는 자바스크립트로 구현했던 기능으로 script.js 파일에 코드를 추가하여 사용하였는 데, 구글 PageSpeed에서 웹페이지 로딩 속도를 측정할 때마다 대규모 화면 변화를 일으키는 요인 중 하나로 이것이 당첨되었습니다. 리스트가 전체 페이지를 차지하고 숫자를 부착할 때마다 화면을 갱신하는 등 좋지 않은 영향을 미친다는 것인데 확인하는 방법이 어려워서 통과! 철거하고 CSS로 대체하기로 결정! 아직까지 별다른 점검 사항이 없는 것 보니까 괜찮은 것 같습니다. 만족했겠죠? 3개의 CSS 속성을 묶어서 구현할 수 있는 기능입니다.. 2022. 4. 15. 티스토리 북클럽 스킨의 홈프로모션 슬라이더 실행 구문 단순화 티스토리 스킨 "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.. 2022. 4. 11. 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) - 현재 접속한 웹페이지의.. 2022. 4. 10. GNB navigation 코드 수정 코드를 머리로 짜는 것이 아니라 필요한 코드를 인터넷 검색하여 수정 작업을 진행하고 있습니다. 모르니까! 티스토리의 블로거들이 북클럽 스킨의 내비게이션 메뉴 GNB의 코드를 별다르게 유용한 목적으로 사용하지 않는 듯하여 새로운 기능을 추가하여 본래의 기능을 개선하고 있습니다. 이 페이지는 새로 만든 코드를 분실하면 처음부터 맨발로 다시 만들어야 하므로 그 변경 과정을 기록하는 것입니다. ※ 아무것도 모르는 상태에서 코드를 발로 작성하기 때문에 티스토리 블로그 서버에 악영향을 미칠 수도 있습니다. 클라이언트 처리 코드이므로 괜찮을 수도 있겠네요. 그래도 계속해서 개선해 나가야 합니다. 잘못된 코드 발견하시면 조언 부탁드립니다. 1. GNB NavBar의 현재 페이지 표시 코드 수정 // script.js .. 2022. 4. 6. font-size의 변환, pixel을 em/rem으로 font-size 단위 변환 pixels → (R)EM 계산 방법 2(r)em = " (root) font size(px, pixel) * 2 " px body의 기본 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.. 2022. 3. 26. CSS selector, nth-child()와 nth-of-type() 비교 ※ CSS selector div: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와 la.. 2022. 3. 19. 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.. 2022. 3. 15. 티스토리 북클럽 스킨의 홈프로모션 슬라이더 컬러와 버튼 오류 수정 티스토리 블로그에서 제공하는 북클럽 스킨의 홈 화면 슬라이더 북클럽 스킨을 티스토리 블로그에 적용하면 초기 홈 화면의 상단에 "main-slider"라고 하는 최대 3개 이미지의 슬라이더 기능을 구현합니다. ※ 2022년 4월 11일 내용 변경 메인 슬라이더는 블로그 관리자에게 3개의 이미지와 연결되는 타이틀과 버튼의 색을 각각 변경할 수 있는 옵션을 제공합니다. - 프로모션 문구와 색상, - 프로모션 자세히 보기 색상과 Hover 색상 ※ "자세히 보기"는 "바로 가기" 버튼을 뜻합니다. 1개의 이미지에만 옵션이 적용되는 문제 발생 최대 3개의 이미지를 슬라이더에 사용할 수 있으니까 각각의 개별적인 옵션이 적용되어야 하는 데, 첫 번째 이미지에서만 정상적으로 나타나고 나머지 2개의 이미지에 관련된 색은.. 2022. 3. 12. 마이크로소프트 Edge와 구글 Chrome의 "캐시된 이미지 및 파일 삭제" 웹브라우저의 캐시 파일 삭제 "캐시 된 이미지 및 파일"만 삭제하는 것입니다. ※ PC와 모바일 기기의 앱이나 웹브라우저의 캐시 저장소에 보관된 임시 파일만 삭제하는 작업입니다. 캐시 저장소는 앱과 웹브라우저의 실행 속도를 높이기 위하여 기기의 저장 공간을 할당하고 다운로드한 파일을 임시로 보관하는 기능을 수행합니다. - 여러 가지 시스템 및 개인 정보를 담고 있는 "쿠키 및 사이트 데이터"는 절대 삭제하지 않습니다. - 티스토리 블로그 관리 파일을 업로드한 후 키보드 F5를 눌러서 새로 고침을 해도 블로그 수정 작업이 반영되지 않고 오류가 발생하는 경우가 있습니다. 캐시 파일을 삭제하고 브라우저를 새로 고침 하여 수정된 파일을 다시 다운로드하고 작업 결과를 정확하게 확인합니다. - 개인 금융 업무를 볼.. 2022. 3. 11. 티스토리 블로그 글의 HTML 태그 입력 방법 이 블로그에 200개 가까이 글을 등록하면서 모든 글의 "태그"를 잘못 입력하여 그것 수정하느라 3일 동안 단순 노동에 시달렸습니다. 혼자만 알고 있기에는 아까워서, 흔적도 남기고 다른 블로거들은 그처럼 어처구니없는 실수를 저지르지 말라고 태그 입력하는 정확한 방법을 설명합니다. 티스토리 블로그에서 태그를 접하는 위치는 3군데입니다. 태그 접근 위치 1. 블로그 글의 "카테고리의 다른 글"과 "댓글" 사이 2. 사이드바의 "태그" 정보 블로그 관리자의 설정에 따라 감출 수도 있고 위치 변경이 가능합니다. "관리", "블로그 관리 홈", "사이드바" 순서로 접근하여 설정할 수 있습니다. 3. 블로그의 원하는 위치에 "태그" 정보를 담은 페이지로 안내하는 링크를 붙일 수 있습니다. 아래 "태그" 버튼은 블로.. 2022. 1. 15.
