CSS ì¬ì©ì ì ì ìì± ë±ë¡ì ê°ë ¥í êž°ë¥ì íìíì¬ ì€íìŒ ìížë¥Œ ê°ì íê³ , ì ì§ë³Žìì±ì ëìŽë©°, ê³ êž í ë§ êž°ë¥ì íì©íìžì. ëì± ê²¬ê³ íê³ ììž¡ ê°ë¥í CSS륌 ìíŽ ì¬ì©ì ì ì ìì±ì ì ìíê³ ì íšì±ì ê²ì¬íë ë°©ë²ì ìì볎ìžì.
CSS ì¬ì©ì ì ì ìì± ë±ë¡ ìŽíŽíêž°: ì¢ í© ê°ìŽë
CSS ì¬ì©ì ì ì ìì±(CSS ë³ìëŒê³ ë íš)ì ì€íìŒ ìížë¥Œ ìì±íê³ êŽëЬíë ë°©ìì íëª
ì ê°ì žììµëë€. ìŽë¥Œ íµíŽ CSS ì 첎ì ì ì©í ì ìë ì¬ì¬ì© ê°ë¥í ê°ì ì ìíì¬ ìœë륌 ë ìœê² ì ì§ êŽëЬíê³ ì
ë°ìŽíží ì ììµëë€. ê·žë¬ë íì€ CSS ì¬ì©ì ì ì ìì±ì ëŽì¬ë íì
ê²ì¬ ë° ì íšì± ê²ì¬ê° ë¶ì¡±í©ëë€. ë°ë¡ ìŽë @property ê·ì¹ìŒë¡ íì±íëë CSS ì¬ì©ì ì ì ìì± ë±ë¡ìŽ ë±ì¥í©ëë€. ìŽ ê°ë ¥í êž°ë¥ì íµíŽ ì¬ì©ì ì ì ìì±ì íì
, 구묞, ìŽêž° ê° ë° ìì ëìì ëª
ìì ìŒë¡ ì ìíì¬ ë³Žë€ ê²¬ê³ íê³ ììž¡ ê°ë¥í ì€íìŒë§ 겜íì ì ê³µí ì ììµëë€.
CSS ì¬ì©ì ì ì ìì± ë±ë¡ìŽë?
CSS Houdini APIì ìŒë¶ë¡ ëì
ë CSS ì¬ì©ì ì ì ìì± ë±ë¡ì @property ê·ì¹ì ì¬ì©íì¬ CSS ì¬ì©ì ì ì ìì±ì í¹ì±ì ëª
ìì ìŒë¡ ì ìí ì ìëë¡ íë ë©ì»€ëìŠì
ëë€. ìŽ ê·ì¹ì íµíŽ ë€ìì ì§ì í ì ììµëë€:
name: ì¬ì©ì ì ì ìì±ì ìŽëŠ(íì).--ë¡ ììíŽìŒ í©ëë€.syntax: ì¬ì©ì ì ì ìì±ì ìì ë°ìŽí° íì ì ì ìí©ëë€. ììë¡ë<color>,<length>,<number>,<percentage>,<integer>,<string>ëë ì ê· ííìì ì¬ì©í ì¬ì©ì ì ì êµ¬ë¬žìŽ í¬íšë©ëë€.inherits: ì¬ì©ì ì ì ìì±ìŽ ë¶ëªš ììë¡ë¶í° ê°ì ììíŽìŒ íëì§ ì¬ë¶ë¥Œ ëíëŽë ë¶ëŠ¬ìž ê°(trueëëfalse).initial-value: ë€ë¥ž ê°ìŽ ì§ì ëì§ ìì ê²œì° ì¬ì©ì ì ì ìì±ì Ʞ볞 ê°ì ëë€. ì§ì ësyntaxì ë°ëŒìŒ í©ëë€.
ì¬ì©ì ì ì ìì±ì ë±ë¡í멎 íì ê²ì¬, ìœë ê°ë ì± í¥ì, ììì ëí ë ëì ì ìŽ ë± ì¬ë¬ ê°ì§ ìŽì ì ì»ì ì ììµëë€. ìŽ ê°ë ¥í êž°ë¥ì ìŽì 곌 ì¬ì© ë°©ë²ì ëíŽ ë ììží ììë³Žê² ìµëë€.
CSS ì¬ì©ì ì ì ìì± ë±ë¡ ì¬ì©ì ìŽì
1. íì ê²ì¬ ë° ì íšì± ê²ì¬
ìì± ë±ë¡ì 죌ì ìŽì ì€ íëë íì
ê²ì¬ë¥Œ ê°ì í ì ìë€ë ê²ì
ëë€. ë±ë¡íì§ ììŒë©Ž CSS ì¬ì©ì ì ì ìì±ì 묞ììŽë¡ ì·šêžë©ëë€. ì¬ì©ì ì ì ìì±ìŽ ìì ê°ì ê°ì žìŒ íëë° ì€ìë¡ êžžìŽë¥Œ í ë¹í멎, íì€ CSSë ìŽë¥Œ ëšìí 묞ììŽë¡ ì²ëЬíì¬ ììì¹ ëª»í ì€íìŒë§ ì€ë¥ë¥Œ ì ë°í ì ììµëë€. ë±ë¡ì íµíŽ ëžëŒì°ì ë í ë¹ë ê°ì ì ìžë 구묞곌 ëì¡°íì¬ ì íšì±ì ê²ì¬í ì ììµëë€. ê°ìŽ ìŒì¹íì§ ììŒë©Ž ëžëŒì°ì ë initial-value륌 ì¬ì©íì¬ ì€ë¥ë¥Œ ë°©ì§íê³ ë ìŒêŽë ì€íìŒë§ì 볎ì¥í©ëë€.
ìì:
@property --primary-color {
syntax: <color>;
inherits: false;
initial-value: #007bff;
}
:root {
--primary-color: red; /* Valid */
--primary-color: 20px; /* Invalid - will revert to #007bff */
}
ìŽ ìììì --primary-colorì ìììŽ ìë ê°ì í ë¹íë €ê³ í멎, ëžëŒì°ì ë ì íšíì§ ìì í ë¹ì 묎ìíê³ initial-value(#007bff)륌 ëì ì¬ì©í©ëë€.
2. ìœë ê°ë ì± ë° ì ì§ë³Žìì± í¥ì
ì¬ì©ì ì ì ìì±ì ë±ë¡í멎 CSS ìœëê° ì첎ì ìŒë¡ 묞ìíëìŽ ìŽíŽíêž° ì¬ìì§ëë€. ê° ìì±ì 구묞곌 ìŽêž° ê°ì ëª ìì ìŒë¡ ì ìíšìŒë¡ìš, ìœë ìì ì í ë€ë¥ž ê°ë°ì(ë° ë¯žëì ìì )ìê² ì ì©í 컚í ì€ížë¥Œ ì ê³µí©ëë€. ìŽë ê² í¥ìë ê°ë ì±ì ëë²ê¹ , ì ì§ë³Žì ë° íì ì ë ìœê² ë§ëëë€.
3. í¥ìë í ë§ êž°ë¥
CSS ì¬ì©ì ì ì ìì± ë±ë¡ì ëì± ê²¬ê³ íê³ ììž¡ ê°ë¥í í ë§ë¥Œ ê°ë¥íê² í©ëë€. í ë§ êŽë š ìì±ì ìì íì 곌 ìŽêž° ê°ì ì ìíšìŒë¡ìš, í ë§ê° ìŒêŽì± ìê² ì ì©ëê³ ììì¹ ëª»í ë¶ìì©ìŽ ë°ìíì§ ìëë¡ í ì ììµëë€. ìŽë ë€ìí í ë§ì ê±žì³ ìŒêŽë 몚ì곌 ëëì ì ì§íë ê²ìŽ ì€ìí ëê·ëªš ë° ë³µì¡í ì í늬ìŒìŽì ìì í¹í ì ì©í©ëë€. ë°ì í ë§ì ìŽëìŽ í ë§ ìë늬ì€ë¥Œ ê³ ë €íŽ ë³Žìžì:
@property --background-color {
syntax: <color>;
inherits: false;
initial-value: #ffffff; /* White */
}
@property --text-color {
syntax: <color>;
inherits: false;
initial-value: #000000; /* Black */
}
:root {
--background-color: #ffffff;
--text-color: #000000;
}
.dark-theme {
--background-color: #000000;
--text-color: #ffffff;
}
body {
background-color: var(--background-color);
color: var(--text-color);
}
ìŽ ìììì @property ê·ì¹ì ì ì©ë í
ë§ì ìêŽììŽ --background-colorì --text-colorê° íì ì íší ìììŽ ëëë¡ ë³Žì¥í©ëë€. í
ë§ê° ì íšíì§ ìì ê°ì í ë¹íë €ê³ ìëí멎, ëžëŒì°ì ë ì ìë initial-valueë¡ ë첎íì¬ ëììžì 묎결ì±ì ì ì§í©ëë€.
4. ë ììž¡ ê°ë¥í ìì
inherits ìì±ì ì¬ì©í멎 ì¬ì©ì ì ì ìì±ìŽ ë¶ëªš ììë¡ë¶í° ê°ì ììíŽìŒ íëì§ ì¬ë¶ë¥Œ ì ìŽí ì ììµëë€. ìŽë DOM ížëŠ¬ë¥Œ ë°ëŒ ì íëë ê³ëšì ì€íìŒì ìì±íë ë° ì ì©í ì ììµëë€. inherits: true륌 ëª
ìì ìŒë¡ ì€ì íì¬ ì€ì²©ë ìììì ì¬ì©ì ì ì ìì±ìŽ ììëë¡ ëìíëë¡ ë³Žì¥í ì ììµëë€.
@property ê·ì¹ ì¬ì© ë°©ë²
@property ê·ì¹ì ì¬ì©ì ì ì ìì±ì ë±ë¡íë ë° ì¬ì©ë©ëë€. ë€ë¥ž ê·ì¹ì
(@import ë° @charset ì ìž) ìžë¶, ìŠ CSS ìµììì ë°°ì¹ëìŽìŒ í©ëë€.
구묞:
@property --property-name {
syntax: <syntax-value>;
inherits: true | false;
initial-value: value;
}
구묞ì ê° ë¶ë¶ì ìŽíŽë³Žê² ìµëë€:
--property-name: ë±ë¡íë €ë ì¬ì©ì ì ì ìì±ì ìŽëŠì ëë€. ë ê°ì íìŽí(--)ìŒë¡ ììíŽìŒ í©ëë€.syntax: ì¬ì©ì ì ì ìì±ì ìì ë°ìŽí° íì ì ì ìí©ëë€. 믞늬 ì ìë 구묞 ê° ì€ íëìŽê±°ë ì ê· ííìì ì¬ì©íì¬ ì ìë ì¬ì©ì ì ì êµ¬ë¬žìŒ ì ììµëë€.inherits: ì¬ì©ì ì ì ìì±ìŽ ë¶ëªš ììë¡ë¶í° ê°ì ììíŽìŒ íëì§ ì¬ë¶ë¥Œ ì§ì í©ëë€.trueëëfalseê° ë ì ììµëë€.initial-value: ë€ë¥ž ê°ìŽ ì§ì ëì§ ìì ê²œì° ì¬ì©ì ì ì ìì±ì Ʞ볞 ê°ì ëë€. ì§ì ësyntaxì ë°ëŒìŒ í©ëë€.
syntax ëì€í¬ëŠœí° ìŽíŽíêž°
syntax ëì€í¬ëŠœí°ë ì¬ì©ì ì ì ìì±ì ìì ë°ìŽí° íì
ì ì ìíë¯ë¡ @property ê·ì¹ìì ê°ì¥ ì€ìí ë¶ë¶ìŽëŒê³ í ì ììµëë€. ë€ìì ê°ì¥ ìŒë°ì ìŒë¡ ì¬ì©ëë 구묞 ê° ì€ ìŒë¶ì
ëë€:
<color>:#ffffff,rgb(255, 255, 255)ëëhsl(0, 0%, 100%)곌 ê°ì ìì ê°ì ëíë ëë€.<length>:10px,2emëë50%ì ê°ì êžžìŽ ê°ì ëíë ëë€.<number>:1,3.14ëë-2.5ì ê°ì ì«ì ê°ì ëíë ëë€.<percentage>:50%ëë100%ì ê°ì ë°±ë¶ìš ê°ì ëíë ëë€.<integer>:1,-5ëë100곌 ê°ì ì ì ê°ì ëíë ëë€.<string>:"Hello, world!"ì ê°ì 묞ììŽ ê°ì ëíë ëë€.*: 몚ë ê°ì ëíë ëë€. ìŽë íì ê²ì¬ë¥Œ ë¹íì±ííë¯ë¡ ì¬ì€ì ìì±ì ì í ë±ë¡íì§ ìë ê²ê³Œ ê°ìµëë€. ëë¬Œê² ì¬ì©íŽìŒ í©ëë€.- ì¬ì©ì ì ì 구묞: ì ê· ííìì ì¬ì©íì¬ ì¬ì©ì ì ì 구묞ì ì ìí ìë ììµëë€. ìŽë¥Œ íµíŽ ì¬ì©ì ì ì ìì± ê°ì ëí ë§€ì° êµ¬ì²Žì ìž ì íšì± ê²ì¬ê° ê°ë¥í©ëë€. ììží ëŽì©ì ìë ì¹ì ì ì°žì¡°íìžì.
ë€ë¥ž syntax ê° ì¬ì© ìì
@property --font-size {
syntax: <length>;
inherits: true;
initial-value: 16px;
}
@property --opacity {
syntax: <number>;
inherits: false;
initial-value: 1;
}
@property --border-radius {
syntax: <percentage>;
inherits: false;
initial-value: 0%;
}
@property --animation-duration {
syntax: <time>;
inherits: false;
initial-value: 0.3s;
}
ì ê· ííìì ìŽì©í ì¬ì©ì ì ì 구묞 ì ì
ë ê³ êž ì íšì± ê²ì¬ë¥Œ ìíŽ ì ê· ííìì ì¬ì©íì¬ ì¬ì©ì ì ì 구묞ì ì ìí ì ììµëë€. ìŽë¥Œ íµíŽ ì¬ì©ì ì ì ìì± ê°ì íìì ì ííê² ì§ì í ì ììµëë€. ì¬ì©ì ì ì 구묞ì ì ìíë 구묞ì ë€ì곌 ê°ìµëë€:
@property --custom-property {
syntax: '<custom-syntax>';
inherits: false;
initial-value: valid-value;
}
<custom-syntax>ë ì¬ì©ì ì ì ìì± ê°ìŽ ìŒì¹íŽìŒ íë ì ê· ííìì
ëë€. ì ê· ííìì ììë°ìŽíë¡ ë¬¶ìŽìŒ í©ëë€. ì€ì ìì륌 ìŽíŽë³Žê² ìµëë€. ì¬ì©ì ì ì ìì±ìŽ 'PROD-'ë¡ ììíê³ ê·ž ë€ì 5ì늬 ì«ìê° ì€ë í¹ì íìì ì í ìœë륌 ê°ì žìŒ íë€ê³ ê°ì íŽ ëŽ
ìë€.
@property --product-code {
syntax: '^PROD-\\d{5}$';
inherits: false;
initial-value: 'PROD-00000';
}
:root {
--product-code: 'PROD-12345'; /* Valid */
--product-code: 'PROD-1234'; /* Invalid - reverts to initial-value */
--product-code: 'PRODX-12345'; /* Invalid - reverts to initial-value */
}
ìŽ ìììì ì ê· ííì ^PROD-\\d{5}$ë --product-code ì¬ì©ì ì ì ìì±ìŽ íì íìí íìì ë°ë¥Žëë¡ ë³Žì¥í©ëë€. ì ê· ííì곌 ìŒì¹íì§ ìë 몚ë ê°ì ì íšíì§ ìì ê²ìŒë¡ ê°ì£Œëë©°, ëžëŒì°ì ë ëì initial-value륌 ì¬ì©í©ëë€.
ìì: ìíê° ìë í¥ì€ ìì ì íšì± ê²ì¬
@property --hex-color-alpha {
syntax: '^#([0-9a-fA-F]{3}){1,2}([0-9a-fA-F]{2})?$';
inherits: false;
initial-value: '#000000FF';
}
:root {
--hex-color-alpha: '#FF000080'; /* Valid */
--hex-color-alpha: '#F00'; /* Valid - shorthand hex code also accepted */
--hex-color-alpha: '#FF0000'; /* Valid - no alpha channel (defaults to FF) */
--hex-color-alpha: 'red'; /* Invalid - reverts to initial-value */
}
ëžëŒì°ì ì§ì
2024ë
ë§ íì¬, CSS ì¬ì©ì ì ì ìì± ë±ë¡ì ëí ëžëŒì°ì ì§ìì Chrome, Firefox, Safari, Edge륌 í¬íší ìµì ëžëŒì°ì ìì ë§€ì° ì¢ìµëë€. ê·žë¬ë íë¡ëì
í겜ìì ìŽ êž°ë¥ì ì¬ì©íêž° ì ì Can I useì ê°ì 늬ìì€ìì ìµì ëžëŒì°ì ížíì± ì 볎륌 íì íìžíë ê²ìŽ ì¢ìµëë€. @property륌 ì§ìíì§ ìë ìŽì ëžëŒì°ì ì 겜ì°, ì¬ì©ì ì ì ìì±ì ìŒë° CSS ë³ìì²ëŒ ê³ì ìëíì§ë§, íì
ê²ì¬ ë° ì íšì± ê²ì¬ì ìŽì ì ììµëë€.
CSS ì¬ì©ì ì ì ìì± ë±ë¡ ì¬ì©ì ìí ëªšë² ì¬ë¡
- 몚ë ì¬ì©ì ì ì ìì± ë±ë¡: Ʞ볞 구묞 ê°ë§ ì¬ì©íëëŒë 몚ë ì¬ì©ì ì ì ìì±ì ë±ë¡íë ìµêŽì ë€ìŽìžì. ìŽë ê² í멎 ìœëì ê°ë ì±ê³Œ ì ì§ë³Žìì±ìŽ í¥ìë©ëë€.
- ì ì í 구묞 ì í: ì¬ì©ì ì ì ìì±ì ìì ë°ìŽí° íì
ì ê°ì¥ ì ëíëŽë 구묞 ê°ì ì ííìžì. ì ëì ìŒë¡ íìí 겜ì°ê° ìë멎
*ì¬ì©ì íŒíìžì. - ì믞 ìë ìŽêž° ê° ì ê³µ:
initial-valueë ì§ì ë 구묞ì ë§ë í©ëЬì ìž êž°ë³ž ê°ìŽìŽìŒ í©ëë€. - ë³µì¡í ì íšì± ê²ì¬ë¥Œ ìí ì¬ì©ì ì ì 구묞 ì¬ì©: í¹ì ìì ëë ë°ìŽí° ì ìœì ì ì©íŽìŒ í ë ì ê· ííìì ì¬ì©íì¬ ì¬ì©ì ì ì 구묞ì íì©íìžì.
- ì¬ì©ì ì ì ìì± ë¬žìí: í¹í ì¬ì©ì ì ì 구묞ì ì¬ì©í ë, ê° ì¬ì©ì ì ì ìì±ì 목ì 곌 ì¬ì©ë²ì ì€ëª íêž° ìíŽ CSS ìœëì 죌ìì ì¶ê°íìžì.
- ì ê·Œì± ê³ ë €: í ë§ë¥Œ ìíŽ ì¬ì©ì ì ì ìì±ì ì¬ì©í ë, í ë§ê° ì¶©ë¶í ëë¹ë¥Œ ì ê³µíê³ ì ê·Œì± ì§ì¹šì 충족íëì§ íìžíìžì.
- ì² ì í í ì€íž: ì¬ì©ì ì ì ìì±ìŽ ììëë¡ ìëíëì§ íìžíêž° ìíŽ ë€ìí ëžëŒì°ì ì êž°êž°ìì ìœë륌 í ì€ížíìžì.
ì€ì ìì ë° ì¬ì© ì¬ë¡
1. 컎í¬ëíž ì€íìŒë§
ì¬ì©ì ì ì ìì± ë±ë¡ì ì¬ì¬ì© ê°ë¥í 컎í¬ëížì ì€íìŒë§ì í¬ê² ê°ì í ì ììµëë€. --component-background, --component-text-color ë° --component-border-radiusì ê°ì ìì±ì ë±ë¡í멎 ëŽë¶ CSS륌 ìì íì§ ìê³ ë 컎í¬ëížì 몚ìì ìœê² ì¬ì©ì ì ìí ì ììµëë€.
/* Component Definition */
@property --component-background {
syntax: <color>;
inherits: false;
initial-value: #f0f0f0;
}
@property --component-text-color {
syntax: <color>;
inherits: false;
initial-value: #333333;
}
.my-component {
background-color: var(--component-background);
color: var(--component-text-color);
border-radius: 5px;
}
/* Usage */
.my-component {
--component-background: #ffffff; /* Override background color */
--component-text-color: #007bff; /* Override text color */
}
2. JavaScript륌 ìŽì©í ëì ì€íìŒë§
JavaScript륌 ì¬ì©íì¬ ì¬ì©ì ì ì ìì±ì ëì ìŒë¡ ì ë°ìŽížíì¬ ëíí ì€íìŒë§ íšê³Œë¥Œ ë§ë€ ì ììµëë€. ì륌 ë€ìŽ, ì¬ì©ì ì ë ¥ ëë APIì ë°ìŽí°ì ë°ëŒ ììì ììì ë³ê²œí ì ììµëë€.
// JavaScript
const element = document.getElementById('myElement');
element.style.setProperty('--dynamic-color', 'red');
// CSS
@property --dynamic-color {
syntax: <color>;
inherits: false;
initial-value: #000000;
}
#myElement {
background-color: var(--dynamic-color);
}
3. êµì í(i18n) ë° ì§ìí(l10n)
êžë¡ë²íë ìžììì ë€ìí ìžìŽì ì§ìì ìì©íë ê²ì ë§€ì° ì€ìí©ëë€. CSS ì¬ì©ì ì ì ìì±ì í¹í ìì± ë±ë¡ê³Œ ê²°í©ë ë ì¬ì©ìì ë¡ìŒìŒì ë°ëŒ ì¹ì¬ìŽíž ì€íìŒë§ì ì¡°ì íë ë° ëììŽ ë ì ììµëë€. ìŽë ë€ìí ì€í¬ëŠœížì 묞ì ìžížì ë§ê² êžêŒŽ í¬êž°ë ê°ê²©ì ì¡°ì íë ë° í¹í ì ì©í©ëë€.
/* English (Default) */
@property --base-font-size {
syntax: <length>;
inherits: true;
initial-value: 16px;
}
body {
font-size: var(--base-font-size);
}
/* French */
[lang="fr"] {
--base-font-size: 18px; /* Slightly larger for better readability */
}
/* Chinese */
[lang="zh"] {
--base-font-size: 14px; /* Adjust for Chinese characters */
}
ìžìŽë³ ì íꞰ륌 ì¬ì©íê³ --base-font-size ì¬ì©ì ì ì ìì±ì ì¬ì ìíšìŒë¡ìš, íµì¬ CSS 구조륌 ìì íì§ ìê³ ë ë€ë¥ž ìžìŽì êžêŒŽ í¬êž°ë¥Œ ìœê² ì¡°ì í ì ììµëë€. ìŽ ì ê·Œ ë°©ìì ì ì§ë³Žìì±ì í¥ììí€ê³ ì ìžê³ ì¬ì©ììê² ëì± ë§ì¶€íë ì¬ì©ì 겜íì 볎ì¥í©ëë€.
4. ì¬ì©ì ì ížëì ë°ë¥ž í ë§ ì í
ë§ì íë ì¹ì¬ìŽížì ì í늬ìŒìŽì ì ì¬ì©ììê² ë°ì í ë§ì ìŽëìŽ í ë§ ì¬ìŽë¥Œ ì íí ì ìë êž°ë¥ì ì ê³µí©ëë€. ì ì í 구묞곌 ìŽêž° ê°ìŒë¡ ë±ë¡ë CSS ì¬ì©ì ì ì ìì±ì ìŽ íë¡ìžì€ë¥Œ ê°ëšíê³ íšìšì ìŒë¡ ë§ëëë€.
/* Define custom properties for colors */
@property --background-color {
syntax: <color>;
inherits: false;
initial-value: #ffffff; /* Light mode default */
}
@property --text-color {
syntax: <color>;
inherits: false;
initial-value: #000000; /* Light mode default */
}
body {
background-color: var(--background-color);
color: var(--text-color);
}
/* Dark mode theme */
.dark-mode {
--background-color: #222222; /* Dark background */
--text-color: #ffffff; /* Light text */
}
/* JavaScript to toggle themes */
const body = document.body;
const themeToggle = document.getElementById('themeToggle');
themeToggle.addEventListener('click', () => {
body.classList.toggle('dark-mode');
});
ìŒë°ì ìž íšì ë° íŒíë ë°©ë²
- ìì± ë±ë¡ ëëœ: íì ê²ì¬ ë° ì íšì± ê²ì¬ì ìŽì ì íì©íë €ë©Ž íì ì¬ì©ì ì ì ìì±ì ë±ë¡íìžì.
- ì못ë 구묞 ê° ì¬ì©: ììëë ë°ìŽí° íì ì ì ííê² ëíëŽë 구묞 ê°ì ì ííìžì.
- ìŽêž° ê° ë¯žì ê³µ: ê° ì¬ì©ì ì ì ìì±ì í©ëЬì ìž êž°ë³ž ê°ì ì ê³µíìžì.
- ì¬ì©ì ì ì 구묞 곌ëí ì¬ì©: ì¬ì©ì ì ì 구묞ì ìœë륌 ë ë³µì¡íê² ë§ë€ ì ììŒë¯ë¡ íìí 겜ì°ìë§ ì¬ì©íìžì.
- ëžëŒì°ì ížíì± ë¬Žì: íë¡ëì í겜ìì CSS ì¬ì©ì ì ì ìì± ë±ë¡ì ì졎íêž° ì ì ëžëŒì°ì ížíì±ì íìžíìžì.
ê²°ë¡
CSS ì¬ì©ì ì ì ìì± ë±ë¡ì CSS ì¬ì©ì ì ì ìì±ì êž°ë¥ì í¥ììí€ë ê°ë ¥í êž°ë¥ì
ëë€. ì¬ì©ì ì ì ìì±ì íì
, 구묞, ìŽêž° ê° ë° ìì ëìì ëª
ìì ìŒë¡ ì ìíšìŒë¡ìš, ë ê²¬ê³ íê³ ì ì§ë³Žì ê°ë¥íë©° ììž¡ ê°ë¥í ì€íìŒ ìížë¥Œ ë§ë€ ì ììµëë€. ìŽ êž°ë¥ì íì©íì¬ ìœë íì§ì ê°ì íê³ , í
ë§ ìí¬íë¡ì°ë¥Œ ê°ìííë©°, ì¹ ê°ë°ì ìë¡ìŽ ê°ë¥ì±ì ìŽìŽë³Žìžì. ëžëŒì°ì ì§ììŽ ê³ì ìŠê°íšì ë°ëŒ CSS ì¬ì©ì ì ì ìì± ë±ë¡ì ì ìžê³ íë°ížìë ê°ë°ììê² ì ì ë íìì ìž ëêµ¬ê° ë ê²ì
ëë€. ê·žë¬ë ì€ë @property륌 ì€ííê³ CSS ì¬ì©ì ì ì ìì±ì 몚ë ì ì¬ë ¥ì ë°ííŽ ë³Žìžì!