[CSS] overflow ์†์„ฑ

Mooongsยท2022๋…„ 4์›” 7์ผ
0

ํ”„๋ก ํŠธ์—”ํŠธ์Šค์ฟจ

๋ชฉ๋ก ๋ณด๊ธฐ
10/28
post-thumbnail
post-custom-banner

๐Ÿ”Žoverflow(์˜ค๋ฒ„ํ”Œ๋กœ์šฐ)๋ž€?

ํŠน์ • ์š”์†Œ์˜ ์ฝ˜ํ…์ธ ๊ฐ€ ๋„˜์ณ ํ๋ฅผ ๋•Œ ์–ด๋–ป๊ฒŒ ์ฒ˜๋ฆฌํ• ์ง€์— ๊ด€ํ•œ ์†์„ฑ

์˜ˆ๋ฅผ ๋“ค์–ด div์˜ ๋””ํดํŠธ ๋†’์ด๋Š” auto, ์ฆ‰ ์ž์‹ ์ฝ˜ํ…์ธ ๋งŒํผ์˜ ๋†’์ด๋ฅผ ์ฐจ์ง€ํ•œ๋‹ค. ํ•˜์ง€๋งŒ div์˜ ๋†’์ด๋ฅผ ํŠน๋ณ„ํžˆ ์ง€์ •ํ•˜๋Š” ๊ฒฝ์šฐ ์ž์‹์˜ ๊ธธ์ด ํ˜น์€ ํฌ๊ธฐ๊ฐ€ ๋ถ€๋ชจ์ธ div๋ฅผ ์ดˆ๊ณผํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๋ฌธ์ œ์ ์ด ์ƒ๊ธด๋‹ค. ํ…์ŠคํŠธ, ์ด๋ฏธ์ง€ ๋ชจ๋‘ ํ•ด๋‹น๋  ์ˆ˜ ์žˆ๋‹ค.

1. overflow: visible (๊ธฐ๋ณธ๊ฐ’)


์œ„์™€ ๊ฐ™์ด ์ง€์ •๋œ div ํฌ๊ธฐ๋ฅผ text๊ฐ€ ๋„˜์–ด์„  ๊ฒฝ์šฐ, div์—์„œ ๋„˜์ณ ํ๋ฅด๊ฒŒ ๋œ๋‹ค.

2. overflow: hidden


