1. Quiz_간단한 텍스트 입력 화면 만들어보기
- 아래와 같이 React를 이용하여 만들기!
![](https://velog.velcdn.com/images%2Ftmdals3785%2Fpost%2F21b40b4c-51fe-4123-95d0-f30e5b5fe64d%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202021-07-20%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%204.18.34.png)
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
const styles = {
border: '1px solid #eee',
padding: '20px',
display: 'flex',
width: '100vw',
maxWidth: '400px',
margin: '30px auto',
flexDirection: 'column'
};
return (
<div className="App">
<div style={styles}>
<h1 style={{ color: 'orange' }}>안녕하세요!</h1>
<hr style={{width: '100%'}}/>
<p style={{ textAlign: 'left' }}>이름을 입력해주세요.</p>
<input type="text"/>
</div>
</div>
);
}
export default App;
- 결과
![](https://velog.velcdn.com/images%2Ftmdals3785%2Fpost%2Fb507ff17-a9e8-46f5-a38c-86f8ff80c818%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202021-07-20%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%204.19.46.png)