앞서서 스타일을 지정하는 방법을 배웠습니다. 좀 더 자세히 알아보도록 하겠습니다.
스타일 값의 타입은 대부분 문자열입니다. 스타일 값이 숫자형인 경우에도, 단위를 지정할 수 있도록 문자열로 작성해야 합니다. 예를 들어 '450px' 또는 '20%'라고 씁니다.
만약 아래처럼 스타일 값으로 숫자형을 사용한다면, 자동으로 단위가 'px' 로 설정됩니다.
인라인 스타일
인라인 스타일은 style 속성에 직접 입력하는것 입니다. style={{ 스타일 }} 형태로 입력합니다. 중괄호가 2개입니다. 주의 하시기 바랍니다. 그리고 자바스크립트 이기 때문에 연속된 단어일 경우 -(dash)를 생략하고 첫 글자를 대문자로 변경해서 붙여서 써야 합니다.
스타일 값의 타입은 대부분 문자열입니다. 스타일 값이 숫자형인 경우에도, 단위를 지정할 수 있도록 문자열로 작성해야 합니다. 예를 들어 '450px' 또는 '20%'라고 씁니다.
스타일 값으로 숫자형을 사용한다면, 자동으로 단위가 'px' 로 설정됩니다.
|
style={{ borderRadius:"50%", border : "3px solid silver", margin :"10px",padding:"3px"}}
<img src={image_url2} style={{ borderRadius:"50%", border : "3px solid silver", margin :"10px",padding:"3px"}}
alt='랜덤여자이미지'/> |
스타일 객체 변수
변수에 대입해서 사용할 수도 있습니다. img태그에 alt속성을 지정하지 않으면 경고가 출력됩니다. 웹 표준에따라 반드시 alt속성을 써 주시기 바랍니다.
|
let style={
borderRadius : "50%",
border : "3px solid silver",
margin :"10px",
padding : "3px"
};
<img style={style} src={image_url3} alt='랜덤여자이미지'/>
|
스타일 문법
css 파일을 별도로 만들어 사용할 수 있습니다. css파일도 import해야 합니다. class속성이 아니라 className속성입니다.
|
import './Profile.css'
<img className="avatar" src={image_url1} alt='랜덤여자이미지'/>
|
CSS 모듈
위의 방법대로 한다면 매플리케이션이 커지면 디버깅이 어려워 집니다. 그래서 css파일도 모듈화를 해서 사용하면 관리가 편해 집니다.
컴포넌트별로 스타일시트를 만들어 적용할 수 있습니다.
파일 이름을 [파일이름].module.css 형식으로 정의해야 합니다. 이 규칙을 따라야지만, 해당 CSS 파일을 하나의 CSS 모듈로 처리할 수 있게 됩니다. 즉, 다른 React 코드에서 스타일 모듈로서 import 하는 것이 가능해집니다.
import 를 수행하고 속성의 값으로 CSS 모듈의 클래스 이름을 "CSS모듈객체명.클래스이름" 형식으로 적용하면 됩니다.
|
import Styles from './Profile.module.css'
<img className={Styles.avatar} src={image_url4} alt='랜덤여자이미지'/>
|
동일한 클래스명을 가진 여러 스타일시트가 있는 경우, 클래스명이 충돌하여 스타일이 덮어씌워질 수 있습니다. CSS 모듈은 이 문제를 해결합니다. 스타일을 특정 컴포넌트에만 적용할 수 있습니다. 왜냐하면, 각 CSS 모듈에 대해 고유한 클래스 이름을 자동으로 생성해서 적용하기 때문입니다. 따라서 여러 CSS 파일에 걸쳐서 클래스 이름을 일일이 관리할 필요가 없습니다. 위의 코드를 개발자 모드를 열어 요소 탭을 보면 클래스이름이 class="Profile_avatar__oWGRG" 형태로 변경되어 있는 것을 확인할 수 있습니다.
1. create-react-app를 이용하여 app005 프로젝트를 만듭니다.
1) 프로젝트 작성 D:\React> npx create-react-app app005 2) 폴더이동 D:\React> cd app005 3) visual code 실행 D:\React\app005> code . 4) public 폴더와 src폴더의 모든 파일을 삭제합니다. |
2. public 폴더에 다음과 같이 index.html파일을 생성합니다.
|
1
2
3
4
5
6
7
8
9
10
11
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React Component</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
|
3. src폴더에 Profile.css 파일을 다음과 같이 만듭니다.
|
1
2
3
4
5
6
|
.avatar {
border-radius: 50%;
margin: 10px;
border : 3px solid silver;
padding: 3px;
}
|
cs |
4. src폴더에 Profile.module.css 파일을 다음과 같이 만듭니다.
|
1
2
3
4
5
6
|
.avatar {
border-radius: 50%;
margin: 10px;
border : 3px solid silver;
padding: 3px;
}
|
cs |
5. src폴더에 Profile.js 파일을 다음과 같이 만듭니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
import './Profile.css'
import Styles from './Profile.module.css'
let Profile = ()=>{
let image_url1 = 'https://randomuser.me/api/portraits/women/60.jpg';
let image_url2 = 'https://randomuser.me/api/portraits/women/18.jpg';
let image_url3 = 'https://randomuser.me/api/portraits/women/81.jpg';
let image_url4 = 'https://randomuser.me/api/portraits/women/73.jpg';
let style={
borderRadius : "50%",
border : "3px solid silver",
margin :"10px",
padding : "3px"
};
return (
<>
<h2>스타일 지정 전</h2>
<img src={image_url1} alt='랜덤여자이미지'/>
<img src={image_url2} alt='랜덤여자이미지'/>
<img src={image_url3} alt='랜덤여자이미지'/>
<img src={image_url4} alt='랜덤여자이미지'/>
<hr/>
<h2>스타일 지정 후</h2>
<img className="avatar" src={image_url1} alt='랜덤여자이미지'/>
<img src={image_url2} style={{ borderRadius:"50%", border : "3px solid silver", margin :"10px",padding:"3px"}} alt='랜덤여자이미지'/>
<img style={style} src={image_url3} alt='랜덤여자이미지'/>
<img className={Styles.avatar} src={image_url4} alt='랜덤여자이미지'/>
</>
);
}
export default Profile;
|
cs |
6. src폴더에 App.js 파일을 다음과 같이 만듭니다.
|
1
2
3
4
5
6
7
8
9
10
|
import Profile from "./Profile";
function App(){
return (
<>
<Profile/>
</>
);
}
export default App;
|
cs |
7. src폴더에 index.js 파일을 다음과 같이 만듭니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css'
import App from './App';
const root = ReactDOM.createRoot(document.querySelector("#app"));
root.render(
<React.StrictMode>
<App/>
</React.StrictMode>
);
|
cs |
8. visual code에서 [새 터미널] 창을 열고 "npm start"명령으로 애플리케이션을 시작합니다.
실행 화면 입니다.
'Front End > React' 카테고리의 다른 글
| [React Exam 21] bootstrap 사용하기 (0) | 2024.10.21 |
|---|---|
| [React Exam 20] jQuery 사용하기 (1) | 2024.10.21 |
| [React Exam 18] 컴포넌트(Component)에 객체를 속성으로 전달하기 (0) | 2024.10.21 |
| [React Exam 17] 컴포넌트(Component)에 값을 속성으로 전달하기 (0) | 2024.10.21 |
| [React Exam 16] 컴포넌트(Component)를 만들어 사용해 보자 (1) | 2024.10.16 |
