CSS7 [styled-components] props ์ฌ์ฉ๋ฒ ์ด์ ๋ฆฌ!! A. ์ฌ์ฉํ Button ์ปดํฌ๋ํธ ์์ฑ // Button/index.jsx import * as S from "./button.style.js"; export const Button = ({ children, ...props }) => { return ( {children} ); }; // Button/button.style.js interface ButtonProps { width?: string; size?: string; color: string; } export const Button = styled.button` display: flex; width: ${(props) => (props.width ? props.width : "auto")}; align-items: center; justify-.. 2023. 7. 18. ๊ฐ์์์ ์ ํ์ ::before, ::after ๊ฐ์ ์์๋ ์ ํ์ (Pseudo-elements) ์ ํ์์ ์ถ๊ฐํ๋ ํค์๋๋ก, ์ ํํ ์์(element)์ ์ผ๋ถ์๋ง ์คํ์ผ์ ์ ์ฉํ๋ค. ์ฆ, ์ ํํ ์์ ์ ์ฒด์ ์คํ์ผ์ ์ ์ฉํ๋ ๊ฒ์ด ์๋๋ผ, ์์์ ์ผ๋ถ์๋ง ์คํ์ผ์ ์ ์ฉํฉ๋๋ค. ๋ค์ ๋งํด, HTML์ ์๋ก์ด ์์(element)๋ฅผ ์ถ๊ฐํ ๊ฒ์ฒ๋ผ ๋์ํฉ๋๋ค. ๊ทธ ์ค ๊ฐ์ฅ ๋ํ์ ์ธ ::before ์ ::after ์ ์ฌ์ฉ ์์์ ๋ํด์ ์์๋ณด์ ๊ฐ์ ์์ ์ฌ์ฉ๋ฒ ๊ฐ์ ์์๋, ::before, ::after, ::first-letter ์ ๊ฐ์ด ์์ '::'๋ฅผ ๋ถ์ฌ์ ํ๊ธฐํฉ๋๋ค. import React from "react"; import './App.css'; function App() { return ( Hello Hello ); } export.. 2022. 12. 10. [๋ ๋ง๋ค 3๋ถ CSS] CSS ์ ์ธ ๋ฐฉ์ - ๋ด์ฅ/๋งํฌ/์ธ๋ผ์ธ/@import ์์ CSS์์ฑํ๊ณ HTML ๋ฌธ์์ ํฌํจ์ํค๋ ๋ฐฉ์์ ํฌ๊ฒ 4๊ฐ์ง ๋ฐฉ์์ผ๋ก ์ด๋ฃจ์ด์ ธ ์์ต๋๋ค. ๋ด์ฅ๋ฐฉ์ ์ธ๋ผ์ธ๋ฐฉ์ ๋งํฌ๋ฐฉ์ @import ๋ฐฉ์ ๋ด์ฅ๋ฐฉ์ HTML์ ํค๋ ์์์ ์์ฑ ํ๋ฉฐ.ํ๊ทธ๋ก ์คํ์ผ์ ์์ฑํ๋ ๋ฐฉ์ ์ด ๋ฐฉ์์ ๋๋ถ๋ถ์ ํ๋ก์ ํธ์์ HTML, CSS, JS ํ์ผ์ ๋๋์ด ๊ด๋ฆฌํ๋ ๊ฒ์ด ์ผ๋ฐ์ ์ด๋ฏ๋ก ์์ฃผ ์ฌ์ฉ๋์ง ์๋ ๋ฐฉ์์ ๋๋ค. .. ์ธ๋ผ์ธ๋ฐฉ์ ์์์ style ์์ฑ์ ์ง์ ์คํ์ผ์ ํ๋ ๋ฐฉ์. ... ... CSS์ฐ์ ์์๊ฐ ์ง๋์น๊ฒ ๋๊ธฐ๋๋ฌธ์ ๊ณตํต๊ธฐ๋ฅ์ ๋ํด์ CSSํ์ผ๋ก ๋ฐ๋ก ๊ด๋ฆฌํ๋ ๊ฒฝ์ฐ ์ธ๋ผ์ธ ๋ฐฉ์์ผ๋ก ์ฐ์ฌ์ง ์์๋ ๋ฎ์ด์ฐ๊ธฐ๊ฐ ๋ถ๊ฐ๋ฅํ๋ฉฐ ๋ณ๊ฒฝ์ด ๋ถ๊ฐ๋ฅํ๊ธฐ ๋๋ฌธ์ ์ ์ง๋ณด์์ ์ด๋ ค์์ด ์๋ค. ( ๊ถ์ฅํ์ง ์๋ ๋ฐฉ์. ) ๋งํฌ ๋ฐฉ์ HTML์ ํค๋ ์์์ ์์ฑ ํ๋ฉฐ ํ๊ทธ๋ก CSS๋ฌธ์๋ฅผ.. 2022. 10. 10. [๋ ๋ง๋ค 3๋ถ CSS] ๊ธ์์ ์์ ์ธ๋ผ์ธ & ๋ธ๋ก HTML ์์๊ฐ ํ๋ฉด์ ์ถ๋ ฅ๋๋ ํน์ฑ์ ํฌ๊ฒ 2๊ฐ์ง๋ก ๊ตฌ๋ถ๋๋ค ์ธ๋ผ์ธ(Inline) ์์ : ๊ธ์๋ฅผ ๋ง๋ค๊ธฐ ์ํ ์์๋ค. ๋ธ๋ก(Block) ์์ : ์์(๋ ์ด์์)๋ฅผ ๋ง๋ค๊ธฐ ์ํ ์์๋ค. ์ธ๋ผ์ธ ์์ (inline) ๐ฌํน์ง ์์๋ค์ด ์ํ์ผ๋ก ์์ ( ๊ฐ๋ก๋ก ํ์ค๋ก ) ํฌํจํ ์ฝํ ์ธ ( content ) ํฌ๊ธฐ๋งํผ ์๋์ผ๋ก ์ค์ด๋ฌ ( ์ํ์ข์ฐ ) ํฌ๊ธฐ๊ฐ ๊ฐ์ง ์ ์์ ( ์ฌ์ด์ฆ ์ง์ ๋ถ๊ฐ๋ฅ width, height ) ์ํ ๋ง์ง ์ ์ฉ ๋ถ๊ฐ๋ฅ ( ์ข์ฐ ๋ง์ง์ ๊ฐ๋ฅ / ์ข์ฐ ํจ๋ฉ๋ ๊ฐ๋ฅ, ํจ๋ฉ์ ๊ฒฝ์ฐ ์ํ๋ ๋์ด์ง๊ฒ ๋ณด์ด๋ ๊ฒ ๋ฟ ์ ์ฉx ) ์ธ๋ผ์ธ ํ๊ทธ๋ ํ๋์ ๊ธ์๋ผ๊ณ ์๊ฐํ๋ฉด๋๋ค, ๊ธ์๋ ๊ฐ๋ก์ ์ธ๋ก ์ฌ์ด์ฆ๋ฅผ ๊ฐ์ง ์ ์๊ธฐ ๋๋ฌธ์ style ํ๊ทธ๋ฅผ ํตํ ๊ฐ๋ก ๋์ด๋ ๋จน์ง ์๋๋ค ๋ํ ๊ธ์์์๋ค.. 2022. 10. 7. ์ด์ 1 2 ๋ค์