hidden ๊ฐ’์„ ๋„ฃ์–ด์ฃผ๋ฉด ๋„˜์น˜๋Š” ๋ถ€๋ถ„์„ ์ˆจ๊ฒจ์ค€๋‹ค. ํ•˜์ง€๋งŒ ์ž˜๋ฆฐ ๋ถ€๋ถ„์€ ๋ณผ ์ˆ˜ ์—†๋‹ค๋Š” ๋‹จ์ ์ด ์ƒ๊ธด๋‹ค.
์ด ์†์„ฑ์„ ๋‹จ์ˆœ ๋””์ž์ธ ์™ธ์— ์–ธ์ œ ์“ธ๊นŒ ์‹ถ์—ˆ๋Š”๋ฐ โš ์›น ํ‘œ์ค€์„ฑ์„ ์ง€ํ‚ค๊ธฐ ์œ„ํ•ด ์‚ฌ์ดํŠธ ๋‚ด์—์„œ ๊ต‰์žฅํžˆ ๋งŽ์ด ์“ฐ์ธ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ฒŒ ๋˜์—ˆ๋‹ค. IR๊ธฐ๋ฒ•๊ณผ ์›น ํ‘œ์ค€์„ฑ์— ๊ด€ํ•œ ๋‚ด์šฉ์€ ๋”ฐ๋กœ ํฌ์ŠคํŒ… ํ•  ์˜ˆ์ •์ด๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด, ๋„ค์ด๋ฒ„ ๋ฉ”์ธ์— ๊ฐ€์„œ ๊ฐœ๋ฐœ์ž ๋„๊ตฌ๋ฅผ ์—ด์–ด๋ณด๋ฉด blind class๋ช…์„ ๊ฐ€์ง„ ์—ฌ๋Ÿฌ ํƒœ๊ทธ๋“ค์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค. ์ด ํƒœ๊ทธ๋“ค์—๋Š” ๋ชจ๋‘ overflow:hidden ์†์„ฑ์ด ์ ์šฉ๋˜์–ด ์žˆ๋‹ค. ์ด๋Š” IR๊ธฐ๋ฒ•(Image Replacement: ์ด๋ฏธ์ง€๋ฅผ ๋ณผ ์ˆ˜ ์—†๋Š” ์‚ฌ์šฉ์ž์—๊ฒŒ ๋Œ€์ฒด ํ…์ŠคํŠธ๋ฅผ ์ œ๊ณตํ•˜๋Š” ๊ฒƒ)์˜ ํ•œ ์˜ˆ์‹œ๋กœ, ์Šคํฌ๋ฆฐ ๋ฆฌ๋”๋Š” ์ฝ์„ ์ˆ˜ ์žˆ์ง€๋งŒ ํ™”๋ฉด์—์„œ๋Š” ๋ณด์ด์ง€ ์•Š๊ฒŒ ์ฒ˜๋ฆฌํ•˜๊ธฐ ์œ„ํ•จ์ด๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ๋„ค์ด๋ฒ„์—์„œ๋Š” ๋„ค์ด๋ฒ„ ๋ฉ”์ธ ๋กœ๊ณ ๊ฐ€ ์žˆ๋Š” ๊ณณ์— '๋„ค์ด๋ฒ„'๋ผ๋Š” ํ…์ŠคํŠธ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” span๊ณผ ๊ฒ€์ƒ‰์–ด๋ฅผ ์ž…๋ ฅํ•  ์ˆ˜ ์žˆ๋Š” input์ฐฝ์— '๊ฒ€์ƒ‰'์ด๋ผ๋Š” ํ…์ŠคํŠธ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” legend ํƒœ๊ทธ๊ฐ€ ์กด์žฌํ•œ๋‹ค. ๋‹จ, overflow:hidden ์†์„ฑ์ด ์ ์šฉ๋˜๊ณ  ์žˆ์–ด ์‚ฌ์šฉ์ž ๋ˆˆ์—๋Š” ๋ณด์ด์ง€ ์•Š๋Š” ๊ฒƒ์ด๋‹ค.

์ฐธ๊ณ ๋กœ, ๋‹ค์Œ์—์„œ๋Š” .screen_out์ด๋ผ๋Š” ํด๋ž˜์Šค๋ช…์œผ๋กœ overflow ์†์„ฑ์„ ์ฒ˜๋ฆฌํ•˜๊ณ  ์žˆ๋‹ค. ๋„ค์ด๋ฒ„, ๋‹ค์Œ ๊ฐ๊ฐ ๋ฉ”์ธ ์›น ํŽ˜์ด์ง€์—์„œ๋งŒ ์•ฝ 90๊ฐœ, 180๊ฐœ์˜ ํ•ด๋‹น ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•จ์œผ๋กœ์จ ์ ‘๊ทผ์„ฑ์„ ํ™•๋ณดํ•จ๊ณผ ๋™์‹œ์— ์ˆจ๊น€ ์ฝ˜ํ…์ธ ๋ฅผ ์ œ๊ณตํ•˜๊ณ  ์žˆ๋Š” ๋ชจ์Šต์ด๋‹ค.

โ“ display:none๊ณผ์˜ ์ฐจ์ด์ 

