CSS

회사에서 web Player 작업을 하면서 breakpoint 복붙에 진절머리가 나기 시작했었다. 새롭게 사이드 프로젝트를 시작하면서 CSS 작업을 시작하니 역시나 또 breakpoint 구문 복붙 지옥의 시작... '이렇게 복붙을 할 수 밖에 없는건가'란 생각을 계속

이전 글에선 emotion을 사용할 때 breakpoint 복붙 없애기를 살펴보았다. 기간이 좀 지났지만 styled-component에 대해서도 살펴보자!마찬가지로 styled-component에서도 진절머리가 났던 breakpoint 복붙 구문을 가져와보자palet

회사에서 너무 정적인 사이트만 만드는 느낌이라 엄청 동적인 프로젝트를 만들고 싶단 생각이 들기 시작했다.요즘 핫하다는 인터렉티브 웹사이트에 대해 찾아보다가, 패스트캠퍼스 인터렉티브 강의를 발견하여 결제했다.(사실 canvas가 뭔지도 모르고 그냥 인터렉티브에 꽂혀서 결

각 브라우저에는 브라우저마다 기본으로 제공하는 스타일이 존재margin, padding, font 등의 차이가 있거나 기본 default 값이 다르기 때문에 이를 초기화하면서 브라우저마다 스타일의 차이를 줄이고자 Reset CSS 또는 Normailze CSS를 사용모

CSS와 CSS3( = CSS modules)의 가장 큰 차이점은 CSS3가 모듈 기반으로 개발되고 있다는 점순수한 CSS는 CSS 파일 간의 값을 공유할 수 없다.프로젝트의 규모나 복잡도가 커질수록 공유해야 하는 값을 빼먹는 등 실수할 일이 많아진다.CSS의 확장판v

기존에 emotion을 사용하는 방법에 익숙해져 있어 CSS의 기본 사용법을 까먹었다CSS 기본 사용법을 React와 함께 살펴보자!Rreact 공식 레퍼런스에서는 명확한 스타일링 가이드르 제공하지 않는다.React 컴포넌트에 CSS 인라인 스타일을 바로 적용하는 것이

기존 코드 분석이나 리팩토링을 하는 과정에서 오히려 기초인 HTML, CSS가 부족하단 생각이 매일매일 든다.요즘 매우 빡치는(...^^) 기존 코드 분석을 하며 새롭게(?) 학습한 position에 대해 정리해보자!position 속성을 통해 문서 상에 요소를 배치하

반응형은 할 때마다 전~혀 모르겠다rem도 root단의 font size에 따라서 반응형으로 슝슝 움직이는거 아닌가란 생각을 했는데 그것도 아니다.이번 기회에 rem에 대해 살펴보자!rem은 root em으로, 최상위 요소 (보통 html 태그)에 지정된 font si

React + styled-component 조합으로 기본 input checkbox를 custom해보자!기본 checkbox는 회색?검은색? border에 check시 퍼런색 배경이 나타난다.이런 border와 background 등을 custom 하기 위해서는 기본