웹 컴포넌트 스타일링 관리 (CSS-in-HTML, CSS-in-CSS, CSS-in-JS) 웹 개발에서 CSS를 적용하는 방식은 프로젝트의 구조와 요구 사항에 따라 다양하게 선택할 수 있으며, 주요 스타일링 접근 방식으로는 CSS-in-HTML, CSS-in-CSS, CSS-in-JS가 있다. CSS-in-HTML인라인 스타일링을 말하며, HTML 요소에 style 속성을 사용해서 해당 요소에 직접 스타일을 적용하는 방식이다.소규모의 간단한 스타일을 적용할때 사용할 수 있으며, 해당 요소에만 영향을 준다.별도의 css 파일이 필요없다. 하지만 html 태그와 style 코드가 혼재되어 유지보수가 어려우며 재사용이 안되기 때문에 동일 스타일을 여러 요소에 적용하기 위해 중복코드가 발생할 수 있다. ..
타이머, 숫자 가변폭 폰트를 고정폭 폰트로 font-variant-numeric CSS 타이머 UI에서 숫자 값을 감싼 wrapper이 움직이는 문제가 있었다.이유는 날짜와 시간이 동적으로 들어가기때문에 고정폭을 적용하지 않은 UI였고, 이 때문에 발생했다.동영상을 잘보면 미세하게 끝이 움직인다. 적용 전 왜 이런 이슈가 생기는 걸까?고정폭 폰트, 가변폭 폰트가 각각 존재하기 때문이다.말 그대로 고정폭 폰트는 각 글자가 동일한 폭을 차지하며 가변폭은 글자의 폭이 동일하지 않는 폰트를 말한다. 이때는 어떻게 고정폭으로 적용할까?아래 CSS만 적용하면 바로 해결된다. *물론 사용하는 폰트가 OpenType 포맷이어야함font-variant-numeric: tabular-nums; 적용하고나니 숫자모두 동일한..
라이브러리를 사용할때, 보통 class나 id는 지정되있기 마련이죠. 또한 이런 것을 수정해야하는 경우도 종종 생깁니다. 이때 css를 수정하는 방법을 알아보도록 하겠습니다.! (next, styled-components 사용 방법입니다.) 첫번째 방법은 css 파일을 import하는 방법입니다. 즉 전체 페이지에 대한 스타일시트를 가져오는 방법입니다. 먼저 pages/ 폴더 하위에 _app.js 파일을 생성한 후 스타일시트를 import해주면 됩니다. import '../styles.css'; export default function MyApp({ Component, pageProps }) { return } https://nextjs.org/docs/basic-features/built-in-css..
[아티클 프로젝트 042] NAVER FE devtalk: 디자인 시스템에 대한 소개와 효율성 개선 및 구축 경험공유 - 플랫폼 디자이너 없이 디자인 시스템을 구축하는 프로덕트 디자이너의 우당탕탕 고통 연대기
플랫폼 디자이너 없이 디자인 시스템을 구축하는 프로덕트 디자이너의 우당탕탕 고통 연대기 가이드를 만들기로 결심 플랫폼마다 사용자 UI/UX 다름 업무 용어의 통일성이 없었음 ===> 디자이너가 하나의 프로덕트에 고립되게 되는 현상 ! 플랫폼의 공통사항을 정리하자 Style Guide 개선이유 사용성을 더 좋게 개선하자. 커뮤니케이션이 더이상 발전하지 않았다. 디자인 원칙을 세우자! (문법과 어조를 추가로 통일, 정리하자) 디자인 시스템 - 두가지 시스템을 예시로 들수 있다. 1. UX, Style Guide, Code가 왁벽한 가이드 2. Code가 빠져있는 가이드 스타일 가이드 장점 확장성이 있어서 커뮤니케이션 비용이 줄어든다. 일관된 사용성 새로운 디자인을 할 때, 스타일 가이드를 토대로 재사용에 대..