프론트엔드개발자 html/css 크기가 다른 사진 box-sizing 이용하여 배치하는 방법

html/css 크기가 다른 사진 일정하게 배치하는 방법

안녕하세요

아이언스카이입니다

홈페이지 등을 만들 때 크기가 모두 다른 사진들을

한 공간에 배치해야 하는 경우가 있는데요

사진크기가 다른 경우 html/css 를 이용하여

일정한 크기와 간격으로 배치하는 방법을 알아 보겠습니다

위 사진처럼 음식주제로 사진들을 배치해 본다고 가정할게요

위 사진들은 구글 이미지에서 가져온 이미지들이구요

모두 크기가 다릅니다

아래 두 개의 사진이 원본 크기인데요

딸기파이와 핫케익의 크기가 많이 차이나지 않나요?

하지만 최종적으로 만든 화면을 보시면

사진크기의 차이를 모르실 거예요

똑같은 공간에 똑같은 크기로 들어가 있거든요

실제 크기가 다른 사진들을

css 코드들을 이용하여

똑같은 크기로 넣은 모습입니다

파란색 네모친 부분이 위에서 보여드렸던

딸기파이와 핫케익인데요

그렇다면 어떻게 이렇게 배치할 수 있는지 살펴볼까요?

우선 이 그림을 보자마자

가로로 <div> 를 만드는 게 아니구나를 아셔야 합니다

연두색 동그라미 부분을 보시면

사진의 높낮이가 달라요

그렇기 때문에 세로로 div 를 사용해야 하는데요

만약 가로로 div를 만들게 되면 어떻게 될까요?

첫째줄에 햄버거 사진의 높이가 가장 긴데

두 번째 줄의 사진들이 공간이 있어도

햄버거 사진때문에 방해받아서 공간을 채우지 못한답니다

그래서 햄버거사진 아랫부분에

나란히 배치되어 빈 공간이 보이게 된답니다

그렇다면 먼저 html 에 가서 이 부분의 코드를 작성해 봐야겠죠?

01. html 코드 작성

코드는 이렇게 작성됩니다

큰 div 태그를 만들어 전체를 감싸 주었고

 그 안에서 div를 이용하여 다시 네 등분으로 나누어 주었습니다

<section> 태그는 웹표준화를 위해

이 부분에는 본문 내용이 있습니다를 알리기 위한 것이며,

크롬이 아닌 IE에서는 버전에 따라 적용되지 않을 수 있습니다

* html code *

<div class="images wrapper">

<div>

          <img src="images/1.jpg" >

          <img src="images/2.jpg" >

          <img src="images/3.jpg">

     </div>

     <div>

          <img src="images/5.jpg" >

          <img src="images/6.jpg">

          <img src="images/7.png" >

          <img src="images/4.jpg" >

     </div>

     <div>

          <img src="images/8.jpg">

          <img src="images/9.jpg" >

          <img src="images/10.jpg" >

     </div>

     <div>

          <img src="images/11.jpg" >

          <img src="images/12.jpg">

          <img src="images/13.jpg">   

     </div>

</div>

02. css div와 이미지에 width 설정하기

css 에 아무 설정도 하지 않고

html 코드만 작성했을 때의 모습입니다

div 자체가 block 이기 때문에 한 줄에 한 이미지만 배치되고

이미지 크기가 전혀 조정되지 않을 것을 보실 수 있습니다

이제 여기에 css 에 가서 div와 img 에

width 를 넣어 보겠습니다

.images div{width: 25%;}

.images img{ width: 100%;}

큰 div 의 클래스이름을 images 라고 하신 건

위 html 코드에서 확인하시면 됩니다

그리고 큰 div 안에 있는 작은 div 의 가로크기를

25%로 잡아 주었구요

그 안에 들어갈 이미지 크기를 div 안에 꽉 차게끔

100%로 잡아 주었습니다

이때 이미지 가로길이를 100%로 잡으려면

이미지를 둘러싼 div 에도 넓이가 설정되어야 한다는 거 잊지 마세요~!

