시작하며...지금까지 다양한 CSS 라이브러리를 사용해 보았다. 그중에서 가장 많이 사용해 본 라이브러리는 Tailwind CSS와 Emotion이다. 이 두 라이브러리를 성격이 많이 다른 라이브러리이다. 그래서 각 라이브러리의 특징을 알아보고 비교해 보면 좋을 거 같아 글을 작성하게 되었다. 1. Tailwind CSS🥇 마음속 1위우선 Tailwind CSS가 나에게는 1위이다.Tailwind CSS를 사용한 프로젝트의 회고록을 보았더니 정말 찬양할 정도를 Tailwind CSS를 좋아했다...ㅋㅋㅋㅋ 그래서 해당 라이브러리를 사용하면서 느낀 장점과 단점을 정리해 보았다. Tailwind CSS 장점1. 빠르고 간편한 반응형 디자인Tailwind는 미디어쿼리를 사용하지 않고 sm: md: lg: 이..

시작하며...이번 프로젝트에서 Storybook 을 적용하게 되었다. 이전 프로젝트에서는 공통 컴포넌트를 테스트 페이지를 만들어서, 사용하는 방법과 예시를 다른 팀원들에게 보여줬는데이제 Storybook 을 사용하면 번거롭게 테스트 페이지를 만들 필요가 사라진다. 설치하기먼저 Storybook 을 설치한다.npx storybook@latest init그러면 Storybook 이 설치되면서 실행이 된다.  해당 프로젝트는 yarn 이라서 yarn stroybook 을 입력하면 스토리북이 실행이 된다.만약 npm 이라면 npm run stroybook 를 입력하면 된다. 스토리북 작성하기컴포넌트 주석달기버튼 컴포넌트에 대해 Storybook 을 작성하기 전에 해당 버튼 컴포넌트의 interface 에 주석을..

시작하며...카드 영역을 hover 했을 때, title 에 글자에 밑줄이 쳐지고 색상이 적용되는 것을 만들고 싶었다. 카드를 클릭하면 해당 게시물로 가는데 사용자 경험성 측면에서 이걸 클릭해야 게시물을 갈 수 있다는 걸 명확하게 알 수 없다고 생각이 들었다. 그래서 카드 영역을 hover 했을 때, title 에 밑줄과 색상을 적용해 보기로 했다! 적용하기참고로 Next.js + Tailwind CSS 이다. group, group-hover 클래스 작성부모 요소를 hover 했을 때, 자식 요소에 스타일을 지정해야 한다. 그러면 이를 아래 코드처럼 작성을 한다. group 은 부모 요소로 적용하고, group-hover 는 자식 요소에 적용하여 hover 를 했을 때 자식 요소에 특정 스타일을 적용할..

시작하며...모달창이 열렸을 때 아래 방식으로 스크롤을 없앨 수 있다.document.body.style.overflow = 'hidden';  그런데 나는 원래 스크롤이 있던 화면에 모달이 열렸다고 스크롤이 사라지고 모달이 닫히면 다시 생기는 게 먼가 살짝 불편했다. 😅그래서 다른 방법으로 해결해 보았다! 기존 모달과 스크롤기존에는 모달창이 열려있으면 스크롤을 마음대로 움직일 수 있는 상황이었다.  스크롤 방지위에 말했다시피 useEffect 를 사용하여 열렸을 때 아래 코드를 적용해서 해결할 수 있다.document.body.style.overflow = 'hidden'; 전역 스타일 수정그런데 다른 방법 찾아보았다!바로 전역 스타일에서 아래 코드를 추가하면 된다. 그러면 페이지 높이가 고정되어 스..

☘️ 시작하기 앞서...css in js 라이브러리를 사용하지 않고 css 를 적용할 때, 동적으로 클래스 이름을 지정해주기 위해서 삼항연산자 등을 사용할 수 있다.하지만 이 과정은 코드가 복잡해지고 더러워진다. 그래서 이를 해결하기 위해 classnames 라이브러리를 사용할 수 있다.  ☘️ classnames 라이브러리1. 설치하기[공식 깃허브 문서 - classnames] GitHub - JedWatson/classnames: A simple javascript utility for conditionally joining classNames togetherA simple javascript utility for conditionally joining classNames together - JedW..

