웹 컴포넌트 스타일링 관리 (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 코드가 혼재되어 유지보수가 어려우며 재사용이 안되기 때문에 동일 스타일을 여러 요소에 적용하기 위해 중복코드가 발생할 수 있다. ..
라이브러리를 사용할때, 보통 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가 빠져있는 가이드 스타일 가이드 장점 확장성이 있어서 커뮤니케이션 비용이 줄어든다. 일관된 사용성 새로운 디자인을 할 때, 스타일 가이드를 토대로 재사용에 대..
jQuery는 DOM 객체를 탐색, 접근하여 조작하는 여러가지 방법을 제공한다. 실무에서 많이 사용하는 메서드 위주로 요약해서 작성하였으며 정확한 정보들을 확인하고 싶다면 jQuery 공식 사이트를 참조하면 된다. animate css 속성의 애니메이션 효과를 만들 수 있다. // CSS #box { width:300px; height:300px; background:red; } // HTML // jQuery $('#box').animate({ opacity : 0.25, width : '100px', height : '100px' }, 5000, function(){ // 5000은 5초를 의미 // 종료 후 실행될 코드 작성 }); show & hide 선택자를 즉시 표시하거나 감춘다. css 메서..