CSS

📌 문제 input 태그의 자동 완성을 선택했을 경우, 필드 색상이 생기는 문제가 발생했다. 이처럼, 크롬, 사파리 브라우저 등에서 input에 자동 완성 기능으로 텍스트를 선택하면 원치 않는 배경색으로 변경되는 경우가 있다. 📌 해결 방법 자동완성 시 스타일링은 CSS로 제어가 가능한데 :autofill을 사용해 제어한다. :autofill hover, active 등과 같이 선택자에 추가하는 의사 클래스로 input 요소의 값이 자동으로 채워질 때 동작 해당 배경색은 -webkit-box-shadow 프로퍼티로 변경할 수 있다. 추가로 자동 완성 기능 시 폰트 색상도 원하지 않는 색상으로 변경되는데 -webkit-text-fill-color 프로퍼티로 변경 가능하다. input:-webkit-auto..

프로젝트를 진행 중, 클래스를 먹여도 적용이 안 됐다. 클래스 여러 개 넣어서 그런 줄 알았는데 속성들 중에도 우선순위가 중요하다는 것을 깨달았다. 그래서 오늘은 우선순위에 대해서 정리하고자 한다. 📌 CSS 우선순위 3가지 규칙 1. 기본적으로 뒤에 나오는 css가 우선순위가 높다. 2. !important > inline style attribute > id > class, 다른 attribute, Pseudo 클래스(:first-child같은 것) > tag element, Pseudo 엘레먼트(::before같은 것) 순으로 우선순위가 높다. 3. 우선순위가 같다면 개수가 많은 css가 우선순위가 높다. !important와 inline style attribute은 실무에서 사용을 제한하는 경우..

네 컷 아카이브 프로젝트의 메인페이지 css를 진행하던 도중 배경이미지만 opacity를 줘도 이미지 위에 있는 글자와 함께 같이 투명해지는 문제가 발생했다. 📌 해결방법 가상요소를 이용해 필터를 만들었다 ::before html css 배경화면에만 opacity를 주려고 했으나 아래 방식으로는 글자색까지 투명해지는 것을 볼 수 있었다 .. 이러한 문제를 해결하고자 박스에 before 가상요소를 썼다. 가상요소의 position을 absolute로 주고 width: 100%, height: 100%로 주면 배경 이미지 크기를 동일하게 맞출 수 있다. 또한 박스의 position은 relative로 줘서 배경이미지보다 위로 올라오게 한다. 그러면 글씨에 영향주지 않고 배경이미지에만 opacity를 줄 수 ..