IT/코딩 CSS 27 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. 북클럽 스킨 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. 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. 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. 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.
