ez-dev-oo

◾ WHY이메일 receive form을 만들던 중, 본문을 입력받는 textarea의 height을 고정된 값으로 설정해주었더니 디자인이 조금 둔해보였다.나는 스크롤을 굳이 늘릴 필요도 없을 뿐더러, 조금 더 사용자 반응형으로 만들고 싶었기 때문에 사용자 입력에 따라 높이가 조절되도록 변경해주었다. 아래의 블로그를 참고하여 코드에 적용해주었다. [css] 사용자의 입력에 따라 높이가 조절되는 textarea 만들기 (input 줄바꿈하기, textarea 높이 자동 조input과 같은 모습을 하고 있지만, 그 형태를 유지하면서 줄바꿈을 할 수 있는 UI를 만들고 싶을 때 ? 자동으로 높이가 조절되는 textarea를 만들어 구현이 가능하다. 자동 높이 조절 textarea ? 기본적joyful-deve..

며칠 전 시작한 portfolio 프로젝트에서 처음 써보는 tailwind css를 도입했다. 처음 사용해보는 tailwind의 경험은 그닥 좋지 않았다.  tailwind 사용기 여러 단점이 있었지만 그 중 테일윈드만의 방대한 css 작성법이 너무나도 큰 불편함으로 다가왔고 결국 기존의 css 방식으로 돌아가 다시 시작하기로 했다.  tailwind css를 도입했던 이유는 nextjs와 tailwind의 호환성이었다. 아무래도 next에서 만든 css이다 보니 여러가지 이점이 있었지만, 스타일링 코드가 명확히 구분된 구조를 선호하고 또 이미 익숙해진 나에게 테일윈드는 잘 맞지 않았다.  그래서 다시 기존에 주로 사용하던 css-in-js 를 사용하려고 했으나, nextjs와 css-in-js는 궁합이..

p: paddingp - n: 사방으로 간격 npx - n: x좌표로만 간격py - n: y좌표로만 간격pt - n: top에만 간격pb - n: bottom에만 간격 m: marginp와 동일 옵션 w: widthw - n: n만큼 widthw - full: 전체 widthw - screen: 스크린 사이즈만큼 h: heighth - full: 아래까지 전체 차지 xh - screen: 아래까지 전체 차지 o borderBorder 색상: border - [컬러] - [진하기]Border radius: border rounded - [full / md / lg / xl ... ] text글자 크기: text - [크기]글자 색상: text - [컬러] - [진하기]글자 정렬: text - [정렬옵션; ..

* 학습을 목적으로 작성된 글입니다 * 각종 피드백은 언제든지 감사히 받겠습니다 😀 ◾ Module.css같은 클래스 이름을 가진 다른 컴포넌트들과의 충돌을 방지하기 위해 사용한다.예시와 함께 차이를 살펴보자! ◾ 적용 전  ◽ App.jsximport Button from "./Button";import "./App.css";function App() { return ( Module CSS 적용 전 Just Button );}export default App;   ◽ App.css.items { display: grid; margin-top: 50px; text-align: center;}.btn { padding: 10px 20px; borde..

* 학습을 목적으로 작성된 글입니다* 각종 피드백은 언제든지 감사히 받겠습니다 😀◾ 등장 배경순수 CSS는 단순하고 직관적이지만 작업 규모가 커질수록 가독성이 떨어지며 수정이 번거로워져 유지보수가 불편했다.이에 등장한 SASS는 변수, 함수, 계산, 중첩, 믹스인 등의 추가적인 기능을 제공하여 작업을 쉽게 해줄 뿐만 아니라 가독성과 재사용성을 높여주어 유지보수가 용이하도록 도와준다. ◾ SASS와 SCSSSASS(Syntactically Awesome StyleSheet)는 기존의 css가 가진 단점들을 보완하는 스크립트 언어로, css 메타 언어이다. (메타 언어: 어떤 언어를 설명, 정의 또는 분석하는데 사용되는 언어. 고차언어라고도 한다) SASS의 두 가지 문법이 바로 SASS와 SCSS이다. ..