πŸ’»Coding/πŸ“’ CSS

CSS _μ„ νƒμž_ν΄λž˜μŠ€μ„ νƒμž

μŒμ€μ‘ 2021. 8. 27. 07:12
728x90
λ°˜μ‘ν˜•

CSS _μ„ νƒμž_ν΄λž˜μŠ€μ„ νƒμž

CSS의 문법 ν˜•μ‹μ€ μ„ νƒμž, 속성, μ†μ„±κ°’μœΌλ‘œ 이루어져 μžˆμŠ΅λ‹ˆλ‹€.

[ CSS - 문법 ]

<style>
    μ„ νƒμž { 속성1: 속성값; 속성2: 속성값; }
</style>

 

κ·Έλž˜μ„œ CSSμ—μ„œλŠ” μŠ€νƒ€μΌμ„ μ μš©ν•  λŒ€μƒμ„ μ„ νƒν•˜κΈ° μœ„ν•΄μ„œ μ„ νƒμžλ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€.


β–Ά ν΄λž˜μŠ€(class) μ„ νƒμž
γ„΄ 같은 클래슀 이름을 μ—¬λŸ¬ μš”μ†Œκ°€ κ°€μ§ˆ 수 있음.
γ„΄ νƒœκ·Έ μ„ μ–Έμ‹œ :class= "box1"
γ„΄ CSS μ„ νƒμ‹œ :.box1{ 속성 : 속성값; }

 

<p>νƒœκ·Έμ— selector λΌλŠ” 클래슀 이름을 μ£Όκ³  <style>~</style>둜 κΈ€μž 색깔을 λ³€κ²½ν•΄λ³Όκ»˜μš”~!

[ html - css μž‘μ„± μ½”λ“œ ]

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css class μ„ νƒμž</title>
    <style>
        .selector { color: red;}
    </style>
</head>
<body>
    <p class="selector">CSS 클래슀 μ„ νƒμž</p>
</body>
</html>

 

[ μ‹€ν–‰ ν™”λ©΄μ˜ λ³€ν™” ] 

↑css style 적용 μ „ ν™”λ©΄

 

↑css style 적용 ν™”λ©΄

728x90
λ°˜μ‘ν˜•