퍼센트 너비

퍼센트는 특정 엘리먼트를 담고 있는 블록에 상대적인 측정 단위입니다. 퍼센트는 이미지에 쓰기에 아주 좋습니다. 다음은 항상 컨테이너 너비의 50%만 차지하는 이미지를 만드는 예제입니다. 페이지 크기를 줄이면 어떻게 되는지 확인해 보세요! 

article img {
  float: right;
  width: 50%;
}
<article class="clearfix"> an image

이미지의 크기를 제한하는 데 min-width와 max-width를 사용할 수도 있습니다.

</article>

퍼센트 너비 레이아웃

레이아웃을 잡는 데 퍼센트를 쓸 수도 있지만 이렇게 하면 작업량이 많아질 수 있습니다. 이 예제에서는 창의 너비가 너무 좁을 경우 nav 콘텐츠가 지저분하게 표시되기 시작합니다. 결국 콘텐츠에 알맞는 방식을 선택할 필요가 있습니다. 

nav {
  float: left;
  width: 25%;
}
section {
  margin-left: 25%;
}
<div class="container">
<section>

이 레이아웃이 너무 좁을 경우 nav의 레이아웃이 깨집니다. 더 안 좋은 점은 이 문제를 해결하기 위해 min-width를 사용할 수도 없다는 점입니다. 오른쪽 칼럼이 그것을 받아들이지 않기 때문입니다.

</section>
<section>

나랏말ᄊᆞ미 中듀ᇰ國귁에 달아 文문字ᄍᆞᆼ와로 서르 ᄉᆞᄆᆞᆺ디 아니ᄒᆞᆯᄊᆡ 이런 젼ᄎᆞ로 어린百ᄇᆡᆨ姓셔ᇰ이 니르고져 호ᇙ 배 이셔도 ᄆᆞᄎᆞᆷ내 제 ᄠᅳ들 시러 펴디 몯ᄒᆞᇙ 노미 하니라 내 이ᄅᆞᆯ 爲윙ᄒᆞ야 어엿비 너겨 새로 스믈여듧 字ᄍᆞᆼᄅᆞᆯ ᄆᆡᇰᄀᆞ노니 사ᄅᆞᆷ마다 ᄒᆡᅇᅧ 수ᄫᅵ 니겨 날로 ᄡᅮ메 便뼌安ᅙᅡᆫ킈 ᄒᆞ고져 ᄒᆞᇙ ᄯᆞᄅᆞ미니라ㄱ·ᄂᆞᆫ:엄쏘·리·니君군ㄷ字·ᄍᆞᆼ·처ᅀᅥᆷ·펴·아·나ᄂᆞᆫ소·리·ᄀᆞᄐᆞ·니ᄀᆞᆯ·ᄫᅡ·쓰·면虯뀨ᇢㅸ字·ᄍᆞᆼ·처ᅀᅥᆷ·펴·아·나ᄂᆞᆫ소·리·ᄀᆞ·ᄐᆞ니·라ㅋ·ᄂᆞᆫ:엄쏘·리·니快·쾡ㆆ字·ᄍᆞᆼ·처ᅀᅥᆷ·펴·아·나ᄂᆞᆫ소·리·ᄀᆞ·ᄐᆞ니·라ㆁ·ᄂᆞᆫ:엄쏘·리·니業·ᅌᅥᆸ字·ᄍᆞᆼ·처ᅀᅥᆷ·펴·아·나ᄂᆞᆫ소·리·ᄀᆞ·ᄐᆞ니·라ㄷ·ᄂᆞᆫ·혀쏘·리·니斗두ᇢㅸ字·ᄍᆞᆼ·처ᅀᅥᆷ·펴·아·나ᄂᆞᆫ소·리·ᄀᆞ·ᄐᆞ니ᄀᆞᆯ·ᄫᅡ·쓰·면覃땀ㅂ字·ᄍᆞᆼ·처ᅀᅥᆷ·펴·아·나ᄂᆞᆫ소·리·ᄀᆞ·ᄐᆞ니·라

</section>
  • Creative Commons License