본문 바로가기

Daily Coding - FE 3~4주차 - 35강 36강 37강 38강

@Breadbread22024. 10. 14. 10:48
반응형

35강

동적인 인라인 스타일링

빈 Input으로 값을 입력하면 배경색이 빨강으로 바뀐다.

 

trim 

: removes the leading and trailing white space and line terminator characters from a string

// 공백도 빈 메서드로 인식하게 만들어 줌.

import React, { useState } from 'react';

import Button from '../../UI/Button/Button';
import './CourseInput.css';

const CourseInput = props => {
  const [enteredValue, setEnteredValue] = useState('');
  const [isValid, setIsValid] = useState(true);

  const goalInputChangeHandler = event => {
    if(event.target.value.trim().length > 0) {
      setIsValid(true);
    }
    setEnteredValue(event.target.value);
  };

  const formSubmitHandler = event => {
    event.preventDefault();
    // 값이 '' 인 경우 배경을 빨강색으로 변경한다.
    if(enteredValue.trim().length === 0) {
      setIsValid(false);
      setEnteredValue("");
      return;
    }
    props.onAddGoal(enteredValue);
  };
  
  console.log(isValid);

  return (
    <form onSubmit={formSubmitHandler}>
      <div className="form-control">
        <label>목표</label>
        <input type="text"
        onChange={goalInputChangeHandler}
        style={{backgroundColor: isValid ? "transparent" :'salmon', borderColor: isValid ? "#CCC" : 'red'}}/>
      </div>
      <Button type="submit">목표 추가하기</Button>
    </form>
  );
};

export default CourseInput;

 

 

CSS 클래스를 동적으로 조작하기

- 인라인 스타일링을 CSS 클래스를 사용해서 바꿔주기

import React, { useState } from 'react';

import Button from '../../UI/Button/Button';
import './CourseInput.css';

const CourseInput = props => {
  const [enteredValue, setEnteredValue] = useState('');
  const [isValid, setIsValid] = useState(true);

  const goalInputChangeHandler = event => {
    if(event.target.value.trim().length > 0) {
      setIsValid(true);
    }
    setEnteredValue(event.target.value);
  };

  const formSubmitHandler = event => {
    event.preventDefault();
    // 값이 '' 인 경우 배경을 빨강색으로 변경한다.
    if(enteredValue.trim().length === 0) {
      setIsValid(false);
      setEnteredValue("");
      return;
    }
    props.onAddGoal(enteredValue);
  };
  
  console.log(isValid);

  return (
    <form onSubmit={formSubmitHandler}>
      <div className={`form-control ${!isValid ? 'invalid' : ''}`}>
        <label>목표</label>
        <input type="text" onChange={goalInputChangeHandler}/>
      </div>
      <Button type="submit">목표 추가하기</Button>
    </form>
  );
};

export default CourseInput;
.form-control {
  margin: 0.5rem 0;
}

.form-control label {
  font-weight: bold;
  display: block;
  margin-bottom: 0.5rem;
}

.form-control input {
  display: block;
  width: 100%;
  border: 1px solid #ccc;
  font: inherit;
  line-height: 1.5rem;
  padding: 0 0.25rem;
}

.form-control input:focus {
  outline: none;
  /* background: #fad0ec; */
  border-color: blue;
}


.form-control.invalid input {
  background-color: salmon;
  border-color: red;
}

 

36강

 

 

CSS-in-JS

styled-components 사용하기

 

동일한 스타일을 styled-components로 변경하기

import React, { useState } from 'react';
import {styled} from 'styled-components';

import Button from '../../UI/Button/Button';
import './CourseInput.css';

