CSS
-
[CSS] gradient transition 적용하기 (React)CSS 2022. 7. 26. 01:08
background-image 속성을 통해 그라디언트를 표현하고 transition 값을 주면 예쁘게 전환될 줄 알았지만... 되지 않았다. Transitioning Gradients In, CSS, you can’t transition a background gradient. It sure would be nice if you could: .gradient { background-image: linear-gradient( to right, hsl(211, 100%, keithjgrant.com 검색해보니 ::before와 opacity 속성을 이용하여 구현한 예제가 있었다. ::before에 전환 될 그라디언트를 작성하고 opactiy에 transition을 걸어 전환되게 한 트릭이다. 내가 구현하려는..
-
[CSS] 자동 완성 시 input 배경색 변경CSS 2022. 7. 15. 13:18
webkit 기반 브라우저에서 자동완성 기능을 사용할 때 배경색이 바뀐다. 이를 해결하기 위해선 :autofill 의사 클래스를 사용하면 된다. 🤔 :autofill 요소의 value가 브라우저에 의해 자동으로 채워질 때 동작한다. 사용자가 입력하면 동작하지 않는다. ❗NOTE 많은 브라우저의 user agent style sheets(각 브라우저 마다 CSS 기본 규칙)는 :-webkit-autofill 스타일 선언에서 !important를 사용한다. ex) 크롬의 내부 스타일 시트 background-color: rgb(232, 240, 254) !important; background-image: none !important; color: -internal-light-dark(black, white..
-
[CSS] emotion 사용 시 :nth-child CSS selector 경고CSS 2022. 6. 25. 18:27
The pseudo class ":nth-child" is potentially unsafe when doing server-side rendering. Try changing it to ":nth-of-type" 가상 클래스 ":nth-child"는 서버 사이드 렌더링 수행 시 잠재적으로 안전하지 않다. ":nth-of-type"으로 변경하라 CSS 라이브러리로 emotion 사용 시에, :nth-child을 사용하니 위와 같은 경고 메시지가 나타났다. ":nth-of-type"으로 변경하니 경고는 사라졌지만 이유가 무엇인지 궁금해졌다. :nth-child와 :nth-of-type 차이 :nth-child(n) :nth-child 부모 엘리먼트의 모든 자식 엘리먼트중 n번째 부모 엘리먼트의 특정 자식 ..
-
[CSS] 콘텐츠의 길이와 상관 없이 footer 하단 고정CSS 2022. 6. 10. 13:39
🚩목표 콘텐츠의 길이와 상관 없이 footer를 하단에 고정시켜야 한다. header의 경우 스크롤을 내릴시 상단고정이 되어야 한다면 position:fixed를 사용하면 된다.하지만 footer의 경우 스크롤이 생길 때 항상 고정되어 있어 어색하다.position: absolute로 하단에 위치해보아도 콘텐츠가 길어져 스크롤이 넘어서면 하단에 위치하지 않게 된다. 💡방법 : min-height min-height를 이용해 화면에 꽉채우게 한다. height의 기본 속성은 auto이니 컨텐츠의 길이가 화면보다 짧으면 화면이 꽉차게 나오고 길다면 길이만큼 스크롤이 발생 Header Content Footer /* css */ * { box-sizing: border-box; } header { width:..
-
[CSS] aspect-ratio : 요소의 비율 유지하기CSS 2022. 6. 1. 23:58
목적 반응형 요소를 만들 때 이미지(요소)의 비율을 그대로 유지하려고 한다. 비율은 16:9로 가정하였다. 방법 1. padding-bottom (or padding-top) 2. aspect-ratio 1. padding-bottom (or padding-top) .wrapper { position: relative; width: 100%; height: 0; overflow: hidden; padding-bottom: 56.26%; } .content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } - height를 0, padding-bottom 값을 %로 지정하여 너비에 따라 보여질 높이의 비율을 정할 수 있다. - 요소의 ..