본문 바로가기
728x90
반응형

CSS2

[React] 웹 컴포넌트 스타일링 관리 styled components로 시작하기 고민의 시작 React를 사용할수록 css 코드를 어떻게 하면 똑똑하게 관리할 수 있을지 고민하게 됐다. 기존에 사용하는 방식은 흡사 무지성인 것 같은 Import 방식이다. // App.js import "styles.css"; const App = () => { return( ... ); } Import 방식은 순수 JS로만 프론트를 짤 때 사용하던 방식이다. css 파일을 하나 만들어주고 그 파일을 가져와서 입혀준다. 이 방법으로 아직까지는 단점을 찾지 못했다. 하지만 React로 프론트를 짤 때 좀 더 똑똑한 혹은 편리한 css 관리가 있지 않을까? 프론트엔드 팀원과 고민 공유 프론트엔드 팀원분과 서로 개발 이야기를 하다가 저절로 고민을 공유하게 되었다. 실제 실무에서는 어떻게 관리하는지 궁금하기.. 2023. 1. 6.
[HTML/CSS] 자동으로 조절되는 세로줄 긋기 Start! 프론트엔드 개발자는 아니지만 태그를 이용해서 가로선을 만들 수 있다는 것을 알고 있었다. 개인 프로젝트에서 화면정의서를 만들다가 연출면에서 선을 세우면 좋겠다는 생각을 했다. 물론 피그마로 디자인을 할 때까지만 해도 이 선 세우는게 그렇게 오래걸릴 줄 몰랐다. 시행착오 끝에 세로줄 긋기에 성공한 나의 과정을 시작하도록 하겠다. 혹시 하는 방법만 알고 싶은 사람은 맨 아래 '정리'에 간략하게 정리해두었으니 참고하길 바란다. 예..? 선을 세우라고요? 현재 개인 프로젝트로 만들고 있는 에는 스레드(내용)를 한 번에 볼 수 있는 List가 존재하고 디자인 요소를 넣기 위해 세로선이 필요했다. 처음엔 가로선을 그을 수 있는 태그로 만들 수 있다고 생각했는데.. 아니었다. 찾아보니 현재까지 세로선을 손쉽게 만들 .. 2022. 12. 13.
728x90
반응형