const CourseInput = props => {
  const [enteredValue, setEnteredValue] = useState('');
  const [isValid, setIsValid] = useState(true);

  const goalInputChangeHandler = event => {
    if(event.target.value.trim().length > 0) {
      setIsValid(true);
    }
    setEnteredValue(event.target.value);
  };

  const formSubmitHandler = event => {
    event.preventDefault();
    // 값이 '' 인 경우 배경을 빨강색으로 변경한다.
    if(enteredValue.trim().length === 0) {
      setIsValid(false);
      setEnteredValue("");
      return;
    }
    props.onAddGoal(enteredValue);
  };
  
  console.log(isValid);

  return (
    <form onSubmit={formSubmitHandler}>
      <FormControl>
        <FormControlLabel>목표</FormControlLabel>
        <FormControlInput type="text" onChange={goalInputChangeHandler} isValid={!isValid}/>
      </FormControl>
      <Button type="submit">목표 추가하기</Button>
    </form>
  );
};

export default CourseInput;

const FormControl = styled.div`
  margin: 0.5rem 0;
`

const FormControlLabel = styled.label`
  font-weight: bold;
  display: block;
  margin-bottom: 0.5rem;
`

const FormControlInput = styled.input`
  display: block;
  width: 100%;
  border: 1px solid #ccc;
  font: inherit;
  line-height: 1.5rem;
  padding: 0 0.25rem;
  ${props => props.isValid && `
    background-color: salmon;
    border-color: red;
    `}
`;

 

37강

CSS 스타일링 part2.

- CSS-in-JS 방식은 자바스크립트에서 CSS를 작성하는 방식이다

- CSS-in-JS 방식은 CSS를 컴포넌트 레벨로 추상화  해서 관리할 수 있다

- styled-components는 리액트 컴포넌트 스타일링을 위해 CSS를 JS로 쓸 수 있게 만든 가장 많이 쓰이는 도구 중 하나이다

 

CSS 스타일링 part3.

- CSS Module은 일반적인 CSS 사용 방식과 비슷하나, CSS 클래스 명을 중첩되지 않게 사용할 수 있다

- 동적으로 CSS Module을 사용하고 싶을 땐 string className 처럼 사용할 수 있다.

- CSS Modules

 

CSS 스타일링을 그대로 사용하면서 클래스 명이 겹치지 않게 hashing 하여 이름을 생성.

 

 

유니크한 클래스명을 만들어 줌 (자동으로!)

[filename]\_[classname]\_\_[hash]

 

style.css 추가해주는 방법

https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/

 

Adding a CSS Modules Stylesheet | Create React App

Note: this feature is available with react-scripts@2.0.0 and higher.

create-react-app.dev

1. CSS 파일의 이름을 바꾼다 => '~.module.css'

2. 해당 CSS를 import 하는 js에서 CSS import 명을 수정한다 => import styles from. "./PaymentForm.module.css";

3. js에서 class명을 수정한다

=> className = {styles.newPayments}

=> className = {styles.newPayment}

=> className = {styles.newPaymentActions}

 

 

 

- 동적으로 CSS Modules에 스타일링하기

   <div className={`${firstStyle} ${isTrue && secondStyle}`}

=> <div className={`${styles.newPaymentControl} ${!objectState.name && styles.isTrue}`}>

=> .isTrue { border: 2px solid red; }

 

 

https://github.com/dev-owen/react-fundamental/tree/practice/3-12

 

GitHub - dev-owen/react-fundamental: 슈퍼러닝 react 실습 repository

슈퍼러닝 react 실습 repository. Contribute to dev-owen/react-fundamental development by creating an account on GitHub.

github.com

 

 

38강

 

TailwindCSS

 - Utility first CSS Framework

 - HTML과 CSS 파일을 별도로 관리할 필요가 없다  => 복잡도가 감소한다는 장점이 있음

 - 클래스 명을 고민할 필요가 없다

 - 디자인이 일관되어 있다

 - 자유롭게 커스텀이 가능하다

 

https://tailwindcss.com/

 

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.

tailwindcss.com

 

CLI

: Comamnd line Interface

 

Layout

