๐™ฟ๐š›๐š˜๐š๐š›๐šŠ๐š–๐š–๐š’๐š—๐š ๐™ป๐šŠ๐š—๐š๐šž๐šŠ๐š๐šŽ/๐™ฒ๐š‚๐š‚

[CSS] flex-shrink๋ฅผ ์ด์šฉํ•œ ๋ชจ๋‹ฌ ๋ฒ„ํŠผ ํฌ๊ธฐ ์œ ์ง€ ๋ฐ ์Šคํฌ๋กค ๋ฌธ์ œ ํ•ด๊ฒฐ

ํ•ด๋ฒ„๋‹ˆ 2024. 11. 13. 08:50
๋ฐ˜์‘ํ˜•

 

์›น ํŽ˜์ด์ง€์—์„œ ๋ชจ๋‹ฌ ์ฐฝ์„ ๋งŒ๋“ค ๋•Œ, ๊ธด ๋‚ด์šฉ์ด ๋“ค์–ด๊ฐ€๊ฑฐ๋‚˜ ํ™”๋ฉด ํฌ๊ธฐ์— ๋”ฐ๋ผ ์ฝ˜ํ…์ธ ๊ฐ€ ์ž๋™์œผ๋กœ ์Šคํฌ๋กค๋˜๋„๋ก max-height์™€ overflow-y: auto ์†์„ฑ์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ๋‹ค.

ํ•˜์ง€๋งŒ ์ด๋ ‡๊ฒŒ ์„ค์ •ํ•˜๋ฉด ๋ชจ๋‹ฌ ์ฐฝ ๋‚ด๋ถ€์˜ ์š”์†Œ๋“ค์ด ์˜๋„์น˜ ์•Š๊ฒŒ ํฌ๊ธฐ๊ฐ€ ์ค„์–ด๋“œ๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋‹ค.

์ด ๊ธ€์—์„œ๋Š” ์ด๋Ÿฐ ํ˜„์ƒ์„ ํ•ด๊ฒฐํ•˜๋Š” ๋ฐฉ๋ฒ•๊ณผ CSS flex-shrink ์†์„ฑ์„ ์‚ฌ์šฉํ•ด ๋ฒ„ํŠผ ํฌ๊ธฐ๋ฅผ ์•ˆ์ •์ ์œผ๋กœ ์œ ์ง€ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์†Œ๊ฐœํ•˜๋ ค๊ณ  ํ•œ๋‹ค!

 

 

 

 

๋ชจ๋‹ฌ ์ฐฝ์„ ๋””์ž์ธํ•˜๋ฉด์„œ ์•„๋ž˜์™€ ๊ฐ™์€ ์Šคํƒ€์ผ์„ ์ ์šฉํ–ˆ๋‹ค:

 

.modal {
    display: none;
    position: fixed;
    z-index: 1001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background-color: #fefefe;
    padding: 20px;
    border: 1px solid #888;
    max-width: 450px;
    max-height: 700px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
}

 

 

 

<div class="modal" style="display: block;">
    <div class="modal-content">
        <p>๋ชจ๋‹ฌ์— ๋Œ€ํ•œ ๋‚ด์šฉ</p>
        <button class="confirm-btn primary-bg white-color">ํ™•์ธ</button>
    </div>
</div>

 

 

 

์—ฌ๊ธฐ์„œ max-height์™€ overflow-y: auto๋ฅผ ์‚ฌ์šฉํ•ด ๋ชจ๋‹ฌ ์ฐฝ์˜ ๊ธธ์ด๊ฐ€ ์ตœ๋Œ€์น˜๋ฅผ ๋„˜์œผ๋ฉด ์Šคํฌ๋กค์ด ์ƒ๊ธฐ๋„๋ก ํ–ˆ๋‹ค.

 

๊ทผโ—๋Ÿฐโ—๋ฐโ—

์ด ์„ค์ •๊ณผ ํ•จ๊ป˜ display: flex ์†์„ฑ์„ ์‚ฌ์šฉํ•˜๋‹ˆ ๋‚ด๋ถ€ ๋ฒ„ํŠผ์˜ ํฌ๊ธฐ๊ฐ€ ์˜๋„์น˜ ์•Š๊ฒŒ ์ค„์–ด๋“ค์—ˆ๋‹ค.

 

 

 

flex-shrink๋ž€?

์ฐพ์•„๋ณด๋‹ˆ๊นŒ  flex-shrink ์†์„ฑ์˜ ๊ธฐ๋ณธ๊ฐ’์ด 1๋กœ ์„ค์ •๋˜์–ด ์žˆ์–ด, ์ด ๊ฐ’์ด ์ ์šฉ๋œ ์š”์†Œ๋Š” ๊ณต๊ฐ„์ด ๋ถ€์กฑํ•  ๋•Œ ํฌ๊ธฐ๊ฐ€ ์ค„์–ด๋“œ๋Š” ํŠน์„ฑ์ด ์žˆ์—ˆ๋‹ค.

์ด๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด, .confirm-btn ํด๋ž˜์Šค์— flex-shrink: 0; ์†์„ฑ์„ ์ถ”๊ฐ€ํ•ด ๋ฒ„ํŠผ์ด ์ค„์–ด๋“ค์ง€ ์•Š๋„๋ก ์„ค์ •ํ–ˆ๋‹ค

 

 

flex-shrink: 0; ์š”์†Œ์˜ ํฌ๊ธฐ๊ฐ€ ์ ˆ๋Œ€ ์ค„์–ด๋“ค์ง€ ์•Š์Œ

flex-shrink: 1; ๋ถ€๋ชจ ์š”์†Œ์˜ ๊ณต๊ฐ„์ด ๋ถ€์กฑํ•  ๋•Œ ๋น„์œจ์— ๋งž๊ฒŒ ํฌ๊ธฐ๊ฐ€ ์ค„์–ด๋“ฆ

flex-shrink: n; 1๋ณด๋‹ค ํฌ๊ธฐ๊ฐ€ ๋” ์ค„์–ด๋“ฆ

 

 

.confirm-btn {
    width: 100px;
    height: 36px;
    padding: 0px;
    margin: 15px;
    border: 1px solid #999999;
    cursor: pointer;
    font-size: 14px;
    flex-shrink: 0; /* ํฌ๊ธฐ ์ค„์–ด๋“ค์ง€ ์•Š๋„๋ก ์„ค์ • */
}

 

 

 

 

์ด๋ ‡๊ฒŒ ์„ค์ •ํ•œ ๊ฒฐ๊ณผ, ๋ชจ๋‹ฌ ์ฐฝ์˜ ๋‚ด๋ถ€ ์Šคํฌ๋กค๊ณผ ์ƒ๊ด€์—†์ด ๋ฒ„ํŠผ์˜ ํฌ๊ธฐ๊ฐ€ ์˜๋„ํ•œ ๋Œ€๋กœ ์œ ์ง€๋˜์—ˆ๋‹ค.

 

 

 

๋ฐ˜์‘ํ˜•