JSX에서 style 적용 시에는 class가 아닌 className입니다.
|
<h2 className="greeting">
|
style 속성을 이용하여 스타일을 지정할 때는 중괄호 2개를 사용합니다.
|
<div style={{ color: 'skyblue',fontSize:"15pt",fontWeight:"bold" }}>
|
스타일 속성의 이름은 JavaScript 문법이기 째문에 카멜 표기법(Camel Case)을 이용하여 지정합니다.
"font-size"가 아니라 "fontSize" 입니다. "-"를 제거하고 단어의 첫 글자를 대문자로 변경하시면 됩니다.
다음은 완성된 전체 코드 입니다.
|
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
33
34
35
36
37
38
39
40
41
42
43
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React 예제 007</title>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<style>
.greeting {
color: skyblue;
font-size: 15pt;
font-weight: bold;
}
</style>
<script type="text/babel">
window.onload = () => {
const element1 = (
<div className="greeting">
Hello world! Hello React!!!
</div>
);
const element2 = (
<div style={{ color: 'skyblue',fontSize:"15pt",fontWeight:"bold" }}>
Hello world! Hello React!!!
</div>
);
ReactDOM
.createRoot(document.querySelector('#app'))
.render(
<div>
{element1}
{element2}
</div>
);
}
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
|
cs |
다음은 실행 결과 입니다.
'Front End > React' 카테고리의 다른 글
| [React Exam 08] HTML로 시작해보는 React Component (2) | 2024.10.15 |
|---|---|
| [React Exam 07] HTML로 시작해보는 React 엘리먼트 렌더링 (6) | 2024.10.15 |
| [React Exam 05] HTML로 시작해보는 React JSX 속성 표현식 사용하기 (0) | 2024.10.15 |
| [React Exam 04] HTML로 시작해보는 React JSX 함수 표현식 사용 (0) | 2024.10.15 |
| [React Exam 03] HTML로 시작해보는 React JSX JavaScript 표현식 포함하기 (0) | 2024.10.15 |
