이수빈

spring.js 이미지 출력 수정

This diff is collapsed. Click to expand it.
1 - 1 + body
2 - #spring 2 + {
3 + background-image : url('./main.png');
4 + background-repeat : no-repeat;
5 + background-size : cover;
6 + }
7 + #spring_class
3 { 8 {
4 - background-image : url('./season/spring.jpg'); 9 + text-align: center;
5 - background-repeat : no-repeat; 10 + }
6 - background-size : cover; 11 + .img
7 - 12 + {
13 + width: 100px;
14 + height: 150px;
15 + object-fit: cover;
8 } 16 }
9 @font-face 17 @font-face
10 { 18 {
...@@ -18,27 +26,7 @@ ...@@ -18,27 +26,7 @@
18 } 26 }
19 #back_btn 27 #back_btn
20 { 28 {
21 - border-top-left-radius: 5px;
22 - border-bottom-left-radius: 5px;
23 - border-top-right-radius: 5px;
24 - border-bottom-right-radius: 5px;
25 - font-family: "button";
26 - position: relative;
27 - top: -50px;
28 - left: 550px;
29 } 29 }
30 #btn_back 30 #btn_back
31 { 31 {
32 - border: 1px;
33 - color:rgb(255, 255, 255);
34 - padding: 30px;
35 - align-items: center;
36 - text-align: center;
37 - font-size: 40px;
38 - background-color: rgba(255,255,255,0.5);
39 -
40 - }
41 - #btn_back:hover
42 - {
43 - background-color: rgb(167, 255, 246);
44 } 32 }
...\ No newline at end of file ...\ No newline at end of file
......
1 import React from 'react'; 1 import React from 'react';
2 -import './spring.css?ver=1.3'; 2 +import './spring.css?ver=1.4';
3 import spring from './season/spring.jpg'; 3 import spring from './season/spring.jpg';
4 4
5 const Spring = ( { history } ) => 5 const Spring = ( { history } ) =>
6 { 6 {
7 return ( 7 return (
8 - <div className='spring'> 8 + <div className='spring_class'>
9 - <img src = {spring} alt = "spring"/> 9 + <img src = {spring} width='1300' height='600' alt = "spring"/>
10 <div id="btn_back"> 10 <div id="btn_back">
11 <button id="back_btn" onClick={ () => {history.push("/")}}>back</button> 11 <button id="back_btn" onClick={ () => {history.push("/")}}>back</button>
12 </div> 12 </div>
......