css 및 리소스 넣기

css 넣는법 3

import React, {useState, useEffect} from 'react';
import '../App.css'

export default function HookTest2(){
   
    //key: 'value' 형식의 json데이터
    let st = {color: 'skyblue', textAlign: 'center'}

    return(
        <div className='App'> {/* 이 부분이 css가 적용된것 */}
         
            <h1 className='blackbar'>리액트의 이해</h1> 
            <h2 style={{color: 'pink'}}>ECMA에 대한 선행학습필요</h2> 
            <h3 style={st}>CSS 적용방식에 대한 이해</h3>
        </div>
    );
}

 

 

전체적으로 <div> 태그에 className을 주어 css효과를 준다.

.App {
  padding-left: 20px;
  padding-top: 30px;
}
.blackbar{
  background-color: black;
  width: 100%;
  color: darkorange;
  padding: 5px;
  display: flex;
}

 

css style 적용

style 속성 값은 {key:'value'}안에 기입

 

1. 리액트의 이해

 class 속성을 통해 .css 파일에 스타일 작성

 

2. ECMA에 대한 선행학습필요

인라인방식

 

3. CSS적용방식에 대한 이해

변수에 json타입으로 style 작성

 

 

---

리소스(이미지) 넣는 방법3

 

 

 

 

 

1. src 폴더안의 파일

src 폴더에 파일넣어서 불러오기. 상단에 import해주기.

 

2.css 파일의 background-image 읽기

 

 

 

3. public 폴더에 있는 파일

public은 아무나 들어올 수 있는곳이 아님.

public 폴더에 접근하고자 public-url 사용.

 

 

 

 

 

 

 

App.css

/* 이미지 읽기용*/
.img_bg{
  width: 200px;
  height: 200px;
  background-image: url('./cloud.png');
}

 

HookTest2.jsx

import pic1 from '../olaf.png';

{/* 이미지 적용1 : src 폴더 파일*/} 
<div>
<img src = {pic1} alt="첫번째 이미지"/>
</div>

{/* 이미지 적용2 : css파일의 background-image*/} 
<div className='img_bg'></div>

{/* 이미지 적용3 : public 폴더에 있는 파일*/} 
<img src={`${process.env.PUBLIC_URL}/imgs/sun.png`} alt='public 폴더 이미지 읽기' />