πŸ“Web Developing/CSS 기초

V. κ³ κΈ‰μ„ νƒμž - 1. μ—°κ²° μ„ νƒμž

Hush 2022. 6. 6. 13:04

λ‘˜ μ΄μƒμ˜ μ„ νƒμžλ₯Ό μ—°κ²°ν•΄μ„œ μŠ€νƒ€μΌμ΄ 적용될 μš”μ†Œκ°€ μ–΄λŠ 뢀뢄인지λ₯Ό μ§€μ •ν•œλ‹€.

μ„ νƒμžλ₯Ό λ‘˜ 이상 μ‘°ν•©ν•˜λ―€λ‘œ 'μ‘°ν•© μ„ νƒμž' 라고도 ν•˜κ³  'μ½€λΉ„λ„€μ΄μ…˜ μ„ νƒμž' 라고도 λΆ€λ₯Έλ‹€.

 

ν•˜μœ„ μ„ νƒμžμ™€ μžμ‹ μ„ νƒμž : ν•˜μœ„ μš”μ†Œμ— μŠ€νƒ€μΌμ„ 적용

νŠΉμ • μš”μ†Œλ₯Ό 기쀀을 κ·Έ μ•ˆμ— ν¬ν•¨λœ μš”μ†Œλ₯Ό ν•˜μœ„ μš”μ†ŒλΌκ³  ν•œλ‹€.

그리고 ν˜„μž¬ μš”μ†Œλ₯Ό κΈ°μ€€μœΌλ‘œ λ°”λ‘œ ν•œ 단계 μ•„λž˜ μš”μ†ŒλŠ” μžμ‹ μš”μ†ŒλΌκ³  ν•˜λ©°,

κ·Έ μžμ‹ μš”μ†Œμ˜ ν•œ 단계 μ•„λž˜λŠ” μ†μž μš”μ†ŒλΌκ³  ν•œλ‹€.

 

-ν•˜μœ„ μ„ νƒμž

ν•˜μœ„ μ„ νƒμžλ₯Ό μ‚¬μš©ν•˜λ©΄ ν•΄λ‹Ή λΆ€λͺ¨ μš”μ†Œμ— ν¬ν•¨λœ ν•΄λ‹Ή ν•˜μœ„ μš”μ†Œλ₯Ό λͺ¨λ‘ μ„ νƒν•˜λ©° μžμ† μ„ νƒμžλΌκ³ λ„ ν•œλ‹€. 

ν•˜μœ„ μ„ νƒμžλŠ” μƒμœ„ μš”μ†Œμ™€ ν•˜μœ„ μš”μ†Œλ₯Ό 곡백으둜 κ΅¬λΆ„ν•œλ‹€.

μƒμœ„μš”μ†Œ ν•˜μœ„μš”μ†Œ

λ¨Όμ € ν•˜μœ„ μ„ νƒμžλ₯Ό μ‚¬μš©ν•˜λŠ” 방법을 μ•Œμ•„λ³΄μž.

λ‹€μŒκ³Ό 같이 section μš”μ†Œ μ•ˆμ— ν¬ν•¨λœ p μš”μ†Œλ₯Ό λͺ¨λ‘ μ„ νƒν•˜λ €λ©΄ section κ³Ό p 사이에 곡백 ν•œ 칸을 두고 λ‚˜λž€νžˆ 써주자.

그리고 μ€‘κ΄„ν˜Έ μ•ˆμ— μŠ€νƒ€μΌ κ·œμΉ™μ„ 써주자.

λ‹€μŒ μ˜ˆμ œλŠ” section μš”μ†Œ μ•ˆμ˜ p μš”μ†Œλ₯Ό λͺ¨λ‘ νŒŒλž€ κΈ€μ”¨λ‘œ μ§€μ •ν•˜λŠ” μ˜ˆμ œμ΄λ‹€.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
        <style>
        section p{
            color: blue;
        }
        </style>
    </head>
    <body>
        <p>section λ°”κΉ₯의 p</p>
        <section>
            <p>section μ•ˆμ˜ p</p>
            <div>
                <p>section μ•ˆμ˜ div μ•ˆμ˜ p</p>
            </div>
        </section>
    </body>
</html>

 

-μžμ‹ μ„ νƒμž

ν•˜μœ„ μ„ νƒμžμ™€ λ‹€λ₯΄κ²Œ μžμ‹ μš”μ†Œμ—λ§Œ μŠ€νƒ€μΌμ„ μ μš©ν•˜λŠ” μ„ νƒμžλ‘œ, λ‹€μŒκ³Ό 같이 두 μš”μ†Œ 사이에 '>' 기호λ₯Ό ν‘œμ‹œν•΄ λΆ€λͺ¨μ™€ μžμ‹ μš”μ†Œλ₯Ό κ΅¬λΆ„ν•œλ‹€.

