์ผ๋จ ํ๋ก์ ํธ๋ฅผ ์งํํ๊ธฐ ์ ๊น์ง๋ ์คํ๋ฅดํ์ฝ๋ฉํด๋ฝ์ ๊ฐ์๋ฅผ ๋ฃ๊ณ ๋ณต์ตํ๊ณ ๋ฅผ ๋ฐ๋ณตํ๋ฉฐ ํ๋ก ํธ๋ถํฐ ๋ฐฑ์๋๊น์ง๋ฅผ ์ฅ ํ์ด๋ณด๋ ๋๋์ด์๋๋ฐ, ์ด๋ฒ ํ๋ก์ ํธ๋ฅผ ์งํํ๋ฉด์ ๊ฐ์๋ฅผ ๋ฃ๋ ๊ฒ๋ง์ผ๋ก๋ ๋ถ์กฑํ๋ค๋ ๊ฒ์ ๋๊ผ๋ค. ๊ฐ์์์๋ ์ ์ฒด๋ฅผ ๋ค ๋ค๋ค์ฃผ๋๊ฒ์ด ์๋๊ธฐ ๋๋ฌธ์ ์ค์ ๋ก ๋ด๊ฐ ์ง์ ๋ง๋ค๋ฉด์ ๊ตฌํํ ๋๋ ๋ฌด์ํ ๋ง์ ์ด๋ ค์์ ๋ฅ์น๊ฒ ๋๊ณ , ๊ทธ ์ด๋ ค์์ ์ค์ค๋ก ๊ตฌ๊ธ๋งํ๋ฉฐ ํค์ณ๋๊ฐ๋ ๋๊ธฐ๊ฐ ํ์ํ๋ค๊ณ ์๊ฐํ๋ค.
์์๋ฅผ ์ด๋ ์ชฝ์ ๋ฐฐ์นํ ๊ฒ์ธ๊ฐ๋ฅผ ์ค์ ์ฆ '๋์์' ์ํ๋ ๊ณณ์ ๋ฐฐ์นํ๋ ๊ฒ
์ข์ธก์ ํ์์ ์ธ์ฟ๋ง(class=person)์ ์ ๋ ฌ/ ์ฐ์ธก์ ๋ฐฉ๋ช ๋ก๊ณผ ๋ค๋ฅธ ํ์์ ์นด๋๋ฅผ ๋ฐฐ์นํ๊ธฐ ์ํด float ์์ฑ์ ์๋์ ๊ฐ์ด ์ฌ์ฉ
.person {
float: left;
width: 700px;
height: 1000px;
margin-right: 150px;
margin-left: 150px;
box-shadow: 1px 1px 3px 1px darkgoldenrod;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
float๋ฅผ ์ด์ฉํด ์ผ์ชฝ์ ๋ฐฐ์นํ์๋ค. ์ด๋ ๊ฒ ํ๋๊น ๋ฌธ์ ์ ์ ๋ชจ๋ฐ์ผ์ฒ๋ฆฌ๊ธฐ๋ฅ๋ ํฌ๊ธฐ์กฐ์ ์ด ๋ง์๋๋ก ๋์ง์์ ์ ๋ฅผ ๋จน์๋ค. ์ด๊ฒ ์๋ง display๊ฐ ๋ฌด์๋๊ธฐ ๋๋ฌธ์ธ๊ฒ๊ฐ์๋ฐ, ์ ๋ ฌ๋ฐฉ๋ฒ์ float๊ฐ ์๋ ๋ค๋ฅธ ์ ๋ ฌ๋ฐฉ๋ฒ์ ์ ์ฉํด๋ด์ผํ ๊ฒ๊ฐ๋ค.
ํ๋ก์ ํธ๋ฅผ ๋ง๋ค๋ ์ฃผ์ด์ง ์๊ฐ๋๋ฌธ์ float๊ธฐ๋ฅ์ ๊น๊ฒ ๊ณต๋ถํ์ง๋ ๋ชปํ๋ค. float๊ธฐ๋ฅ์ ์ด๋ค ๋์ ์ด์ฉํ๋ฉด ์ข์์ง ์ฐพ์๋ณด๊ณ ์ด๋ค ๊ธฐ๋ฅ๊ณผ ํจ๊ป ์ ์ฉ์ํค๋ฉด ์ข ๋ ์ ํ์ฉํ ์ ์๋์ง ๋ค์ ํ๋ฒ ๊ณต๋ถํด๋ณผ ๊ฒ์ด๋ค.
[ Keep ]
[ Problem ]
(๋ฌธ์ )
(์์ธ)
[ Try ]
๐ ์์ธํ ์ฝ๋๋ Moonmoo ์ ๊ฒ์ํ์ต๋๋ค