Frontend/CSS11 [ styled-components ] override 우선순위를 제일 높게 설정하는 2가지 방법 📍 override 우선순위를 제일 높게 설정하는 2가지 방법 styled-components를 사용해 기존 style을 override하는 경우 우선순위가 제대로 적용되지 않는 경우가 있다. 이번에 마주한 이슈는 headlessUI 패키지의 Dialog 컴포넌트에 custom style을 override하려는데 의도대로 적용되지 않는 이슈였다. 부지런히 검색해보니 styled-component issues - #2620에 나와 비슷한 문제를 겪고 있는 글을 찾을 수 있었다. 원인은 React의 createPortal이었는데, portal의 특성상 portal을 사용하게 되면 해당 element의 DOM이 현재 위치가 아닌 다른 위치로 변경되는데, styled component가 바뀐 DOM의 위치를 알.. 2023. 4. 17. [ CSS ] line-height 단위 알아보기 📍 line-height 단위 알아보기 css로 line-height를 작성하다 보면 값의 단위가 각기 다른 모습을 볼 수 있다. 가령, normal을 사용하거나, number 타입을 사용하거나, em을 붙이는 경우가 있다. 나는 주로 px를 사용하지만 동료들은 다른 단위를 사용하는 경우가 있어 기초적인 내용이지만 지금 기억해 두면 추후에 공식문서를 찾는 시간을 아낄 수 있지 않을까 하는 마음에 글로 남긴다. (내용은 MDN을 참고했다.) line-height는 주로 text line 사이의 거리를 조절 할 때 사용한다. line-height의 단위는 4가지가 있다. /* * 1. : line-height: 2.3; * 2. : line-height: 3em; * 3. : line-height: 50%;.. 2023. 2. 17. [ styled-components ] 특정 element hover시 tooltip 보여주기 📍 styled-components를 이용해 특정 element hover시 tooltip 보여주기 React에서 styled-component로 디자인 작업 중 제목 그대로 특정 element에 마우스 hover시 tooltip을 보여주는 스펙이 있었다. 이때까진 특정 element에 hover만 하면 끝이었는데, 추가로 tooltip까지 동작하게 하는 것은 처음이었다. 내키는 대로 코드를 작성했는데, 원하는 대로 작동하지 않았다. 공식문서를 찾아보니 component selector 패턴을 통해 스타일에 지정된 다른 구성 요소를 보간하여 자동으로 생성된 클래스 이름을 참조할 수 있는 강력한 패턴이라고 나와있었다. 즉, styled로 선언한 컴포넌트를 다른 클래스에서 호출 할 수 있다는 이야기인데, 이.. 2023. 2. 2. [ CSS ] parents div에 의해 unclickable 하게 되는 children div를 clickable하게 만들기 📍 parents div에 의해 unclickable 하게 되는 children div를 clickable하게 만들기 제목이 어려울 수 있지만 background: transparent인 Parent Div 밑에 clickable 할 수 있는 Child div가 있을 때 클릭하는 방법을 작성하려고 한다. 기존에는 부모 Div만 클릭 할 수 있어 자식 Div는 클릭할 수 없었지만 css의 pointer-events 속성을 이용하여 해결 할 수 있었다. 글로 이해하기 힘들다면 하단의 그림을 보자.(그림은 발(🦶🏾)로 그렸다.) 내가 해결한 방법은 부모 Div에 pointer-events: none을 주고, clickable 할 target Div에 pointer-events: all을 주자. 추가로 poin.. 2022. 11. 23. [ CSS ] 공백이 포함된 문장 모두 줄바꿈하기 📍 공백이 포함된 문장 모두 줄바꿈하기 반응형을 고려하며 공백이 포함된 문장까지 브라우저의 너비가 줄어들면 해당 문장을 모두 줄바꿈해야하는 니즈가 생겼다. 그래서 줄바꿈 관련 CSS인 word-break와 white-space 그리고 overflow 등을 살펴보며 해답을 생각했지만 뾰족한 수가 나오지 않았다. 그래서 팀원들에게 현재 생긴 이슈를 공유하며 해결법을 찾고있는데, 공백을 뜻하는 와 word-break: keep-all 속성을 이용하면 해결할 수 있다는 팀원의 말을 듣고 작성해보니 해결됐다. 추가로 란, Non-breaking Space의 약어인데, 단어 뜻 그대로 공백을 의미한다. 특수기호가 붙은 이유는 일반적인 문자과 구분하기 위해서다. 외관상으로 공백이 있는것처럼 보이지만, 이 위치에서 줄.. 2022. 8. 9. 이전 1 2 3 다음
