![]()
📌 문제 input 태그의 자동 완성을 선택했을 경우, 필드 색상이 생기는 문제가 발생했다. 이처럼, 크롬, 사파리 브라우저 등에서 input에 자동 완성 기능으로 텍스트를 선택하면 원치 않는 배경색으로 변경되는 경우가 있다. 📌 해결 방법 자동완성 시 스타일링은 CSS로 제어가 가능한데 :autofill을 사용해 제어한다. :autofill hover, active 등과 같이 선택자에 추가하는 의사 클래스로 input 요소의 값이 자동으로 채워질 때 동작 해당 배경색은 -webkit-box-shadow 프로퍼티로 변경할 수 있다. 추가로 자동 완성 기능 시 폰트 색상도 원하지 않는 색상으로 변경되는데 -webkit-text-fill-color 프로퍼티로 변경 가능하다. input:-webkit-auto..
![]()
태그는 해당 문서에 대한 정보인 메타데이터(metadata)를 정의할 때 사용한다. 요소는 , , , , 요소와 같은 다른 메타데이터 관련 요소들이 나타낼 수 없는 다양한 종류의 메타데이터를 제공할 때 사용되며, 이렇게 제공된 정보는 브라우저나 검색 엔진, 다른 웹 서비스에서 사용하게 됩니다. 이러한 요소는 언제나 요소 내부에 위치해야 한다. 만약 name 속성이나 http-equiv 속성이 명시되었다면 반드시 content 속성도 함께 명시되어야 하며, 반대로 두 속성이 명시되지 않았다면 content 속성 또한 명시될 수 없다. HTML5에서는 요소를 통해 웹 페이지에서 사용자가 볼 수 있는 영역인 뷰포트(viewport)를 제어할 수 있도록 name 속성에 viewport 속성값을 제공하고 있다. ..
![]()
프로젝트를 진행 중, 클래스를 먹여도 적용이 안 됐다. 클래스 여러 개 넣어서 그런 줄 알았는데 속성들 중에도 우선순위가 중요하다는 것을 깨달았다. 그래서 오늘은 우선순위에 대해서 정리하고자 한다. 📌 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를 줄 수 ..
