카테고리 253 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. 국민 건강 보험 가입자 자격 변동에 따른 보험료 부과 언제부터? 국민 건강 보험 홈페이지 국민 건강 보험 가입자 자격의 변동으로 인한 보험료 부과 및 징수 기준일에 대한 의문 사항을 간단하게 기재하였습니다. 개인적으로 국민 건강 보험 홈페이지와 고객센터(1577-1000)에 문의하여 얻은 정보를 간추린 것입니다. 잘못된 내용이 있을 것이므로 정확한 정보는 해당 기관 홈페이지 정보 혹은 전화 문의로 대신하시기 바랍니다. 지역가입자 지역가입자의 보험료는 가입자의 소득, 재산(자동차 포함)을 참작하여 정한 부과요소별 점수를 합산한 보험료 부과점수에 점수당 금액을 곱하여 보험료 산정 후 경감률 등을 적용하여 세대단위로 부과합니다 직장가입자 보수월액 보험료 직장가입자의 소득 능력에 따라 보험료를 부과하는 것이며, 전년도 신고한 보수월액으로 보험료를 부과한 후 당해연도 보수총액.. 2022. 2. 8. 구글 애드센스 수익금 수령 내역 애드센스 결제 설정 결제 계정 ID - 12자리 숫자 - 구글 지정 결제 계정 닉네임 - AdSense pub-16자리 숫자 - 수정 가능 지급 일정 - 월별 지급 - 청구 기준액 US$100 - 수정 가능 결제 프로필 ID - 12자리 숫자 - 구글 지정 국가/지역 - 대한민국(KR) 계정 유형 - 개인 이름 및 주소 - 자신의 주소와 이름을 한글로 입력 미국 세금 정보 - 미국 세금 정보 - 소득세 신고서에 표시된 이름: 영문으로 입력 - 영주권 주소: 도, 시, 구까지 선택하고 나머지 영문으로 입력 문서 언어 환경설정 - 한국어 결제 서비스 사용자 - 기본 연락처 - 모든 결제 이메일 수신 지급받을 방법 Google AdSense 홈 > 지급 > 결제 정보 "지급받을 방법"의 결제 수단 관리 "결제.. 2022. 1. 25. 티스토리 블로그 글의 HTML 태그 입력 방법 이 블로그에 200개 가까이 글을 등록하면서 모든 글의 "태그"를 잘못 입력하여 그것 수정하느라 3일 동안 단순 노동에 시달렸습니다. 혼자만 알고 있기에는 아까워서, 흔적도 남기고 다른 블로거들은 그처럼 어처구니없는 실수를 저지르지 말라고 태그 입력하는 정확한 방법을 설명합니다. 티스토리 블로그에서 태그를 접하는 위치는 3군데입니다. 태그 접근 위치 1. 블로그 글의 "카테고리의 다른 글"과 "댓글" 사이 2. 사이드바의 "태그" 정보 블로그 관리자의 설정에 따라 감출 수도 있고 위치 변경이 가능합니다. "관리", "블로그 관리 홈", "사이드바" 순서로 접근하여 설정할 수 있습니다. 3. 블로그의 원하는 위치에 "태그" 정보를 담은 페이지로 안내하는 링크를 붙일 수 있습니다. 아래 "태그" 버튼은 블로.. 2022. 1. 15. 도로교통법 개정안 2022년 7월 12일 시행 도로교통법 개정안 ‘차보다 사람이 우선인 보행자우선도로 패키지법’(「보행안전 및 편의증진에 관한 법률」,「도로교통법」) 2021년 12월 9일 국회 본회의 통과 2022년 1월 11일 공포(公布) 6개월 후 2022년 7월 12일 시행((施行) 개정안 골자 - 제27조 1항 운전의 보행자 보호 의무 규정 - 운전자가 1. 교차로에서 우회전 할 때 2. 신호등 없는 작은 횡단보도 등을 지날 때 3. 어린이 보호구역 내에 설치된 횡단보도 개정 전 - 횡단보도 위에 건너는 사람이 있을 경우 횡단보도 앞에서 일시 정지 개정 후(1) - 횡단보도 위에 사람이 없어도, 횡단보도쪽 인도에 사람이 보이면 무조건 일시 정지 개정 후(2) - 어린이 보호구역 내에 설치된 횡단보도 앞에서는 신호등이 없어도 무조건 일시 정지.. 2022. 1. 11. 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.
