CSS

🍎 설치하기1) 터미널에서 아래의 명령어를 입력하여 'tailwind-scrollbar-hide'라는 이름의 플러그인을 설치합니다.# npm 사용 시npm install tailwind-scrollbar-hide# yarn 사용 시yarn add tailwind-scrollbar-hide 2) 설치한 플러그인의 이름을 'tailwind.config.js' 파일의 플러그인 목록에 추가해줍니다.// tailwind.config.jsmodule.exports = { content: [], theme: { extend: {}, }, plugins: [ require('tailwind-scrollbar-hide') //  🍎 사용하기'scrollbar-hide' 클래스명은 테일윈드가 기본으로..

🔮 설치하기1) 테일윈드를 사용하고자 하는 디렉토리에서 터미널을 켭니다. 2) 터미널에서 아래의 명령어를 입력하여 tailwindcss, postcss, autoprefixer를 설치합니다.npm install -D tailwindcss postcss autoprefixer 3) 터미널에서 아래의 명령어를 입력하여 'tailwind.config.js'와 'postcss.config.js' 파일을 생성합니다.npx tailwindcss init -p 4) 'postcss.config.js' 파일을 열어 다음과 같은 내용으로 설정되어 있는지 확인합니다.module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, },} 5) 'tailwi..

🐝 정의CSS 파일을 별도로 작성하지 않고 자바스크립트 파일 안에서 CSS를 작성하는 방식입니다. 자바스크립트 코드가 실행되며 CSS 코드가 생성됩니다.CSS-in-JS 라이브러리의 종류는 다음과 같습니다.Styled-ComponentsemotionJSS-ReactglamorousRadiumAphroditeetc.. 🐝 장단점CSS-in-JS의 장점은 다음과 같습니다.CSS 클래스의 이름 충돌 문제 해결: 스코프를 해당 컴포넌트로 한정하여 전역적으로 인식되는 네임스페이스의 충돌을 방지합니다.컴포넌트 단위의 스타일링: 컴포넌트에 적용될 스타일을 같은 파일 내에서 정의하고 관리할 수 있습니다.동적인 스타일링: props나 state에 따라 상황에 맞는 스타일을 적용할 수 있습니다.자바스크립트를 활용: 자..

브라우저마다 약간의 차이는 있지만, 브라우저에서 기본적으로 제공되는 스타일은 예쁘지 않습니다.따라서 보통 기본 스타일은 없애고 입맛에 맞게 새로운 스타일을 입히게 됩니다. 버튼의 기본 스타일을 없애고 싶다면 아래와 같은 css 스타일을 적용해주면 됩니다.button { border: 0; /* 테두리 없애기 */ background-color: transparent; /* 배경을 투명하게 */}또는button { cursor: pointer; /* 커서를 손 모양으로 */ background: none; /* 배경 없애기 */ border: none; /* 테두리 없애기 */} 리스트의 기본 스타일을 없애고 싶다면 아래와 같은 css 스타일을 적용해주면 됩니다.ul,ol { l..