CSS
-
[번역] 개별 transform 속성으로 CSS transform을 더 세밀하게 조정하기CSS 2022. 10. 18. 23:24
원문 글: https://web.dev/css-individual-transform-properties/ 이 글은 상기 원문 글을 한국어로 번역한 내용입니다. Finer grained control over CSS transforms with individual transform properties Learn how you can use the individual translate, rotate, and scale CSS properties to approach transforms in an intuitive way. web.dev 하나의 element 에 transform을 적용하려면 CSS transform 이라는 property(속성)을 사용할 수 있다. 이 속성은 하나 이상의 을 차례대로 적용한다..
-
[scss] react-data-grid 에서 기본 sorting 화살표 보여주기.CSS 2022. 5. 20. 19:55
프로젝트에서 표가 들어가는 부분들은 react-data-grid 라는 라이브러리를 사용하고 있다. 헤더를 클릭하면 내림차순, 오름차순, 정렬 기준 선택없음 총 세개의 상태를 보여주는데, 정렬 기준 선택없음의 상태일 때는 화살표가 보이지 않아 화살표를 기본으로 보여주기 위한 방법을 찾았다. 내림차순 & 오름차순이 될 때마다 애니메이션이 들어간 세모가 휘릭휘릭 바뀌기에 처음에는 그 세모가 들어갈 요소만을 선택해 span 의 last-child 뒤에 pseudo selector 를 이용해서 content 를 집어넣었는데, 그렇게 하니 한 번 집어넣은 가상 요소를 내림차순 혹은 오름차순 등 표가 선택될 때마다 안 보이게 해주는 것이 더 복잡해질 뿐이었다 ^ㅠ^ :has 를 사용하고 싶었으나 sass 에서는 변환..
-
hex color 에서 밝기를 어떻게 추출할 수 있을까?CSS 2022. 4. 14. 15:49
현재 진행 중인 프로젝트에서 string 데이터를 ascii 로 비꾸고 -> 이를 hex color 값으로 바꾸어 고유의 색상을 부여하는 작업을 진행 중이다. 이렇게 하면 각 string data 마다 고유의 색상이 정해지기 때문에, 만일 요청한 profile picture가 404 에러로 돌아올 경우, onError를 통해 styling 을 따로 해줄 수 있다. 하지만 그 위에 띄울 유저 아이콘 색상을 결정하는 것이 의외의 난관이었다. 까만색 배경에는 하얀색 아이콘을, 하얀색 배경에는 까만색 아이콘을 띄워주고 싶었기 때문이다. 답은 hex color code 의 근본을 응용하는데에 있었다. hex로 바꾼다음 -> r, g, b 세 가지를 대표하는 두 글자씩을 각기 떼어낸 다음, 일정한 값을 곱하여 그 ..