Notice
Recent Posts
Recent Comments
Link
Β«   2025/07   Β»
일 μ›” ν™” 수 λͺ© 금 ν† 
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

POTATO THAT WANT TO BE HUMAN

[CSS] ν˜•μ œ μ„ νƒμž + , ~ μ‚¬μš©λ²• λ³Έλ¬Έ

FRONTEND/CSS

[CSS] ν˜•μ œ μ„ νƒμž + , ~ μ‚¬μš©λ²•

λ…œνž 2022. 5. 12. 17:45
λ°˜μ‘ν˜•

πŸ€” 인접 ν˜•μ œ μ„ νƒμž +

 

μΈμ ‘ν˜•μ œμ„ νƒμžλŠ” λ°”λ‘œ 뒀에 μžˆλŠ” μš”μ†Œ 단 ν•œ 개λ₯Ό μ„ νƒν•©λ‹ˆλ‹€.

 

A + B {
    ···
}

A와 Bκ°€ 같은 계측에 μžˆμ„ λ•Œ (ν˜•μ œμš”μ†ŒμΌλ•Œ) A λ°”λ‘œ 뒀에 μžˆλŠ” Bλ₯Ό μ„ νƒμžλ‘œ μ§€μ •ν•©λ‹ˆλ‹€.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ν˜•μ œμ„ νƒμž</title>
    <style>
        h1 + p {
            background-color: rgb(208, 112, 184);
            color: #fff;
        }
    </style>
</head>
<body>
    <h1>μƒ‰μƒν‘œ</h1>
    <p>RED</p>
    <p>YELLOW</p>
    <p>GREEN</p>
    <p>BLUE</p>
    <p>BLACK</p>
</body>
</html>

μœ„ 예제의 결과둜 h1 νƒœκ·Έ λ°”λ‘œ 뒀에 μžˆλŠ” p νƒœκ·Έ ν•œ κ°œκ°€ μ„ νƒλœ 것을 확인할 수 μžˆμŠ΅λ‹ˆλ‹€.

 

 

 

πŸ€” 일반 ν˜•μ œ μ„ νƒμž ~

 

μΌλ°˜ν˜•μ œμ„ νƒμžλŠ” 뒀에 μžˆλŠ” λͺ¨λ“  같은 μš”μ†Œλ₯Ό λ™μ‹œμ— μ„ νƒν•©λ‹ˆλ‹€.

 

A ~ B {
    ···
}

A와 Bκ°€ 같은 계측에 μžˆμ„ λ•Œ (ν˜•μ œμš”μ†ŒμΌλ•Œ) A 뒀에 μžˆλŠ” λͺ¨λ“  Bλ₯Ό μ„ νƒμžλ‘œ μ§€μ •ν•©λ‹ˆλ‹€.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ν˜•μ œμ„ νƒμž</title>
    <style>
        h1 ~ p {
            background-color: rgb(208, 112, 184);
            color: #fff;
        }
    </style>
</head>
<body>
    <h1>μƒ‰μƒν‘œ</h1>
    <p>RED</p>
    <p>YELLOW</p>
    <p>GREEN</p>
    <p>BLUE</p>
    <p>BLACK</p>
</body>
</html>

μœ„ 예제의 결과둜 h1 νƒœκ·Έ 뒀에 μžˆλŠ” λͺ¨λ“  p νƒœκ·Έκ°€ μ„ νƒλœ 것을 확인할 수 μžˆμŠ΅λ‹ˆλ‹€.

 

λ°˜μ‘ν˜•

'FRONTEND > CSS' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€

[CSS] Grid에 λŒ€ν•˜μ—¬  (0) 2022.05.28
[CSS] CSS의 λ‹¨μœ„ (%, em, rem, vw, vh, vmin, vmax)  (0) 2022.05.12
[CSS] box-sizing - ν…Œλ‘λ¦¬ μ˜μ—­μ˜ 크기λ₯Ό κ²°μ •ν•˜λŠ” 속성  (0) 2022.05.10
[CSS] floatλ₯Ό μ·¨μ†Œν•˜κΈ° μœ„ν•œ clearfix μ΄μš©ν•˜κΈ°  (0) 2022.05.08
[CSS] :nth-child()와 :nth-of-type()  (0) 2022.05.05
'FRONTEND/CSS' Related Articles more
Comments