๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

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.