☘️ 기본 코드 작성하기 absolute 를 적용하기 위해 부모와 자식을 만들어주었다. HTML 코드 CSS 코드 .parent { width: 500px; height: 500px; background-color: aquamarine; position: relative; } .child { width: 30%; height: 30%; background-color: pink; position: absolute; } ☘️ 자식 요소 가운데 배치하기 ❌ top, left 50% 자식 요소를 가운데 배치하려면 어떻게 해야할까? top(또는 bottom) 이랑 left(또는 right) 를 50% 로 하면 될 것 같다. 부모 기준으로 위에서 50%, 왼쪽에서 50% 이니깐 가운데에 배치 될 것 같기 때문이다!..

Q. 질문CSS의 Cascading에 대해 설명해 주세요. (코드잇 스프린트 위클리 페이퍼 #1) A. 답변CSS 를 적용하다보면 겹치는 속성이 발생할 수 있다. 개발자 도구를 사용해 임의로 코드잇 페이지에 있는 컴포넌트의 배경 색상을 blue 와 red 로 변경하여 속성이 겹치도록 하였다.그렇다면 화면에서는 blue 와 red 중에 어떤 것이 반영이 될까? 바로 이러한 상황에서 CSS 규칙들을 어떻게 합쳐 줄지 정해주는 방식을 CSS 의 Cascading 이라고 한다.  Cascading 이란?그렇다면 Cascading  는 정확히 무엇일까?  그 전에 CSS 의 약자는 Cascading Style Sheets (CSS) 이다.  이를 한국말로 직역하자면 계단식 스타일 시트 라는 의미이다. 즉, CS..

개발 프로젝트를 진행하기 앞서 고려해야 될 것이 있다.바로 CSS Reset(리셋) 과 CSS Normalize(노멀라이즈) 중에서 어떤 것을 선택할 지 이다. ☘️ CSS Reset / Normalize 사용 이유그렇다면 CSS Reset 과 CSS Normalize 는 왜 사용하는 것일까? 브라우저 간 일관성 확보우리가 사용할 수 있는 브라우저는 크롬, 사파리, 엣지, 파이어폭스 등 매우 다양하다.하지만 이러한 브라우저는 자체 기본 스타일을 가지고 있어 브라우저마다 다르게 보일 수 있다는 것이다.그래서 이러한 일관성 확보하고, 브라우저 간 차이를 줄이기 위해 사용한다. ☘️ CSS Reset vs CSS Normalize그렇다면 둘 중에 어떤 것을 사용해야 할까? CSS ResetCSS Reset 은..

예쁜 폰트를 다운로드 받아서 내 React 프로젝트에 적용하는 방법을 알아 볼 것이다. 폰트 다운로드 받기폰트를 다운로드 받을 수 있는 사이트에서 폰트를 다운로드 받는다.나는 예쁜 한글 폰트가 많은 눈누 라는 사이트를 이용하였고, 원하는 폰트를 찾아 다운로드한다. 폰트 설정하기다운로드 받은 폰트를 내 프로젝트에 src/fonts 에 넣어준다.이 폰트들을 적용시키기 위해 @font-face 를 사용한다.@font-face웹페이지의 텍스트에 온라인폰트(online fonts)를 적용할 수 있게 함index.css 에서 폰트를 사용할 폰트의 이름을 정의하고, 해당 폰트의 위치를 설정해준다.@font-face { font-family: 'PyeongChang'; /* 사용할 폰트의 이름을 정의 */ src:..

시작하기 앞서...React 에서 CSS 를 사용하여 움직이는 물결 애니메이션을 만들 것이다. 컴포넌트 만들기물결 3개를 만들기 위해 3개의 요소를 만들고,wave 라는 class 를 공통으로 가지면서 서로 다른 스타일링을 위해 각각 -one, -two, -three 를 가진다.import '../App.css'function WaveComponent() { return ( );}export default WaveComponent; CSS 설정물결 애니메이션을 만드는 원리는 아래처럼 생긴 요소를 애니메이션을 적용시키고 일부만 화면에 보여주어 물결이 움직이는 것 처럼 보여준다. wave 스타일요소들이 겹쳐 있기 때문에 postion 을 absolute 로 ..