이렇게만 하면 div 자체가 block 이기 때문에

이미지가 크기는 똑같아지지만

한 줄에 하나씩 배치되어 아래로 쭉 나열됩니다

이제 div 에 float:left 를 설정하여

네 개의 div 박스를 왼쪽부터 옆으로 나란히 배치하시면 됩니다

03. css div 에 float : left 설정하기

.images div{width: 25%; float: left;}

.images img{ width: 100%;}

하나의 이미지들은 각 div 상자 안에 꽉 차 있는 상태고

div 상자는 넓이에서 각각 25% 씩을 차지하고 있는 모습입니다

float 를 사용함으로써 각 div 태그를 왼쪽으로

나열할 수 있답니다

하지만 완성된 사진은 사진 위아래, 양옆으로 공간이 있었는데

여기까지만 하면 전혀 여백이 없는 채 붙어있죠?

padding 을 이용해서 여백을 주도록 하겠습니다

04. css img 에 padding 설정하기

.images div{width: 25%; float: left;}

.images img{ width: 100%;  padding: 10px 10px; }

padding 은 전체 공간 안에서

설정한 만큼 안의 컨텐츠가 움직이는 것인데요

padding 10px 10px 이라고 한 것은

위아래로 10px, 좌우로 10px 떨어지라는

일종의 줄임말입니다

하지만 padding 만 설정하면

맨 오른쪽 상자에서는

상자의 왼쪽 끝에서부터 그림이 10px 씩 떨어지면서

결국 화면밖을 그림이 나가게 됩니다

즉,

가로 25% 로 정확히 나눠놨는데

갑자기 10px 이 더 필요한 상황이 된 것입니다

때문에 공간이 모자라서

네 번째 부분의 그림들이 왼쪽에 붙어버린 것입니다

따라서 이 부분은 box-sizing 기능을 통해 수정해 줍니다

그전에!

padding 을 div 태그에 주느냐, img 에 주느냐에 따라

결과가 달라지는데요

위 사진은 padding 을 div 태그에 직접 준 결과입니다

보시면 좌우는 10px 이 잘 떨어져 있지만

위아래는 붙어있는 게 보이시죠?

div 자체는 이미지 자체가 아니라

네 개의 큰 네모인데 여기에 위아래 10px 씩 떨어지라고 했으니

홈페이지 전체로 보면

모든 그림의 맨 위와 맨 아래쪽은 10px 여백이 생겼을지언정

그림 사이의 여백에는 영향이 없다는 것을 알 수 있습니다

따라서 이미지 자체에 여백을 주어야

이미지 각각의 상하좌우에 여백을 줄 수 있다는 것이지요

04. css img 에 box-sizing 설정하기

이제 마지막으로 padding 을 준 이미지태그에

box-sizing:border-box 를 설정해 주시면 됩니다

.images div{width: 25%; float: left;}

.images img{ width: 100%;  padding: 10px 10px; box-sizing: border-box;}

위에서 25%로 가로길이를 정확하게 맞춰놨는데

갑자기 10px 이 더 필요한 padding 이 생겼다고 했죠?

박스사이징을 하면 div 가로길이를 padding 을 포함하여

25% 로 맞춰준답니다

* css 최종코드 *

박스사이징 기능은 생긴지 얼마 안 된 기능이랍니다

그래서 각 브라우저마다 적용이 될 수도 있고 안 될 수도 있는데

IE 는 8.0 이상부터 적용이 되구요

이런 기능들이 어느 브라우저 버전부터 되는지는

w3schools 홈페이지 가셔서 확인해 보시는 게 좋답니다

굳이 w3schools 홈페이지에 들어가지 않더라도

구글에서 필요한 css 단어를 입력하면 바로 w3schools 로 이동합니다

html/css 에서 모르는 부분은 구글에서 검색하여

이런 홈페이지를 이용하는 습관이 필요하구요

크기가 다른 사진배치할 때

이 포스팅이 많은 도움이 되었으면 좋겠습니다~!

감사합니다>_<