λΆ€λͺ¨μš”μ†Œ > μžμ‹μš”μ†Œ
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
        <style>
        section > p{
            color: blue;
        }
        </style>
    </head>
    <body>
        <p>section λ°”κΉ₯의 p</p>
        <section>
            <p>section μ•ˆμ˜ p</p>
            <div>
                <p>section μ•ˆμ˜ div μ•ˆμ˜ p</p>
            </div>
        </section>
    </body>
</html>

 

인접 ν˜•μ œ μ„ νƒμžμ™€ ν˜•μ œ μ„ νƒμž : ν˜•μ œ μš”μ†Œμ— μŠ€νƒ€μΌμ„ 적용

μ›Ή λ¬Έμ„œμ—μ„œ λΆ€λͺ¨ μš”μ†Œκ°€ 같을 경우 ν˜•μ œ 관계라고 ν•˜κ³ ,

ν˜•μ œ 관계인 μš”μ†Œμ—μ„œ λ¨Όμ € λ‚˜μ˜€λŠ” μš”μ†Œλ₯Ό ν˜• μš”μ†Œ, λ‚˜μ€‘μ— λ‚˜μ˜€λŠ” μš”μ†Œλ₯Ό 동생 μš”μ†ŒλΌκ³  ν•œλ‹€.

 

-인접 ν˜•μ œ μ„ νƒμž

ν˜•μ œ μš”μ†Œ μ€‘μ—μ„œ 첫 번째 동생 μš”μ†Œλ§Œ μ„ νƒν•˜λŠ” 것을 인접 ν˜•μ œ μ„ νƒμžλΌκ³  ν•œλ‹€.

인접 ν˜•μ œ μ„ νƒμžλ₯Ό μ •μ˜ν•  λ•ŒλŠ” λ‹€μŒ κΈ°λ³Έν˜•κ³Ό 같이 μš”μ†Œ1κ³Ό μš”μ†Œ2 사이에 '+' 기호λ₯Ό ν‘œμ‹œν•œλ‹€.

μš”μ†Œ1κ³Ό μš”μ†Œ2λŠ” 같은 λ ˆλ²¨μ΄λ©΄μ„œ μš”μ†Œ 1 이후 κ°€μž₯ λ¨Όμ € μ˜€λŠ” μš”μ†Œ 2λ₯Ό μ„ νƒν•œλ‹€.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
        <style>
        div + p {
            color: blue;
        }
        </style>
    </head>
    <body>
        <p>section λ°”κΉ₯의 p</p>
        <section>
            <p>section μ•ˆμ˜ p-1</p>
            <div>
                <p>section μ•ˆμ˜ div μ•ˆμ˜ p</p>
            </div>
            <p>section μ•ˆμ˜ p-2</p>
            <p>section μ•ˆμ˜ p-3</p>
        </section>
    </body>
</html>

 

-ν˜•μ œ μ„ νƒμž

ν˜•μ œ μ„ νƒμžλŠ” ν˜•μ œ μš”μ†Œμ˜ μŠ€νƒ€μΌμ„ μ •μ˜ν•˜λŠ”λ°, 인접 ν˜•μ œ μ„ νƒμžμ™€ 달리, 이후에 μ˜€λŠ” λͺ¨λ“  ν˜•μ œ μš”μ†Œμ— μ μš©λœλ‹€.

ν˜•μ œ μ„ νƒμžλ₯Ό μ •μ˜ν•  λ•ŒλŠ” 첫 번째 μš”μ†Œμ™€ 두 번째 μš”μ†Œ 사이에 '~' 기호λ₯Ό ν‘œμ‹œν•œλ‹€.

μš”μ†Œ1κ³Ό ν˜•μ œμΈ μš”μ†Œ2λ₯Ό λͺ¨λ‘ μ„ νƒν•˜λŠ” 것이닀.

μš”μ†Œ1 ~ μš”μ†Œ2
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
        <style>
        div ~ p {
            color: blue;
        }
        </style>
    </head>
    <body>
        <p>section λ°”κΉ₯의 p</p>
        <section>
            <p>section μ•ˆμ˜ p-1</p>
            <div>
                <p>section μ•ˆμ˜ div μ•ˆμ˜ p</p>
            </div>
            <p>section μ•ˆμ˜ p-2</p>
            <p>section μ•ˆμ˜ p-3</p>
        </section>
    </body>
</html>

 

 

μ €μž‘μžν‘œμ‹œ (μƒˆμ°½μ—΄λ¦Ό)