์ด๋ฏธ์งยท์์ ์ข ํก๋น ๊ณ์ฐ๊ธฐ ์ฌ์ฉ๋ฒ
๊ฐ๋กยท์ธ๋ก ํฝ์ ์ ์ ๋ ฅํ๋ฉด ์ข ํก๋น(Aspect Ratio)๋ฅผ ๊ณ์ฐํ๊ณ , ๊ฐ์ฅ ๊ฐ๊น์ด ํ์ค ๋น์จ(16:9, 4:3, 1:1 ๋ฑ)๊ณผ ๋น๊ตํฉ๋๋ค. ์ ๊ฐ๋ก ๋๋ ์ธ๋ก ๊ฐ์ ์ ๋ ฅํ๋ฉด ์๋ณธ ๋น์จ์ ์ ์งํ ํฌ๊ธฐ๋ฅผ ์๋์ผ๋ก ๊ณ์ฐํฉ๋๋ค.
16:9๋ ์ ํ๋ธยทํ HDยท4K ๋ฑ ์์ด๋์คํฌ๋ฆฐ, 4:3๋ ๊ณผ๊ฑฐ TVยทํ๋ ์ ํ ์ด์ ํ์ค, 1:1์ ์ธ์คํ๊ทธ๋จ ํผ๋ ์ ์ฌ๊ฐํ, 9:16๋ ๋ฆด์คยท์ผ์ธ ยทํฑํก ์ธ๋ก ์์, 21:9๋ ์๋ค๋ง์ค์ฝํ ์ด์์ด๋ ๊ท๊ฒฉ์ ๋๋ค.
์ด๋ฏธ์ง ๋ฆฌ์ฌ์ด์ง ์ ๋น์จ์ ์ ์งํด์ผ ์๊ณก ์๋ ๊ฒฐ๊ณผ๋ฌผ์ ์ป์ ์ ์์ต๋๋ค. Photoshop์์๋ '๋น์จ ์ ์ง(Constrain Proportions)' ์ต์ , CSS์์๋ aspect-ratio ์์ฑ์ผ๋ก ๋น์จ์ ๊ณ ์ ํ ์ ์์ต๋๋ค.
์์ฃผ ๋ฌป๋ ์ง๋ฌธ
16:9๋ ์ ํ๋ธยทTV ๋ฑ ํ์ค ์์ด๋์คํฌ๋ฆฐ, 16:10์ ๋งฅ๋ถ ๋ฑ ์ผ๋ถ ๋ ธํธ๋ถ ํ๋ฉด ๋น์จ์ ๋๋ค. ์์ ์ ์์ 16:9๊ฐ ํ์ค์ ๋๋ค.
์ด ๋๊ตฌ์ '์ ๊ฐ๋ก๋ก ๋ณํ' ๋๋ '์ ์ธ๋ก๋ก ๋ณํ' ๊ธฐ๋ฅ์ ํ์ฉํ๊ฑฐ๋, Photoshop์์ '๋น์จ ์ ์ง' ์ต์ ์ ์ฒดํฌํ๋ฉด ๋ฉ๋๋ค.
aspect-ratio: 16/9; ์ ๊ฐ์ด CSS aspect-ratio ์์ฑ์ ์ฌ์ฉํ๋ฉด ์์์ ๋น์จ์ ์๋์ผ๋ก ์ ์งํ ์ ์์ต๋๋ค.