데이터는 아래의 주소에서 구했으며 클릭시 원본 기사로 넘어갑니다.
https://www.ohmynews.com/NWS_Web/Series/series_premium_list.aspx?SRS_CD=0000011986
민족대표 33인 열전
"기미년 3월 1일 정오..." 한국 사람이라면 귀에 익은 가사지만 이 노래 이상으로 3.1혁명에 대해 아는 이는 그리 많지 않다. 3.1혁명은 윌슨의 민족자결주의 등 전 세계적인 흐름에 힘입기도 했지
www.ohmynews.com
NationalRepresentative.json
0.02MB
NationalRepresentative.css 파일을 만듭니다.
|
.main-title {
width: 880px;
margin: auto;
padding : 5px;
margin-bottom: 10px;
font-size: 2.5rem;
text-align: center;
}
.item {
width: 880px;
margin: auto;
cursor : pointer;
padding : 10px;
border: 0px solid gray;
border-bottom: 2px solid gray;
border-right: 2px solid gray;
margin-bottom: 10px;
border-radius: 10px;
background-color: #EEEEEE;
}
img {
width: 160px;
height: 130px;
padding: 2px;
border: 1px solid gray;
border-radius: 20px;
margin: 5px;
float: left;
margin-right: 15px;
background-color: gold;
}
.title {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 8px;
}
.subtitle {
font-size: 1.1rem;
font-weight: bold;
margin-bottom: 8px;
}
.description{
font-size: 0.9rem;
}
|
NationalRepresentative.js 파일을 만듭니다.
|
import './NationalRepresentative.css'
const NationalRepresentative = ({item})=>{
const {index, title, subtitle, description, imageUrl, linkAddress} = item;
const clickHandler = () => {
window.location.href = linkAddress;
}
const no=`${index}`.padStart(2,'0');
return (
<div className="item" onClick={clickHandler}>
<img className="item-image" src={imageUrl} alt={title}/>
<div className="title">{no}. {title}</div>
<div className="subtitle">{subtitle}</div>
<div className="description">{description}</div>
<br style={{clear:"both"}}/>
<div style={{fontSize:"0.8rem", textAlign:"right"}}><b>3.1 혁명을 이끈 민족대표 33인</b> 정운현지음, 역사인(2019) </div>
</div>
);
}
export default NationalRepresentative;
|
App.js 파일을 만듭니다.
|
import NationalRepresentative from "./NationalRepresentative";
import ns from './Data/NationalRepresentative'
import './NationalRepresentative.css'
const App = ()=>{
return (
<>
<div className="main-title" style={{fontSize:"1.2rem"}}>오마이뉴스 창간 19주년, 3.1혁명 100년 특별기획</div>
<div className="main-title">3.1 혁명을 이끈 민족대표 33인</div>
{
ns.map((data, index)=> <NationalRepresentative item={data} key={index}/>)
}
</>
);
}
export default App;
|
index.js 파일을 만듭니다.
|
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.querySelector("#app"));
root.render(
<React.StrictMode>
<App/>
</React.StrictMode>
);
|
결과 화면 입니다.
'Front End > React' 카테고리의 다른 글
| [React Exam 35] Counter 만들어보기 (1) | 2024.11.04 |
|---|---|
| [React Exam 34] map()을 이용한 10간(十干)/ 12지(十二支) 나열하기 (0) | 2024.11.01 |
| [React Exam 32] map()을 이용한 지자체 홈페이지 나열하기 (1) | 2024.11.01 |
| [React Exam 31] map() 사용 시 key에 index를 사용하면 안되는 이유 (0) | 2024.10.31 |
| [React Exam 30] map() 사용 시 올바른 key 사용법 (0) | 2024.10.31 |