display: none ์†์„ฑ์€ ์ฝ˜ํ…์ธ  ์ž์ฒด๋ฅผ ๋ณด์ด์ง€ ์•Š๊ฒŒ ํ•˜๋ฉฐ, ๊ณต๊ฐ„์„ ์ฐจ์ง€ ํ•˜์ง€ ์•Š๊ธฐ์— ๊ทธ ์š”์†Œ๊ฐ€ ์›๋ž˜๋ถ€ํ„ฐ ์—†์—ˆ๋˜ ๊ฒƒ๊ณผ ๊ฐ™์€ ๊ฒฐ๊ณผ๋ฅผ ์–ป๊ฒŒ ๋œ๋‹ค. ์œ„์˜ ์˜ˆ์‹œ๋ผ๋ฉด lorem ๋ฌธ๋‹จ๊ณผ orange ๋ฐฐ๊ฒฝ ๋ชจ๋‘ ๋ณด์ด์ง€ ์•Š๋Š”๋‹ค.
์Šคํฌ๋ฆฐ ๋ฆฌ๋”๋Š” ์ด ์†์„ฑ์„ ์ ์šฉํ•œ ์š”์†Œ๋ฅผ ์ฝ์„ ์ˆ˜ ์—†๊ธฐ ๋•Œ๋ฌธ์— ์›น ์ ‘๊ทผ์„ฑ ์ธก๋ฉด์—์„œ display:none์€ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์ด ์ข‹๋‹ค. ํ•˜์ง€๋งŒ ์ด ์†์„ฑ์ด ๋‚˜์˜๋‹ค๋Š” ์˜๋ฏธ๋Š” ์•„๋‹ˆ๋‹ค. ์‹ค์ œ๋กœ ๋“œ๋กญ๋‹ค์šด ๋ฉ”๋‰ด์™€ ๊ฐ™์ด ์œ ์ €๊ฐ€ ํด๋ฆญํ•˜๊ธฐ ์ „๊นŒ์ง„ ๋ณด์ด์ง€ ์•Š๋Š” ํ•ญ๋ชฉ์—์„œ ์“ฐ์ด๊ธฐ๋„ ํ•˜๊ณ , ๋ฐ˜์‘ํ˜• ์•ฑ/์›น์„ ์œ„ํ•ด ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ํ™”๋ฉด์˜ ํฌ๊ธฐ์— ๋”ฐ๋ผ ํŠน์ • ์š”์†Œ๋ฅผ ๋ณด์ด์ง€ ์•Š๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•ด display:none์„ ์‚ฌ์šฉํ•˜๊ธฐ๋„ ํ•œ๋‹ค.

โ“ visibility:hidden์€ ๋˜ ๋ญ์ฃ ?

์ด ์†์„ฑ๋„ ์ฝ˜ํ…์ธ ๋ฅผ ๋ณด์—ฌ์ฃผ์ง€ ์•Š๋Š”๋‹ค๋Š” ์ ์—์„œ display:none๊ณผ ๊ฐ™์œผ๋‚˜, ์—†์–ด์ง„ ์ฝ˜ํ…์ธ  ๋งŒํผ์˜ ๊ณต๊ฐ„์€ ์—ฌ์ „ํžˆ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค๋Š” ์ ์—์„œ ์ฐจ์ด๊ฐ€ ์žˆ๋‹ค. ์ด ์†์„ฑ ๋˜ํ•œ display: none๊ณผ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์Šคํฌ๋ฆฐ ๋ฆฌ๋”๊ฐ€ ์ฝ์„ ์ˆ˜ ์—†๋‹ค.

๐Ÿ”ฝ display:none / visibility:hidden ์˜ˆ์‹œ

3. overflow: scroll


hidden์˜ ๋ฌธ์ œ์ ์„ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•œ ๋ฐฉ์•ˆ์œผ๋กœ scroll์ด ์žˆ๋‹ค. ๋ง ๊ทธ๋Œ€๋กœ ์ž˜๋ฆฐ ๋‚ด์šฉ์„ ๋ณด์—ฌ์ฃผ๊ธฐ ์œ„ํ•ด ์Šคํฌ๋กค์„ ์ œ๊ณตํ•œ๋‹ค. ํ•˜์ง€๋งŒ ์„ธ๋กœ ์Šคํฌ๋กค๊ณผ ์“ฐ๊ณ  ์žˆ์ง€ ์•Š์€ ๊ฐ€๋กœ ์Šคํฌ๋กค์„ ๋ชจ๋‘ ๋ณด์—ฌ์ค˜์„œ ๋””์ž์ธ์ด ์˜ˆ์˜์ง€ ์•Š๋‹ค๋Š” ๋‹จ์ ์ด ๋˜ ์ƒ๊ฒผ๋‹ค... ์ด๋Ÿด ๋•Œ๋Š” overflow-x์™€ overflow-y ์†์„ฑ์„ ๋”ฐ๋กœ ์ง€์ •ํ•ด์ค„ ์ˆ˜ ์žˆ๋‹ค.

