coding develop

<style>
.container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
  }
  .item1{background: LightSkyBlue;}
  .item2{background: LightSalmon; }
  .item3{background:PaleTurquoise;}
  .item4{background:LightPink;}
  .item5{background:PaleGreen;}
</style>

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
</div>

justify-self

css  grid-layout 셀 내부의 위치를 가로로 정렬 

기본 값 :stretch ( 셀의 전체 너비를 채움)

상자 2에 justify-self의 속성을 사용해보자 

•  start :  내용을  셀 왼쪽에 정렬
• center : 내용을 셀 중앙에 정렬 
• end : 내용을 셀 오른쪽에 정렬

.item2 {
    background: LightSalmon;
    justify-self : start
   
  }

.item2 {
    background: LightSalmon;
    justify-self : center
   
  }

.item2 {
    background: LightSalmon;
    justify-self : end
   
  }

'

justify-items

모든 항목에 대해 적용 하고 싶을 때

<style>
.container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
  }
  .item1{background: LightSkyBlue;}
  .item2{background: LightSalmon; }
  .item3{background:PaleTurquoise;}
  .item4{background:LightPink;}
  .item5{background:PaleGreen;}
</style>

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
</div>

5개의 상자를 감싸고 있는 컨테이너 클레스에 justify-items 속성 사용

justify-items : center 

.container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
   
    justify-items: center;
  
  }

justify-items : start

.container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
   
    justify-items: start;
  
  }

justify-items : end

.container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
   
    justify-items: end;
  
  }

background-image

background-image: url("경로");

background-repeat

/* 반복하지 않음 */
background-repeat: no-repeat;

/* 가로 방향으로만 반복 */
background-repeat: repeat-x;

/* 세로 방향으로만 반복 */
background-repeat: repeat-y;

/* 가로와 세로 모두 반복 */
background-repeat: repeat;

/* 반복할 수 있는 만큼 반복한 뒤, 남는 공간은 이미지 간의 여백으로 배분 */
background-repeat: space;

/* 반복할 수 있는 만큼 반복한 뒤, 남는 공간은 이미지 확대를 통해 배분 */
background-repeat: round;

background-size

/* 원래 이미지 사이즈대로 출력 */
background-size: auto;

/* 화면을 꽉 채우면서, 사진 비율을 유지 */
background-size: cover;

/* 가로, 세로 중 먼저 채워지는 쪽에 맞추어서 출력 */
background-size: contain;

/* 픽셀값 지정 (가로: 30px, 세로: 50px로 설정) */
background-size: 30px 50px;

/* 퍼센트값 지정 (가로: 부모 요소 width의 60%, 세로: 부모 요소 height의 70%로 설정) */
background-size: 60% 70%;

background-position

/* 단어로 지정해주기 (가로: left, center, right, 세로: top, center, bottom) */
/* 아래와 같은 총 9개의 조합이 가능 */
background-position: left top;
background-position: left center;
background-position: left bottom;
background-position: right top;
background-position: right center;
background-position: right bottom;
background-position: center top;
background-position: center center;
background-position: center bottom;

/* 퍼센트로 지정해주기 (가로: 전체 width의 25% 지점, 세로: 전체 height의 75% 지점 ) */
background-position: 25% 75%;

/* 픽셀로 지정하기 (가로: 가장 왼쪽 가장자리에서부터 오른쪽으로 100px 이동한 지점, 세로: 가장 상단 가장자리에서 아래로 200px 이동한 지점) */
background-position: 100px 200px;

CSS 파일

.module.css로 파일 저장

Exampe.module.css

.container {
  background-color: aqua;
  width: 60%;
  height: 300px;
}

.message {
  background-color: brown;
}

Example.js

import React from 'react';
import styles from './Example.module.css'

const Example = () => {

    console.log("styles:" ,styles);
    return (
        <div className={styles.container}>
            <h1 className={styles.message}>css 스타일 입히기</h1>
            <p>CSS Module</p>
        </div>
    );
};

export default Example;

css 파일을 불러오기 위해 import 해줌

import styles from './Example.module.css'

이 때 객체를 하나 전달받는데 CSS Module에서 사용한 클래스 이름과 해당이름을 

고유화한 값이 키-값 형태로 들어 있다.

-> [파일 이름]_[클래스 이름]_[해시 값]

console.log(styles)를 통해 알아보자

파일이름(Example)_클래스 이름(container)_해시 값(3696j)

이렇게 CSS를 불러와서 사용할 때 자동으로 만들어지는데

이는, 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지하기 위함이다.

CSS 적용

클래스를 적용하기 싶은 JSX 엘리먼트에

classname={styles.클래스이름} 지정

<div className={styles.container}>
<h1 className={styles.message}>css 스타일 입히기</h1>
     <p>CSS Module</p>
</div>

전역적으로 사용하고 싶으면

:global .container {
  background-color: aqua;
  width: 60%;
  height: 300px;
}

앞에 :global 입력

<div className="container">
<h1 className={styles.message}>css 스타일 입히기</h1>
    <p>CSS Module</p>
 </div>

클래스 이름은 평상시 처럼 문자열로 입력