CSS14 [CSS] 말줄임 See the Pen 두 줄 말줄임 by jominh (@thatBamm) on CodePen. 말줄임 2023. 7. 7. [CSS] 아이폰 노치 영역 📌노치(Notch)란? 아이폰X 이상부터 위/아래 라운드 영역까지 디스플레이 영역으로 포함하고 있다. 해당 영역을 제외하지 않고 작업 진행 시 웹뷰에서 컨텐츠(Header, Footer, TabBar.. 등)가 가려지거나 짤려 보이는 현상이 발생한다. 📢 노치 대응 방법 노치 영역을 자동으로 계산해 주는 CSS 속성인 env(), constant() 를 사용한다. IOS 11 당시 constant()속성을 제공하였으나, IOS 11.2버전부터 제거되고 env() 속성을 사용한다.(업데이트 되지 않은 경우를 생각하여 둘 다 적용 시켜준다.) //IOS 11버전 padding-top:constant(safe-area-inset-top); padding-right:constant(safe-area-inset-.. 2023. 7. 4. [CSS 속성] appearance 속성 - Form 요소 초기화 📢 appearance 속성 소개 이 속성은 운영체제 및 브라우저에 기본적으로 설정되어 있는 테마를 기반으로 하는 UI 컨트롤의 기본 모양을 제어하는데 사용 See the Pen Untitled by jominh (@thatBamm) on CodePen. 2023. 6. 9. [CSS 선택자] :has() 가상 선택자 📢 :has(선택자) 정의 해당 부모 선택자가 특정 자식 선택자를 가지고 있을 경우 적용 (CSS의 if문 형식) (https://developer.mozilla.org/en-US/docs/Web/CSS/:has) See the Pen Untitled by jominh (@thatBamm) on CodePen. 📢 :has() 와 :not() 조합 어떤 순서로 조합하냐에 따라 결과값이 달라진다. See the Pen [CSS 선택자] :has() , :not() 조합 by jominh (@thatBamm) on CodePen. 📢 브라우저 호환성 2023.06.08 기준 Firefox 계열에서 지원하지 않는다. 출처 : https://caniuse.com/?search=%3Ahas() 2023. 6. 8. [CSS 속성] Edge의 input password 눈 아이콘 삭제 브라우저 Microsoft Edge 에서 input[type="password"]의 눈 아이콘 히든 적용 CSS input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear {display: none;} 2023. 1. 5. [CSS 속성] input[type="date"] 속성 📢 input[type="date"] 속성 - input[type="date"] 기본 HTML - placeholder 설정 input[type='date']::before {content:attr(data-placeholder);} - 기본 달력 아이콘 삭제 input[type="date"]::-webkit-calendar-picker-indicator {background:transparent;} - 아이폰 datepicker 선택시 텍스트 좌측정렬 (기본값은 가운데정렬) input::-webkit-date-and-time-value {text-align:left;} See the Pen Untitled by 조민혁 (@iqgzrljw-the-typescripter) on CodePen. 2023. 1. 4. 이전 1 2 3 다음
