ํน์ ์์์ ์ฝํ ์ธ ๊ฐ ๋์ณ ํ๋ฅผ ๋ ์ด๋ป๊ฒ ์ฒ๋ฆฌํ ์ง์ ๊ดํ ์์ฑ
์๋ฅผ ๋ค์ด div์ ๋ํดํธ ๋์ด๋ auto, ์ฆ ์์ ์ฝํ ์ธ ๋งํผ์ ๋์ด๋ฅผ ์ฐจ์งํ๋ค. ํ์ง๋ง div์ ๋์ด๋ฅผ ํน๋ณํ ์ง์ ํ๋ ๊ฒฝ์ฐ ์์์ ๊ธธ์ด ํน์ ํฌ๊ธฐ๊ฐ ๋ถ๋ชจ์ธ div๋ฅผ ์ด๊ณผํ ์ ์๋ค๋ ๋ฌธ์ ์ ์ด ์๊ธด๋ค. ํ ์คํธ, ์ด๋ฏธ์ง ๋ชจ๋ ํด๋น๋ ์ ์๋ค.
์์ ๊ฐ์ด ์ง์ ๋ div ํฌ๊ธฐ๋ฅผ text๊ฐ ๋์ด์ ๊ฒฝ์ฐ, div์์ ๋์ณ ํ๋ฅด๊ฒ ๋๋ค.
hidden ๊ฐ์ ๋ฃ์ด์ฃผ๋ฉด ๋์น๋ ๋ถ๋ถ์ ์จ๊ฒจ์ค๋ค. ํ์ง๋ง ์๋ฆฐ ๋ถ๋ถ์ ๋ณผ ์ ์๋ค๋ ๋จ์ ์ด ์๊ธด๋ค.
์ด ์์ฑ์ ๋จ์ ๋์์ธ ์ธ์ ์ธ์ ์ธ๊น ์ถ์๋๋ฐ โ ์น ํ์ค์ฑ์ ์งํค๊ธฐ ์ํด ์ฌ์ดํธ ๋ด์์ ๊ต์ฅํ ๋ง์ด ์ฐ์ธ๋ค๋ ๊ฒ์ ์๊ฒ ๋์๋ค. IR๊ธฐ๋ฒ๊ณผ ์น ํ์ค์ฑ์ ๊ดํ ๋ด์ฉ์ ๋ฐ๋ก ํฌ์คํ
ํ ์์ ์ด๋ค.
์๋ฅผ ๋ค์ด, ๋ค์ด๋ฒ ๋ฉ์ธ์ ๊ฐ์ ๊ฐ๋ฐ์ ๋๊ตฌ๋ฅผ ์ด์ด๋ณด๋ฉด blind class๋ช
์ ๊ฐ์ง ์ฌ๋ฌ ํ๊ทธ๋ค์ ๋ณผ ์ ์๋ค. ์ด ํ๊ทธ๋ค์๋ ๋ชจ๋ overflow:hidden ์์ฑ์ด ์ ์ฉ๋์ด ์๋ค. ์ด๋ IR๊ธฐ๋ฒ(Image Replacement: ์ด๋ฏธ์ง๋ฅผ ๋ณผ ์ ์๋ ์ฌ์ฉ์์๊ฒ ๋์ฒด ํ
์คํธ๋ฅผ ์ ๊ณตํ๋ ๊ฒ)์ ํ ์์๋ก, ์คํฌ๋ฆฐ ๋ฆฌ๋๋ ์ฝ์ ์ ์์ง๋ง ํ๋ฉด์์๋ ๋ณด์ด์ง ์๊ฒ ์ฒ๋ฆฌํ๊ธฐ ์ํจ์ด๋ค. ์๋ฅผ ๋ค์ด, ๋ค์ด๋ฒ์์๋ ๋ค์ด๋ฒ ๋ฉ์ธ ๋ก๊ณ ๊ฐ ์๋ ๊ณณ์ '๋ค์ด๋ฒ'๋ผ๋ ํ
์คํธ๋ฅผ ๊ฐ์ง๊ณ ์๋ span๊ณผ ๊ฒ์์ด๋ฅผ ์
๋ ฅํ ์ ์๋ input์ฐฝ์ '๊ฒ์'์ด๋ผ๋ ํ
์คํธ๋ฅผ ๊ฐ์ง๊ณ ์๋ legend ํ๊ทธ๊ฐ ์กด์ฌํ๋ค. ๋จ, overflow:hidden ์์ฑ์ด ์ ์ฉ๋๊ณ ์์ด ์ฌ์ฉ์ ๋์๋ ๋ณด์ด์ง ์๋ ๊ฒ์ด๋ค.
์ฐธ๊ณ ๋ก, ๋ค์์์๋ .screen_out์ด๋ผ๋ ํด๋์ค๋ช ์ผ๋ก overflow ์์ฑ์ ์ฒ๋ฆฌํ๊ณ ์๋ค. ๋ค์ด๋ฒ, ๋ค์ ๊ฐ๊ฐ ๋ฉ์ธ ์น ํ์ด์ง์์๋ง ์ฝ 90๊ฐ, 180๊ฐ์ ํด๋น ํ๊ทธ๋ฅผ ์ฌ์ฉํจ์ผ๋ก์จ ์ ๊ทผ์ฑ์ ํ๋ณดํจ๊ณผ ๋์์ ์จ๊น ์ฝํ ์ธ ๋ฅผ ์ ๊ณตํ๊ณ ์๋ ๋ชจ์ต์ด๋ค.
display: none ์์ฑ์ ์ฝํ
์ธ ์์ฒด๋ฅผ ๋ณด์ด์ง ์๊ฒ ํ๋ฉฐ, ๊ณต๊ฐ์ ์ฐจ์ง ํ์ง ์๊ธฐ์ ๊ทธ ์์๊ฐ ์๋๋ถํฐ ์์๋ ๊ฒ๊ณผ ๊ฐ์ ๊ฒฐ๊ณผ๋ฅผ ์ป๊ฒ ๋๋ค. ์์ ์์๋ผ๋ฉด lorem ๋ฌธ๋จ๊ณผ orange ๋ฐฐ๊ฒฝ ๋ชจ๋ ๋ณด์ด์ง ์๋๋ค.
์คํฌ๋ฆฐ ๋ฆฌ๋๋ ์ด ์์ฑ์ ์ ์ฉํ ์์๋ฅผ ์ฝ์ ์ ์๊ธฐ ๋๋ฌธ์ ์น ์ ๊ทผ์ฑ ์ธก๋ฉด์์ display:none์ ์ฌ์ฉํ์ง ์๋ ๊ฒ์ด ์ข๋ค. ํ์ง๋ง ์ด ์์ฑ์ด ๋์๋ค๋ ์๋ฏธ๋ ์๋๋ค. ์ค์ ๋ก ๋๋กญ๋ค์ด ๋ฉ๋ด์ ๊ฐ์ด ์ ์ ๊ฐ ํด๋ฆญํ๊ธฐ ์ ๊น์ง ๋ณด์ด์ง ์๋ ํญ๋ชฉ์์ ์ฐ์ด๊ธฐ๋ ํ๊ณ , ๋ฐ์ํ ์ฑ/์น์ ์ํด ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํ ๋ ํ๋ฉด์ ํฌ๊ธฐ์ ๋ฐ๋ผ ํน์ ์์๋ฅผ ๋ณด์ด์ง ์๊ฒ ํ๊ธฐ ์ํด display:none์ ์ฌ์ฉํ๊ธฐ๋ ํ๋ค.
์ด ์์ฑ๋ ์ฝํ ์ธ ๋ฅผ ๋ณด์ฌ์ฃผ์ง ์๋๋ค๋ ์ ์์ display:none๊ณผ ๊ฐ์ผ๋, ์์ด์ง ์ฝํ ์ธ ๋งํผ์ ๊ณต๊ฐ์ ์ฌ์ ํ ๊ฐ์ง๊ณ ์๋ค๋ ์ ์์ ์ฐจ์ด๊ฐ ์๋ค. ์ด ์์ฑ ๋ํ display: none๊ณผ ๋ง์ฐฌ๊ฐ์ง๋ก ์คํฌ๋ฆฐ ๋ฆฌ๋๊ฐ ์ฝ์ ์ ์๋ค.
๐ฝ display:none / visibility:hidden ์์
hidden์ ๋ฌธ์ ์ ์ ํด๊ฒฐํ๊ธฐ ์ํ ๋ฐฉ์์ผ๋ก scroll์ด ์๋ค. ๋ง ๊ทธ๋๋ก ์๋ฆฐ ๋ด์ฉ์ ๋ณด์ฌ์ฃผ๊ธฐ ์ํด ์คํฌ๋กค์ ์ ๊ณตํ๋ค. ํ์ง๋ง ์ธ๋ก ์คํฌ๋กค๊ณผ ์ฐ๊ณ ์์ง ์์ ๊ฐ๋ก ์คํฌ๋กค์ ๋ชจ๋ ๋ณด์ฌ์ค์ ๋์์ธ์ด ์์์ง ์๋ค๋ ๋จ์ ์ด ๋ ์๊ฒผ๋ค... ์ด๋ด ๋๋ overflow-x์ overflow-y ์์ฑ์ ๋ฐ๋ก ์ง์ ํด์ค ์ ์๋ค.
overflow: [overflow-x] [overflow-y]
์๋ฅผ ๋ค์ด, ์์ ์์์์ ์ฐ์ง ์๋ ๊ฐ๋ก ์คํฌ๋กค์ ์์ ์ฃผ๊ธฐ ์ํด x์ถ์ hidden์ ์ง์ ํด์ฃผ๊ณ y์ถ์๋ง scroll ์์ฑ์ ๋ฃ์ด์ค ์ ์๋ค.
overflow ์์ฑ์ ๋จ์ํ ์๊ฐ์ , ๋์์ธ์ ์ธ ์ธก๋ฉด์์ ์ ์ฉํ ๊ฒ์ด๋ผ๊ณ ์๊ฐํ๋ ๋ด ์์ผ๊ฐ ์ข์๋ ๊ฒ ๊ฐ๋ค. ์ค๋ ๊ณผ์ ๋ฅผ ํตํด ์น ์ ๊ทผ์ฑ์ ํฅ์์ํค๊ธฐ ์ํด overflow : hidden ์์ฑ์ด ์๊ฐ๋ณด๋ค ๊ต์ฅํ ๋ง์ด ์ฐ์ด๊ณ ์ค์๋๊ฐ ๋๋ค๋ ๊ฒ์ ์ค์ ํฌํธ ์ฌ์ดํธ๋ฅผ ํตํด ์๊ฒ ๋์๋ค.
์์ผ๋ก ๋ชจ๋์๊ฒ ๋๋ฑํ ์ ๋ณด๋ฅผ ์ ๊ณตํ๊ธฐ ์ํด ์น ํ์ค ๊ฐ์ด๋๋ผ์ธ์ ์ฒ ์ ํ ์ค์ํด์ผ ํ๋ค๋ ์ฑ ์๊ฐ์ ๋ค์ ํ๋ฒ ๋๋ผ๊ฒ ๋์๊ณ (์ ์ง๋ณด์ ๋ฐ ์๋ฒ ๋ถํ์๋ ๋์์ด ๋๋ค๊ณ ํ๋ค) overflow ์ธ์ ๋ค๋ฅธ ๋ฐฉ๋ฒ๋ค์ ๋ํด ๋ ๊ณต๋ถํด๋ณด๊ณ ์ถ๋ค.