λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°
🌌 | WEB DEV/HTML CSS

CSS ν¬μ§€μ…˜ (3)_μ›ν•˜λŠ” μœ„μΉ˜μ— λ”± λ°°μΉ˜ν•˜κΈ°!

by KASSID 2022. 1. 6.

λͺ©μ°¨

    728x90

    μ €λ²ˆμ— λ‹€λ€˜λ˜ 것에 μ΄μ–΄μ„œ ν¬μ§€μ…˜μ— λŒ€ν•΄μ„œ 더 μ•Œμ•„λ³΄μ•˜λ‹€.

     

    κ°„λ‹¨ν•˜κ²Œ λ³΅μŠ΅ν•˜λ©΄

     

    HTMLμš”μ†Œμ˜ μ’Œν‘œ 기쀀은 항상 μ™Όμͺ½ μƒλ‹¨μ˜ 꼭지점이 기쀀이닀.

    κ·Έλž˜μ„œ top, bottom, left, right에 값을 λ„£μ–΄ μ£Όλ©΄

    κ·Έ 기쀀이 ν•΄λ‹Ή 값에 λ°°μΉ˜κ°€ λœλ‹€.

    (top: 50%, left: 50% - μ™Όμͺ½ 상단 꼭지점이 κ·Έ μ’Œν‘œμ— 배치)

     

    ν¬μ§€μ…˜μ„ 정해쀄 λ•Œ 값을 px λ“±μ˜ μ ˆλŒ€μ μΈ κ°’κ³Ό %λ“±μ˜ μƒλŒ€μ μΈ 값을 λ„£μ–΄ 쀄 수 μžˆλŠ”λ°

    μ΄λŠ” μ—­μ‹œ μž…λ§›μ— λ§žμΆ°μ„œ λ„£μ–΄μ£Όλ©΄ λœλ‹€.

     

     

    예λ₯Ό λ“€μ–΄μ„œ 'λ‚˜λŠ” 이것을 λΆ€λͺ¨μš”μ†Œμ˜ μ • κ°€μš΄λ°μ— 항상 μœ„μΉ˜μ‹œν‚€κ² μ–΄!'

    λΌλŠ” μ˜λ„λ‘œ 값을 λ„£λŠ”λ‹€λ©΄, λΆ€λͺ¨μš”μ†Œμ˜ 크기에 λ”°λΌμ„œ ν•΄λ‹Ή μš”μ†Œκ°€ λ°”λ€Œλ©΄ μ•ˆλœλ‹€.

     

    μ΄λŸ¬ν•œ 경우 % 와 같은 μƒλŒ€μ μΈ 값을 μ‚¬μš©ν•˜λ©΄ μ–΄λ–€ 상황에도

    μ˜λ„ν•œ μœ„μΉ˜μ— 배치λ₯Ό ν•  수 μžˆμ„ 것이닀!

     

     

    μ˜ˆμ‹œ

    μ €λ²ˆμ— λ‹€λ£¨μ—ˆλ˜ 'μ •κ°€μš΄λ° 배치'에 μ΄μ–΄μ„œ

    λΆ€λͺ¨μš”μ†Œμ˜ λ°”κΉ₯뢀뢄에 λ”± λ§žμΆ°μ„œ λ°°μΉ˜ν•˜λŠ” 것을 ν•΄λ³΄μ•˜λ‹€.

    <div class="parent">
        <div class="child"></div>
    </div>

     

    .parent {
        position: relative;
        width: 500px;
        height: 500px;
        border: 1px solid #000;
    }
    .child {
        position: absolute;
        background-color: steelblue;
        width: 100px;
        height: 100px;
    	left: 0;
        top:100%
    }

    μš”μ†Œλ₯Ό λΆ€λͺ¨μš”μ†Œμ˜ μ™Όμͺ½ ν•˜λ‹¨ 뢀뢄에 λ”± λ§žμΆ°μ„œ 배치λ₯Ό ν•˜κΈ° μœ„ν•΄μ„œ

    top: 100%λ₯Ό λ„£μ–΄μ£Όμ—ˆλ‹€.

    즉, λΆ€λͺ¨μš”μ†Œμ˜ 높이값을 항상 λ„£μ–΄μ£ΌλŠ” 것이닀.

     

    λ”°λΌμ„œ λΆ€λͺ¨μš”μ†Œμ˜ heightκ°€ λ°”λ€Œμ–΄λ„ μ™Όμͺ½ ν•˜λ‹¨μ— λΆ™μ–΄μžˆκ²Œ ν•  수 μžˆλ‹€.

    λΆ€λͺ¨μš”μ†Œμ˜ heightλ₯Ό 쀄인 λͺ¨μŠ΅

     

    μ•„λž˜μ™€ 같이 λ‹€μ–‘ν•˜κ²Œ λ°°μΉ˜ν•  수 μžˆλ‹€.

    top: 0 left: 100%
    top: 100% left: 100%

     

    λŒ“κΈ€