Frontend176 [ 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. [ Meta tag ] 카카오톡 링크 공유시 og:description이 표시되지 않을 때 📍 카카오톡 링크 공유시 og:description이 표시되지 않을 때 카카오톡에 링크 공유시 기존 openGraph와 다른 정보를 보여주기 위해 meta tag를 수정하는 작업을 하는데, og:title과 og:description을 넣었음에도 og:description이 보이지 않는 이슈가 있었다. 물론 kakao-developers사이트에서 URL 캐시 초기화를 진행했고 og:url도 내가 보여주려고 하는 url과 동일하게 설정했다. 결정적으로 mobile환경에서는 잘 나왔는데, deskTop에서는 잘 나오지 않았다. 여러 번의 삽질 후 원인을 찾았는데 링크 공유시 openGraph의 og:title이 2줄이면 og:description이 보이지 않았다. (kakao developer Docs에 o.. 2023. 1. 11. [ 자바스크립트(JavaScript) ] Pre & Post scripts를 알아보자 📍 Pre & Post scripts를 알아보자 SEO 최적화를 위해 Sitemap 작업 중 package.json 파일 내부에 postbuild script를 생성하는 작업이 있었다. 이전까지는 pre와 post prefix를 사용하는 일이 거의 없어 이것들이 하는 역할을 자세히 알지 못했는데, 이번에 알아보고자 npmjs 공식문서를 살펴봤다. 공식문서에서는 pre와 post scripts를 다음처럼 정의하고 있었다. To create "pre" or "post" scripts for any scripts defined in the "scripts" section of the package.json, simply create another script with a matching name and ad.. 2023. 1. 3. [ 타입스크립트(TypeScript) ] Incorrect (variable) is specified more than once, so this usage will be overwritten 에러 해결하기 📍 Incorrect (variable) is specified more than once, so this usage will be overwritten 에러 해결하기 typescript로 작업하다 다음과 같은 오류를 마주했다. 오류가 발생한 원인은 getListHref를 props로 내려준 위치가 잘못되었기 때문인데, 바로 {...props} 앞에 선언했기 때문이다. 하단의 AS-IS코드를 살펴보면 {...props} 앞에 getListHref를 선언했는데, 이것은 의미가 없다. 왜냐하면 ...props로 내려오는 getListHref을 최종적으로 적용하기 때문에 처음에 선언한 getListHref를 항상 override하기 때문이다.이럴 때는 TO-BE 코드처럼 내가 적용하고 싶은 getListHre.. 2022. 12. 28. 이전 1 2 3 4 5 6 7 ··· 36 다음