1. Top / Right / Bottom / Left

 

*1rem = 16px

   0.125rem = 16px*0.125 = 2px

inset-0 inset: 0px;
inset-x-0 left: 0px; right: 0px;
inset-y-0 top: 0px; bottom: 0px;
start-0 inset-inline-start: 0px;
end-0 inset-inline-end: 0px;
top-0 top: 0px;
right-0 right: 0px;
bottom-0 bottom: 0px;
left-0 left: 0px;
inset-px inset: 1px;
inset-x-px left: 1px; right: 1px;
inset-y-px top: 1px; bottom: 1px;
start-px inset-inline-start: 1px;
end-px inset-inline-end: 1px;
top-px top: 1px;
right-px right: 1px;
bottom-px bottom: 1px;
left-px left: 1px;
inset-0.5 inset: 0.125rem; /* 2px */
inset-x-0.5 left: 0.125rem; /* 2px */ right: 0.125rem; /* 2px */
inset-y-0.5 top: 0.125rem; /* 2px */ bottom: 0.125rem; /* 2px */
start-0.5 inset-inline-start: 0.125rem; /* 2px */
end-0.5 inset-inline-end: 0.125rem; /* 2px */
top-0.5 top: 0.125rem; /* 2px */
right-0.5 right: 0.125rem; /* 2px */
bottom-0.5 bottom: 0.125rem; /* 2px */
left-0.5 left: 0.125rem; /* 2px */
inset-1 inset: 0.25rem; /* 4px */
inset-x-1 left: 0.25rem; /* 4px */ right: 0.25rem; /* 4px */
inset-y-1 top: 0.25rem; /* 4px */ bottom: 0.25rem; /* 4px */
start-1 inset-inline-start: 0.25rem; /* 4px */
end-1 inset-inline-end: 0.25rem; /* 4px */
top-1 top: 0.25rem; /* 4px */
right-1 right: 0.25rem; /* 4px */
bottom-1 bottom: 0.25rem; /* 4px */
left-1 left: 0.25rem; /* 4px */
inset-1.5 inset: 0.375rem; /* 6px */
inset-x-1.5 left: 0.375rem; /* 6px */ right: 0.375rem; /* 6px */
inset-y-1.5 top: 0.375rem; /* 6px */ bottom: 0.375rem; /* 6px */
start-1.5 inset-inline-start: 0.375rem; /* 6px */
end-1.5 inset-inline-end: 0.375rem; /* 6px */
top-1.5 top: 0.375rem; /* 6px */
right-1.5 right: 0.375rem; /* 6px */
bottom-1.5 bottom: 0.375rem; /* 6px */
left-1.5 left: 0.375rem; /* 6px */
inset-2 inset: 0.5rem; /* 8px */
inset-x-2 left: 0.5rem; /* 8px */ right: 0.5rem; /* 8px */
inset-y-2 top: 0.5rem; /* 8px */ bottom: 0.5rem; /* 8px */
start-2 inset-inline-start: 0.5rem; /* 8px */
end-2 inset-inline-end: 0.5rem; /* 8px */
top-2 top: 0.5rem; /* 8px */
right-2 right: 0.5rem; /* 8px */
bottom-2 bottom: 0.5rem; /* 8px */
left-2 left: 0.5rem; /* 8px */
inset-2.5 inset: 0.625rem; /* 10px */
inset-x-2.5 left: 0.625rem; /* 10px */ right: 0.625rem; /* 10px */
inset-y-2.5 top: 0.625rem; /* 10px */ bottom: 0.625rem; /* 10px */
start-2.5 inset-inline-start: 0.625rem; /* 10px */
end-2.5 inset-inline-end: 0.625rem; /* 10px */
top-2.5 top: 0.625rem; /* 10px */
right-2.5 right: 0.625rem; /* 10px */
bottom-2.5 bottom: 0.625rem; /* 10px */
left-2.5 left: 0.625rem; /* 10px */
inset-3 inset: 0.75rem; /* 12px */
inset-x-3 left: 0.75rem; /* 12px */ right: 0.75rem; /* 12px */
inset-y-3 top: 0.75rem; /* 12px */ bottom: 0.75rem; /* 12px */
start-3 inset-inline-start: 0.75rem; /* 12px */
end-3 inset-inline-end: 0.75rem; /* 12px */
top-3 top: 0.75rem; /* 12px */
right-3 right: 0.75rem; /* 12px */
bottom-3 bottom: 0.75rem; /* 12px */
left-3 left: 0.75rem; /* 12px */
inset-3.5 inset: 0.875rem; /* 14px */
inset-x-3.5 left: 0.875rem; /* 14px */ right: 0.875rem; /* 14px */
inset-y-3.5 top: 0.875rem; /* 14px */ bottom: 0.875rem; /* 14px */
start-3.5 inset-inline-start: 0.875rem; /* 14px */
end-3.5 inset-inline-end: 0.875rem; /* 14px */
top-3.5 top: 0.875rem; /* 14px */
right-3.5 right: 0.875rem; /* 14px */
bottom-3.5 bottom: 0.875rem; /* 14px */
left-3.5 left: 0.875rem; /* 14px */
inset-4 inset: 1rem; /* 16px */
inset-x-4 left: 1rem; /* 16px */ right: 1rem; /* 16px */
inset-y-4 top: 1rem; /* 16px */ bottom: 1rem; /* 16px */
start-4 inset-inline-start: 1rem; /* 16px */
end-4 inset-inline-end: 1rem; /* 16px */
top-4 top: 1rem; /* 16px */
right-4 right: 1rem; /* 16px */
bottom-4 bottom: 1rem; /* 16px */
left-4 left: 1rem; /* 16px */
inset-5 inset: 1.25rem; /* 20px */
inset-x-5 left: 1.25rem; /* 20px */ right: 1.25rem; /* 20px */
inset-y-5 top: 1.25rem; /* 20px */ bottom: 1.25rem; /* 20px */
start-5 inset-inline-start: 1.25rem; /* 20px */
end-5 inset-inline-end: 1.25rem; /* 20px */
top-5 top: 1.25rem; /* 20px */
right-5 right: 1.25rem; /* 20px */
bottom-5 bottom: 1.25rem; /* 20px */
left-5 left: 1.25rem; /* 20px */
inset-6 inset: 1.5rem; /* 24px */
inset-x-6 left: 1.5rem; /* 24px */ right: 1.5rem; /* 24px */
inset-y-6 top: 1.5rem; /* 24px */ bottom: 1.5rem; /* 24px */
start-6 inset-inline-start: 1.5rem; /* 24px */
end-6 inset-inline-end: 1.5rem; /* 24px */
top-6 top: 1.5rem; /* 24px */
right-6 right: 1.5rem; /* 24px */
bottom-6 bottom: 1.5rem; /* 24px */
left-6 left: 1.5rem; /* 24px */
inset-7 inset: 1.75rem; /* 28px */
inset-x-7 left: 1.75rem; /* 28px */ right: 1.75rem; /* 28px */
inset-y-7 top: 1.75rem; /* 28px */ bottom: 1.75rem; /* 28px */
start-7 inset-inline-start: 1.75rem; /* 28px */
end-7 inset-inline-end: 1.75rem; /* 28px */
top-7 top: 1.75rem; /* 28px */
right-7 right: 1.75rem; /* 28px */
bottom-7 bottom: 1.75rem; /* 28px */
left-7 left: 1.75rem; /* 28px */
inset-8 inset: 2rem; /* 32px */
inset-x-8 left: 2rem; /* 32px */ right: 2rem; /* 32px */
inset-y-8 top: 2rem; /* 32px */ bottom: 2rem; /* 32px */
start-8 inset-inline-start: 2rem; /* 32px */
end-8 inset-inline-end: 2rem; /* 32px */
top-8 top: 2rem; /* 32px */
right-8 right: 2rem; /* 32px */
bottom-8 bottom: 2rem; /* 32px */
left-8 left: 2rem; /* 32px */
inset-9 inset: 2.25rem; /* 36px */
inset-x-9 left: 2.25rem; /* 36px */ right: 2.25rem; /* 36px */
inset-y-9 top: 2.25rem; /* 36px */ bottom: 2.25rem; /* 36px */
start-9 inset-inline-start: 2.25rem; /* 36px */
end-9 inset-inline-end: 2.25rem; /* 36px */
top-9 top: 2.25rem; /* 36px */
right-9 right: 2.25rem; /* 36px */
bottom-9 bottom: 2.25rem; /* 36px */
left-9 left: 2.25rem; /* 36px */
inset-10 inset: 2.5rem; /* 40px */
inset-x-10 left: 2.5rem; /* 40px */ right: 2.5rem; /* 40px */
inset-y-10 top: 2.5rem; /* 40px */ bottom: 2.5rem; /* 40px */
start-10 inset-inline-start: 2.5rem; /* 40px */
end-10 inset-inline-end: 2.5rem; /* 40px */
top-10 top: 2.5rem; /* 40px */
right-10 right: 2.5rem; /* 40px */
bottom-10 bottom: 2.5rem; /* 40px */
left-10 left: 2.5rem; /* 40px */
inset-11 inset: 2.75rem; /* 44px */
inset-x-11 left: 2.75rem; /* 44px */ right: 2.75rem; /* 44px */
inset-y-11 top: 2.75rem; /* 44px */ bottom: 2.75rem; /* 44px */
start-11 inset-inline-start: 2.75rem; /* 44px */
end-11 inset-inline-end: 2.75rem; /* 44px */
top-11 top: 2.75rem; /* 44px */
right-11 right: 2.75rem; /* 44px */
bottom-11 bottom: 2.75rem; /* 44px */
left-11 left: 2.75rem; /* 44px */
inset-12 inset: 3rem; /* 48px */
inset-x-12 left: 3rem; /* 48px */ right: 3rem; /* 48px */
inset-y-12 top: 3rem; /* 48px */ bottom: 3rem; /* 48px */
start-12 inset-inline-start: 3rem; /* 48px */
end-12 inset-inline-end: 3rem; /* 48px */
top-12 top: 3rem; /* 48px */
right-12 right: 3rem; /* 48px */
bottom-12 bottom: 3rem; /* 48px */
left-12 left: 3rem; /* 48px */
inset-14 inset: 3.5rem; /* 56px */
inset-x-14 left: 3.5rem; /* 56px */ right: 3.5rem; /* 56px */
inset-y-14 top: 3.5rem; /* 56px */ bottom: 3.5rem; /* 56px */
start-14 inset-inline-start: 3.5rem; /* 56px */
end-14 inset-inline-end: 3.5rem; /* 56px */
top-14 top: 3.5rem; /* 56px */
right-14 right: 3.5rem; /* 56px */
bottom-14 bottom: 3.5rem; /* 56px */
left-14 left: 3.5rem; /* 56px */
inset-16 inset: 4rem; /* 64px */
inset-x-16 left: 4rem; /* 64px */ right: 4rem; /* 64px */
inset-y-16 top: 4rem; /* 64px */ bottom: 4rem; /* 64px */
start-16 inset-inline-start: 4rem; /* 64px */
end-16 inset-inline-end: 4rem; /* 64px */
top-16 top: 4rem; /* 64px */
right-16 right: 4rem; /* 64px */
bottom-16 bottom: 4rem; /* 64px */
left-16 left: 4rem; /* 64px */
inset-20 inset: 5rem; /* 80px */
inset-x-20 left: 5rem; /* 80px */ right: 5rem; /* 80px */
inset-y-20 top: 5rem; /* 80px */ bottom: 5rem; /* 80px */
start-20 inset-inline-start: 5rem; /* 80px */
end-20 inset-inline-end: 5rem; /* 80px */
top-20 top: 5rem; /* 80px */
right-20 right: 5rem; /* 80px */
bottom-20 bottom: 5rem; /* 80px */
left-20 left: 5rem; /* 80px */
inset-24 inset: 6rem; /* 96px */
inset-x-24 left: 6rem; /* 96px */ right: 6rem; /* 96px */
inset-y-24 top: 6rem; /* 96px */ bottom: 6rem; /* 96px */
start-24 inset-inline-start: 6rem; /* 96px */
end-24 inset-inline-end: 6rem; /* 96px */
top-24 top: 6rem; /* 96px */
right-24 right: 6rem; /* 96px */
bottom-24 bottom: 6rem; /* 96px */
left-24 left: 6rem; /* 96px */
inset-28 inset: 7rem; /* 112px */
inset-x-28 left: 7rem; /* 112px */ right: 7rem; /* 112px */
inset-y-28 top: 7rem; /* 112px */ bottom: 7rem; /* 112px */
start-28 inset-inline-start: 7rem; /* 112px */
end-28 inset-inline-end: 7rem; /* 112px */
top-28 top: 7rem; /* 112px */
right-28 right: 7rem; /* 112px */
bottom-28 bottom: 7rem; /* 112px */
left-28 left: 7rem; /* 112px */
inset-32 inset: 8rem; /* 128px */
inset-x-32 left: 8rem; /* 128px */ right: 8rem; /* 128px */
inset-y-32 top: 8rem; /* 128px */ bottom: 8rem; /* 128px */
start-32 inset-inline-start: 8rem; /* 128px */
end-32 inset-inline-end: 8rem; /* 128px */
top-32 top: 8rem; /* 128px */
right-32 right: 8rem; /* 128px */
bottom-32 bottom: 8rem; /* 128px */
left-32 left: 8rem; /* 128px */
inset-36 inset: 9rem; /* 144px */
inset-x-36 left: 9rem; /* 144px */ right: 9rem; /* 144px */
inset-y-36 top: 9rem; /* 144px */ bottom: 9rem; /* 144px */
start-36 inset-inline-start: 9rem; /* 144px */
end-36 inset-inline-end: 9rem; /* 144px */
top-36 top: 9rem; /* 144px */
right-36 right: 9rem; /* 144px */
bottom-36 bottom: 9rem; /* 144px */
left-36 left: 9rem; /* 144px */
inset-40 inset: 10rem; /* 160px */
inset-x-40 left: 10rem; /* 160px */ right: 10rem; /* 160px */
inset-y-40 top: 10rem; /* 160px */ bottom: 10rem; /* 160px */
start-40 inset-inline-start: 10rem; /* 160px */
end-40 inset-inline-end: 10rem; /* 160px */
top-40 top: 10rem; /* 160px */
right-40 right: 10rem; /* 160px */
bottom-40 bottom: 10rem; /* 160px */
left-40 left: 10rem; /* 160px */
inset-44 inset: 11rem; /* 176px */
inset-x-44 left: 11rem; /* 176px */ right: 11rem; /* 176px */
inset-y-44 top: 11rem; /* 176px */ bottom: 11rem; /* 176px */
start-44 inset-inline-start: 11rem; /* 176px */
end-44 inset-inline-end: 11rem; /* 176px */
top-44 top: 11rem; /* 176px */
right-44 right: 11rem; /* 176px */
bottom-44 bottom: 11rem; /* 176px */
left-44 left: 11rem; /* 176px */
inset-48 inset: 12rem; /* 192px */
inset-x-48 left: 12rem; /* 192px */ right: 12rem; /* 192px */
inset-y-48 top: 12rem; /* 192px */ bottom: 12rem; /* 192px */
start-48 inset-inline-start: 12rem; /* 192px */
end-48 inset-inline-end: 12rem; /* 192px */
top-48 top: 12rem; /* 192px */
right-48 right: 12rem; /* 192px */
bottom-48 bottom: 12rem; /* 192px */
left-48 left: 12rem; /* 192px */
inset-52 inset: 13rem; /* 208px */
inset-x-52 left: 13rem; /* 208px */ right: 13rem; /* 208px */
inset-y-52 top: 13rem; /* 208px */ bottom: 13rem; /* 208px */
start-52 inset-inline-start: 13rem; /* 208px */
end-52 inset-inline-end: 13rem; /* 208px */
top-52 top: 13rem; /* 208px */
right-52 right: 13rem; /* 208px */
bottom-52 bottom: 13rem; /* 208px */
left-52 left: 13rem; /* 208px */
inset-56 inset: 14rem; /* 224px */
inset-x-56 left: 14rem; /* 224px */ right: 14rem; /* 224px */
inset-y-56 top: 14rem; /* 224px */ bottom: 14rem; /* 224px */
start-56 inset-inline-start: 14rem; /* 224px */
end-56 inset-inline-end: 14rem; /* 224px */
top-56 top: 14rem; /* 224px */
right-56 right: 14rem; /* 224px */
bottom-56 bottom: 14rem; /* 224px */
left-56 left: 14rem; /* 224px */
inset-60 inset: 15rem; /* 240px */
inset-x-60 left: 15rem; /* 240px */ right: 15rem; /* 240px */
inset-y-60 top: 15rem; /* 240px */ bottom: 15rem; /* 240px */
start-60 inset-inline-start: 15rem; /* 240px */
end-60 inset-inline-end: 15rem; /* 240px */
top-60 top: 15rem; /* 240px */
right-60 right: 15rem; /* 240px */
bottom-60 bottom: 15rem; /* 240px */
left-60 left: 15rem; /* 240px */
inset-64 inset: 16rem; /* 256px */
inset-x-64 left: 16rem; /* 256px */ right: 16rem; /* 256px */
inset-y-64 top: 16rem; /* 256px */ bottom: 16rem; /* 256px */
start-64 inset-inline-start: 16rem; /* 256px */
end-64 inset-inline-end: 16rem; /* 256px */
top-64 top: 16rem; /* 256px */
right-64 right: 16rem; /* 256px */
bottom-64 bottom: 16rem; /* 256px */
left-64 left: 16rem; /* 256px */
inset-72 inset: 18rem; /* 288px */
inset-x-72 left: 18rem; /* 288px */ right: 18rem; /* 288px */
inset-y-72 top: 18rem; /* 288px */ bottom: 18rem; /* 288px */
start-72 inset-inline-start: 18rem; /* 288px */
end-72 inset-inline-end: 18rem; /* 288px */
top-72 top: 18rem; /* 288px */
right-72 right: 18rem; /* 288px */
bottom-72 bottom: 18rem; /* 288px */
left-72 left: 18rem; /* 288px */
inset-80 inset: 20rem; /* 320px */
inset-x-80 left: 20rem; /* 320px */ right: 20rem; /* 320px */
inset-y-80 top: 20rem; /* 320px */ bottom: 20rem; /* 320px */
start-80 inset-inline-start: 20rem; /* 320px */
end-80 inset-inline-end: 20rem; /* 320px */
top-80 top: 20rem; /* 320px */
right-80 right: 20rem; /* 320px */
bottom-80 bottom: 20rem; /* 320px */
left-80 left: 20rem; /* 320px */
inset-96 inset: 24rem; /* 384px */
inset-x-96 left: 24rem; /* 384px */ right: 24rem; /* 384px */
inset-y-96 top: 24rem; /* 384px */ bottom: 24rem; /* 384px */
start-96 inset-inline-start: 24rem; /* 384px */
end-96 inset-inline-end: 24rem; /* 384px */
top-96 top: 24rem; /* 384px */
right-96 right: 24rem; /* 384px */
bottom-96 bottom: 24rem; /* 384px */
left-96 left: 24rem; /* 384px */
inset-auto inset: auto;
inset-1/2 inset: 50%;
inset-1/3 inset: 33.333333%;
inset-2/3 inset: 66.666667%;
inset-1/4 inset: 25%;
inset-2/4 inset: 50%;
inset-3/4 inset: 75%;
inset-full inset: 100%;
inset-x-auto left: auto; right: auto;
inset-x-1/2 left: 50%; right: 50%;
inset-x-1/3 left: 33.333333%; right: 33.333333%;
inset-x-2/3 left: 66.666667%; right: 66.666667%;
inset-x-1/4 left: 25%; right: 25%;
inset-x-2/4 left: 50%; right: 50%;
inset-x-3/4 left: 75%; right: 75%;
inset-x-full left: 100%; right: 100%;
inset-y-auto top: auto; bottom: auto;
inset-y-1/2 top: 50%; bottom: 50%;
inset-y-1/3 top: 33.333333%; bottom: 33.333333%;
inset-y-2/3 top: 66.666667%; bottom: 66.666667%;
inset-y-1/4 top: 25%; bottom: 25%;
inset-y-2/4 top: 50%; bottom: 50%;
inset-y-3/4 top: 75%; bottom: 75%;
inset-y-full top: 100%; bottom: 100%;
start-auto inset-inline-start: auto;
start-1/2 inset-inline-start: 50%;
start-1/3 inset-inline-start: 33.333333%;
start-2/3 inset-inline-start: 66.666667%;
start-1/4 inset-inline-start: 25%;
start-2/4 inset-inline-start: 50%;
start-3/4 inset-inline-start: 75%;
start-full inset-inline-start: 100%;
end-auto inset-inline-end: auto;
end-1/2 inset-inline-end: 50%;
end-1/3 inset-inline-end: 33.333333%;
end-2/3 inset-inline-end: 66.666667%;
end-1/4 inset-inline-end: 25%;
end-2/4 inset-inline-end: 50%;
end-3/4 inset-inline-end: 75%;
end-full inset-inline-end: 100%;
top-auto top: auto;
top-1/2 top: 50%;
top-1/3 top: 33.333333%;
top-2/3 top: 66.666667%;
top-1/4 top: 25%;
top-2/4 top: 50%;
top-3/4 top: 75%;
top-full top: 100%;
right-auto right: auto;
right-1/2 right: 50%;
right-1/3 right: 33.333333%;
right-2/3 right: 66.666667%;
right-1/4 right: 25%;
right-2/4 right: 50%;
right-3/4 right: 75%;
right-full right: 100%;
bottom-auto bottom: auto;
bottom-1/2 bottom: 50%;
bottom-1/3 bottom: 33.333333%;
bottom-2/3 bottom: 66.666667%;
bottom-1/4 bottom: 25%;
bottom-2/4 bottom: 50%;
bottom-3/4 bottom: 75%;
bottom-full bottom: 100%;
left-auto left: auto;
left-1/2 left: 50%;
left-1/3 left: 33.333333%;
left-2/3 left: 66.666667%;
left-1/4 left: 25%;
left-2/4 left: 50%;
left-3/4 left: 75%;
left-full left: 100%;
반응형
Breadbread2
@Breadbread2 :: 혼자만의 시간은 좋지만, 혼자는 싫다냐옹 (건들지 말라옹)

안녕하세요~! 저의 블로그를 방문해주셔서 감사합니다!! 좋은 정보 많이 많이 공유할게요~! 자주 놀러와주세요!

공감하셨다면 ❤️ 구독도 환영합니다! 🤗

목차