반응형 📍 Front-End/🜸 HTML & CSS7 rem과 em의 차이 1. rem 기준값의 배수로 표현한 크기. 기준값은 최상위 요소에 지정된 font-size이다 대체로 html, body에 기준값이 선언된다 html { font-size : 16px } div.container{ font-size : 2rem // 32px } div.container > div.contents { font-size : 2rem // 32px } 최상위 요소인 html에 font-size 기준값이 16px로 선언되어 있고 하위 요소에 선언된 2rem은 16px * 2 = 32px의 폰트 사이즈를 가지게 된다 2. em em도 rem과 동일하게 기준값의 배수로 표현하는 단위이다. rem과 차이점은 기준값이 최상위 요소가 아닌 현재 요소에 선언된다는 점이다. div { font-size: .. 2023. 5. 8. 크롬 브라우저에서 input 자동완성 파란색 배경 없애기 1. 문제 webkit기반 브라우저에서 input 자동완성으로 텍스트를 선택하면 아래 스크린샷 처럼 푸른빛의 background-color가 자동으로 적용된다 2. 원인 크롬 브라우저에서 input 자동완성 사용 시 아래와 같은 css가 기본 에이전트 스타일로 적용된다. 배경색과 컬러가 !important로 적용되어있다 보니 아무리 배경색을 바꾸고 폰트 컬러를 바꿔도 적용이 되지 않는 것이다 background-color: rgb(232, 240, 254) !important; background-image: none !important; color: -internal-light-dark(black, white) !important; 3. 해결 이럴 땐 -webkit-autofill 속성 이용하여 box.. 2022. 10. 18. [CSS] position: absolute; 가 적용된 element의 z-index가 적용되지 않을때 position: absolute가 적용된 element에 z-index 값을 입력했는데도 적용이 되지 않는 이슈가 있었다 다양한 이유가 있겠지만 나의 경우는 부모 element에 잘못된 z-index 값이 적용되어 있었다. 대략적인 구조는 Hello World! 이렇게 부모 요소 아래 자식 요소가 있고 이 자식 요소의 z-index가 작동하지 않는 이슈였다 CSS작성부를 살펴보니 .parent{ position: relative; z-index: 0; } .child{ position: absolute; z-index: 2; } 부모 요소에 z-index: 0;이 적용되어 있는 것이 문제였다. 누가 어떤 의도로 이렇게 작성했는진 모르겠지만.. 이걸 지우고 나니.. 버그가 있었는데요.. 없어졌습니다.. .. 2022. 5. 7. [CSS] IOS에서 <input> element에 적용된 background-color 제거하기 (shadow, border-radius) 분명 크롬에서 개발자 도구 -> IOS를 설정해서 보면 이렇게 깔끔하게 배경색이 없는 input창이 만들어지는데 배포 후 아이폰에서 확인하면 이렇게 배경색이 지정되어 나타난다 원인 IOS에서는 기본적으로 적용되는 스타일이 따로 존재한다 input의 경우 shadow, border-radius, background-color가 사용자 지정과 상관없이 IOS에서 기본으로 적용하는 스타일이 입혀진다 나의 경우 이미 style에 shadow와 border-radius를 적용했기 때문에 IOS가 기본 적용한 shadow와 border-radius가 나타나지 않았지만 backgroundc-color는 내가 지정하지 않은 컬러가 아이폰 상에서 계속 나타났다 해결 해결법은 간단하다 배경색을 투명하게 설정하면 된다! b.. 2022. 2. 16. 이전 1 2 다음 반응형
