CSS(3)
-
팝업 포커스 유지하는 방법
수정 이유 서브팝업을 오픈해도 뒤에 있는 메인팝업 내용 수정하고픔 해결방안 서브팝업 클래스에 css 추가 .sub-popup{ pointer-events: none; }
2022.11.11 -
모바일 화면 PC로 시뮬레이션하기 & ios 100vh 오류 수정
CSS로 화면에 딱 맞게 하려고 100vh를 사용했는데, 모바일(IOS)에서 확인해보니 하단바 밑으로 스크롤이 생기는 현상이 생겨버렸다...;; 너무 당황스러워 여러가지 서치해보니 하단바까지 사이즈를 잡아버려서 이런 현상이 일어나는것 같다. 이 현상을 수정할 방법으로 CSS를 수정하는 것으로 해보았다. 방법1 1. 뷰포트를 사용할 엘리먼트에 CSS 추가 (대부분 body나 특정 엘리먼트 선택) .test_elment{ height: 100vh; height: -webkit-fill-available; height: fill-available; } 2. ios용 미디어쿼리 추가 @supports (-webkit-appearance:none) { height: -webkit-fill-available; } ..
2022.09.22 -
@font-face 사용법(로컬 폰트파일 사용 방법)
일을 하다가 웹폰트로 작업한 css를 파일로 다운하여 사용하기로 변경하여 작업을 했는데 하나도 안먹혀서 멘붕....;; 분명 url도 정확히 들어갔는데 적용이 안되어서 하루종일 머리를 쥐어짰는데... 이유는 @font-face에서 내가 sans-serif도 같이 넣어놔서 자꾸 sans-serif 폰트가 먹힌거 같다... 결국 오후쯤에야 이 사실을 알게되고 넘 허탈... 허무... 그치만 이 계기로 font-face 잘 알게되었...ㅋ (아직 잘 모름) 이제부터는 알았으니 실수하지 말자...ㅎㅎ 로컬에 있는 폰트파일을 css에 지정하는 규칙 @font-face { font-family: "사용할 폰트 이름 지정(한개만 사용 가능)"; (필수) src: url("사용할 폰트의 경로 지정") format("폰..
2021.12.03