카테고리 253 word-break, overflow-wrap, line-break word-break 단어의 절단 여부와 방법 - CSS property - used to specify how a word should be broken or split when reaching the end of a line (단어가 행의 끝 지점을 지나칠 때 자를 것인지 여부) - used to split/break long words and wrap them into the next line (다시 말해 다음 행으로 넘어가는 긴 단어를 자를 것인지 여부) /* 키워드 값 */ /* normal, break-all, keep-all, break-work */ word-break: normal; word-break: break-all; word-break: keep-all; word-break: bre.. 2022. 6. 2. 클릭 후 입력(input) 필드의 색과 placeholder의 글자 색 변경 현재 블로그에 사용하는 검색 입력 창의 모습입니다. 배경 색 #eee, placeholder의 글자 색 #555입니다. 마우스로 클릭하고 난 후 커서가 중앙에서 깜박이고 있으며 입력 창의 배경 색이 #fff으로 변경되고, placeholder 글자는 사라졌습니다. 편하게 입력할 준비가 된 상태입니다. 클릭을 했는 데도 placeholder 글자가 남아 있으면 입력하기 전에 먼저 지워야 하는지 고민하게 됩니다. HTML의 placeholder는 입력 창 혹은 입력 필드에 집어넣을 내용에 대한 설명을 간단하게 나열한 문구입니다. ※ 웹 브라우저의 쿠키에 저장되어 있던 예전에 입력한 검색어들과는 관련이 없습니다. 웹 브라우저로 접속한 웹 사이트에서 사용자가 기존에 입력했던 입력 단어를 입력 필드에 미리 제시하.. 2022. 5. 31. 북클럽 스킨 팝업창 최근 댓글 링크 관련 오류 정정 Book Club (tistory.com) 김영사 콘텐츠로 제작한 티스토리 북클럽 스킨 데모 페이지입니다. 북클럽 스킨은 모바일 화면에서 팝업 윈도를 띄웁니다. 화면이 작기 때문에 PC 화면의 사이드바(aside)를 모바일 화면의 팝업창으로 이동한 형태입니다. 모바일 기기에서 왼쪽과 같은 메뉴 버튼을 누르면 본문 위에 팝업 윈도가 뜨면서 사이드바의 내용을 나열하게 됩니다. 팝업창의 댓글 리스트에서 하나의 링크를 마우스로 클릭하면, 1. 해당 페이지를 웹브라우저의 메인 창에 펼치고 2. 클릭한 댓글의 위치로 화면이 이동합니다. https://skin-demo-0053.tistory.com/27#comment17308450 페이지 주소 + 글 번호(27) + 댓글 번호(#comment17308450) 댓글 .. 2022. 5. 26. 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 .. 2022. 5. 16. 티스토리 Odyssey 스킨의 "관련 사이트" 메뉴 오류 수정 Odyssey는 가장 최근에 티스토리에서 배포한 스킨입니다. 데모 사이트는 명칭이 문화재청으로 등록되어 있습니다. https://skin-demo-5zif0.tistory.com/ 이곳에 들어가면 티스토리에서 데모 사이트로 제공하는 스킨의 특징을 점검할 수 있습니다. 블로그 관리 홈으로 들어가면 "나의 링크" 메뉴가 있습니다. 자주 찾는 사이트를 추가하면 드롭 다운 메뉴로 페이지 오른쪽 하단에 "관련사이트"에 등록된 것이 보입니다. 겉 보기에는 멀쩡하지만 X 버튼을 눌러서 리스트를 접어도 그 위치를 마우스로 클릭하면 해당 링크로 연결되는 오류를 발견할 수 있습니다. 위의 이미지를 예로 설명하면, 일단 관련 사이트 메뉴를 접고 현재 보이지 않는 "티스토리"와 "다음"의 위치를 마우스로 찍으면 링크가 살아 .. 2022. 4. 30. 북클럽 스킨 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.. 2022. 4. 29. 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.