overflow: [overflow-x] [overflow-y]

์˜ˆ๋ฅผ ๋“ค์–ด, ์œ„์˜ ์˜ˆ์‹œ์—์„œ ์“ฐ์ง€ ์•Š๋Š” ๊ฐ€๋กœ ์Šคํฌ๋กค์„ ์—†์• ์ฃผ๊ธฐ ์œ„ํ•ด x์ถ•์€ hidden์„ ์ง€์ •ํ•ด์ฃผ๊ณ  y์ถ•์—๋งŒ scroll ์†์„ฑ์„ ๋„ฃ์–ด์ค„ ์ˆ˜ ์žˆ๋‹ค.


๐Ÿ’ฌ ๊นจ๋‹ฌ์€ ์ 

overflow ์†์„ฑ์€ ๋‹จ์ˆœํžˆ ์‹œ๊ฐ์ , ๋””์ž์ธ์ ์ธ ์ธก๋ฉด์—์„œ ์œ ์šฉํ•  ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ–ˆ๋˜ ๋‚ด ์‹œ์•ผ๊ฐ€ ์ข์•˜๋˜ ๊ฒƒ ๊ฐ™๋‹ค. ์˜ค๋Š˜ ๊ณผ์ œ๋ฅผ ํ†ตํ•ด ์›น ์ ‘๊ทผ์„ฑ์„ ํ–ฅ์ƒ์‹œํ‚ค๊ธฐ ์œ„ํ•ด overflow : hidden ์†์„ฑ์ด ์ƒ๊ฐ๋ณด๋‹ค ๊ต‰์žฅํžˆ ๋งŽ์ด ์“ฐ์ด๊ณ  ์ค‘์š”๋„๊ฐ€ ๋†’๋‹ค๋Š” ๊ฒƒ์„ ์‹ค์ œ ํฌํ„ธ ์‚ฌ์ดํŠธ๋ฅผ ํ†ตํ•ด ์•Œ๊ฒŒ ๋˜์—ˆ๋‹ค.

์•ž์œผ๋กœ ๋ชจ๋‘์—๊ฒŒ ๋™๋“ฑํ•œ ์ •๋ณด๋ฅผ ์ œ๊ณตํ•˜๊ธฐ ์œ„ํ•ด ์›น ํ‘œ์ค€ ๊ฐ€์ด๋“œ๋ผ์ธ์„ ์ฒ ์ €ํžˆ ์ค€์ˆ˜ํ•ด์•ผ ํ•œ๋‹ค๋Š” ์ฑ…์ž„๊ฐ์„ ๋‹ค์‹œ ํ•œ๋ฒˆ ๋Š๋ผ๊ฒŒ ๋˜์—ˆ๊ณ (์œ ์ง€๋ณด์ˆ˜ ๋ฐ ์„œ๋ฒ„ ๋ถ€ํ•˜์—๋„ ๋„์›€์ด ๋œ๋‹ค๊ณ  ํ•œ๋‹ค) overflow ์™ธ์— ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•๋“ค์— ๋Œ€ํ•ด ๋” ๊ณต๋ถ€ํ•ด๋ณด๊ณ  ์‹ถ๋‹ค.

profile
#FE๊ฐœ๋ฐœ์ž๐Ÿฃ #์ƒˆ๋กœ์šด๊ฑด #์งœ๋ฆฟํ•ด
post-custom-banner

0๊ฐœ์˜ ๋Œ“๊ธ€