CSS

🔮 설치하기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..

html의 br 태그는 텍스트 안에 줄바꿈을 생성합니다. 그런데 PC 화면에서는 줄바꿈이 필요했지만, 작은 화면에서 줄바꿈을 하면 스크롤이 길어지는 문제로 해당 기능을 없애고 싶은 경우가 있을 수 있습니다. 예를 들어, PC 화면인 경우에는 아래와 같이 br 요소가 포함된 텍스트를 그대로 배치하지만태블릿 화면인 경우, br 요소가 줄바꿈 기능을 하지 않게 만들고 싶은 상황입니다.이때 제가 잊고 있던 기본적인 내용만을 활용하여 이를 해결할 수 있습니다.  태그에도 class를 적용할 수 있습니다.너무 당연한 이야기지만 이상하게 br 태그에는 적용할 생각을 하지 못했습니다. 간단한 방법으로 br 태그의 display 속성을 none으로 설정하면 br 태그는 줄바꿈을 하지 않습니다. 하지만 더 나아가 줄바꿈 ..