DDD120의 기록장 DDD120의 기록장

css

• [CSS] focus-within과 focus-visible

  CSS 2024. 1. 10. 17:17

  CSS에서 포커스 상태를 스타일링 하기 위해 가상클래스인 focus를 주로 사용하였지만 focus 이외에 focus-within과 focus-visible도 있다는 사실을 알았다. focus-within이란? focus-within을 사용한 요소는 해당 요소나 내부 요소 중에 포커스 상태가 되면 활성화가 된다. div:focus-within { background: red; } div 요소에 focus-within을 사용하여 스타일링을 한 경우 div 안의 input이 포커스를 받으면 활성화가 되어 배경색이 빨강색이 된다. 기존의 focus와 달리 해당 요소를 포함하여 내부 요소까지 감지하여 활성화가 된다는 차이점이 있다. focus-visible이란? focus-visible을 사용한 요소는 해당 요소..

  Read More
• [CSS] color-scheme, prefers-color-scheme 속성

  CSS 2023. 7. 10. 23:39

  color-scheme - CSS: Cascading Style Sheets | MDN The color-scheme CSS property allows an element to indicate which color schemes it can comfortably be rendered in. developer.mozilla.org color-scheme이란 속성을 봐서 무엇인지 찾아보았다. 요즘 웹페이지에서 많이 다크 모드를 구현하듯이 속성의 값을 'light'이나 'dark' 등을 사용하게 되면 운영체제 시스템에서 모드에 맞게 UI를 조정하는 속성인 것 같다. See the Pen Untitled by DDD120 (@DDD120) on CodePen. 위의 CSS 코드를 보면 배경색 등 따로 스타일을..

  Read More
• [CSS] SVG path의 currentColor 키워드

  CSS 2023. 4. 13. 17:24

  CSS의 currentColor 키워드는 현재 color 속성 값을 그대로 상속받는 키워드이다. 다크모드를 구현할 때 svg를 사용하였는데 path fill 속성에다 모드가 바뀔 때마다 color 값을 주고 싶었다. 이때 currentColor 값을 사용하면 현재 color 값을 상속받아 다크모드를 구현할 수 있었다.

  Read More
• [CSS] 창 축소 시 요소 짤림 해결

  CSS 2023. 3. 13. 15:24

  반응형이 아닌 요소의 너비가 딱 정해진 웹페이지를 만드는 중에 창을 축소하거나 화면을 확대할 때 스크롤이 생기지만 요소의 일부가 짤려 보이지 않는 경우가 생겼다. 이때 min-width, min-height를 이용하여 해결이 가능하다. 만약 보여줄 요소가 width는 1280px, height가 600px이라면 아래와 같이 적용해주면 된다. 나의 경우 body에 적용하니 해결되었다. min-width: 1280px; min-height: 600px;

  Read More
• [CSS] flex: 1이란

  CSS 2022. 9. 14. 20:31

  flex: 1을 사용할 때마다 헷갈려가지고 매번 구글에 검색하였다. 이 의미에 대해 확실히 이해하고자 쓴다! flex flex-grow, flex-shrink, flex-basis를 한 번에 사용하는 단축 속성 flex: 1 === flex: 1 1 === flex: 1 1 0 flex: 1은 flex: 1 1, flex: 1 1 0과 같다. 즉, 아래와 같다. flex-grow: 1; flex-shrink: 1; flex-basis: 0; flex-grow [기본값] flex-grow: 0; 0 : 부모의 너비가 남을 경우에도 해당 아이템의 기본 너비를 유지한다. 1 : 부모의 너비가 남을 경우 너비를 채운다. flex-shrink [기본값] flex-grow: 1 0 : 부모의 너비가 해당 아이템보다..

  Read More
• [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을 걸어 전환되게 한 트릭이다. 내가 구현하려는..

  Read More
• [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..

  Read More
• [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번째 부모 엘리먼트의 특정 자식 ..

  Read More