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

유니크한 클래스명을 만들어 줌 (자동으로!)
[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 파일을 별도로 관리할 필요가 없다 => 복잡도가 감소한다는 장점이 있음
- 클래스 명을 고민할 필요가 없다
- 디자인이 일관되어 있다
- 자유롭게 커스텀이 가능하다
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%; |
'취미 공부 > Daily' 카테고리의 다른 글
Daily Coding - FE 4주차 - 44강 (1) | 2024.10.15 |
---|---|
Daily Coding - FE 4주차 - 39강 40강 42강 43강 (2) | 2024.10.14 |
Daily Coding - FE 3주차 - 34강 (1) | 2024.10.11 |
Daily Coding - FE 3주차 - 29강 30강 31강 32강 33강 (1) | 2024.10.06 |
Daily Coding - FE 3주차 - 28강 (0) | 2024.09.24 |