728x90
오늘은 리액트에서 컴포넌트에 CSS 스타일을 어떻게 지정하는지 배워볼 거예요. 여러 가지 방법이 있으니, 하나씩 차근차근 알아보도록 해요.
인라인 스타일(Inline Style)
인라인 스타일은 HTML 태그에 직접 스타일을 지정하는 방법이에요. 리액트에서는 style 속성을 객체 형식으로 작성해요. 예를 들어볼까요?
const App = () => {
return (
<div>
<h1
style={{
fontSize: "30px",
color: "#ed4848",
textDecoration: "line-through",
}}
>
Hello World!
</h1>
</div>
);
};
export default App;
여기서 스타일은 직접 h1 태그에 지정되었어요. 이렇게 하면 다른 파일을 만들 필요 없이 간단히 스타일을 지정할 수 있어요.
외부 스타일(External Stylesheet)
외부 스타일은 별도의 CSS 파일을 만들어서 사용하는 방법이에요. 이렇게 하면 스타일을 한 곳에 모아서 관리하기 쉬워요.
App.tsx
import "./App.css";
const App = () => {
return (
<div>
<h1 className="title">Hello World!</h1>
</div>
);
};
export default App;
App.css
.title {
font-size: 30px;
color: #ed4848;
text-decoration: line-through;
}
Tailwind CSS
Tailwind CSS는 Atomic CSS 라이브러리 중 하나예요. 설정 후 다양한 클래스를 사용해 스타일을 지정할 수 있어요.
설치(vite기반의 Tailwind설치 주소)
https://tailwindcss.com/docs/guides/vite
tailwind.config.js
export default {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
};
src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
app.tsx
const App = () => {
return (
<div>
<h1 className="text-[30px] font-bold text-[#ed4848] line-through">
Hello, World!
</h1>
</div>
);
};
export default App;
728x90
'웹개발 > REACT' 카테고리의 다른 글
useState훅, 이 글만 보시면 충분합니다!!! (0) | 2024.07.25 |
---|---|
리액트에서 map함수 사용하기 (0) | 2024.07.25 |
초보자도 쉽게 배우는 리액트 컴포넌트 작성 방법! (0) | 2024.07.25 |
리액트 컴포넌트, 아직도 클래스형 쓰는 사람? 이 글 읽고 손절하자! (3) | 2024.07.24 |
리액트 확장자명 헷갈리면 들어와! / .js, .jsx, .tsx (0) | 2024.07.24 |