이진욱의코딩

(HTML,CSS)핀터레스트 스타일 레이아웃 만들기 본문

HTML

(HTML,CSS)핀터레스트 스타일 레이아웃 만들기

Crucifi 2019. 10. 3. 21:08

이번 시간에는 앞서 배웠던 html과 css를 이용해서 핀터레스트 스타일의 레이아웃을 만들 겁니다.

핀터레스트 사이트에 접속하시면 

 

 

이렇게 구조화가 되어있습니다.

이것을 masonry라고 하며 masonry는 벽돌을 쌓는 공사, 석조라는 의미를 가지고 있습니다. 사진 공유 서비스인 핀터레스트가 인기를 끈 이후에 핀터레스트와 같은 스타일의 레이아웃이 크게 인기를 끌었는데요. 이러한 모양의 레이아웃을 masonry 레이아웃이라고 합니다. 여기서는 masonry을 만드는 방법을 알아보겠습니다. 

 

https://codepen.io/dudleystorey/full/yqrhw/에서 참고했습니다.

 

change view로 코드들을 먼저 살펴보겠습니다.

 

html, css

여기 이 코드 들을 참조해서 만들어볼게요. 

 

<figure>
        <img src="C:/Users/이진욱/Desktop/새 폴더/images/spider.jpg">
          <figcaption>스파이더맨 배경화면</figcaption>
</figure>

이렇게 여러 개를 만들고 나면

 

이렇게 일자로 쭉 나열되어 있습니다.

 

위의 핀터레스트 형태로 만들기 위해 우리는 멀티 칼럼이라는 css속성을 이용해 만들 예정입니다.

 

먼저 body부분에 id값을 적어줘서 컨트롤에 편하게 사용합시다. (그냥 body로 적어도 별 상관ㄴㄴ)

 <div id="columns">

이렇게 지정해 줍시다.

 

 #columns figure{
        display: inline-block;
        border: 1px solid rgba(0, 0, 0, 0.2);
        margin: 0;
        margin-bottom: 15px;
        padding: 10px;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    }

columns태그 안에 figure의 변화를 줍시다.

 

figure : 블록 태그 :: figure태그 다음에 figure태그가 또 들어오면 밑으로 줄 바뀜
img : 인라인 태그 :: 연속으로 오면 옆으로 나열됨
figcaption : 블록 태그 :: 밑으로 줄 바뀜

이라서
figure {display:inline-block;}의 의미는 기본적으로 블록 태그인 figure에 인라인 속성을 부여한 게 맞는 것 같습니다.

inline속성을 부여하지 않은 figure는 기본이 블록 속성이기 때문에
칼럼이 3 열이니까 맨 왼쪽 1열부터 차곡차곡 밑으로 쌓다가
div#columns에 부여된 너비에 비례해 일정하게 지정된 height가 넘치면
잘리는 요소를 두 번째 열로 보내고
그 뒤부터 다시 아래로 뒷 요소들을 채우고 3열까지 갑니다.

요약하자면,
inline을 안 잡아줬을 때에는 figure 내부의 image와 figcaption이 차지하는 높이값들의 합이 넘쳐서
열의 끝에 있는 녀석이 다음 열로 밀려난 것입니다.

그런데 figure에 inline속성을 잡아주면(display:inline-block)
블록이라서 밑으로 떨어지는 기본 속성과
옆으로 당겨 붙이는 inline 속성이 함께 작용해서
height가 넘칠 것 같으면 figcaption만 옆 열로 보내는 게 아니라
figure를 통째로 보내버리기 때문에
옆 열 침범이 해소된 것처럼 보이는 것 같습니다.

 

이런 식으로 변화를 주면 됩니다.

 

box-shadow속성을 추가해서 좀 더 디테일을 살려서 해봤습니다.

그림 밑에 살짝 그림자가 지게 만드는 역할을 합니다.

그에 대한 농도를 조정하기 위해

rgba를 써서 세세하게 조정을 해봤습니다.

 

최종 코드를 보면서 확인해보겠습니다.

 

핀터레스트 같나요?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #columns{
        column-width: 350px;
        column-gap: 15px;
    }
    #columns figure{
        display: inline-block;
        border: 1px solid rgba(0, 0, 0, 0.2);
        margin: 0;
        margin-bottom: 15px;
        padding: 10px;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    }
     #columns figure img{
        width: 100%;
    }
    #columns figure figcaption{
        border-top: 1px solid rgba(0, 0, 0, 0.2);
        padding: 10px;
        margin-top: 11px;
    }
    </style>
</head>
<body>
    <div id="columns">
    <figure>
        <img src="C:/Users/이진욱/Desktop/새 폴더/images/spider.jpg">
          <figcaption>스파이더맨 배경화면</figcaption>
    </figure>
    <figure>
        <img src="C:/Users/이진욱/Desktop/새 폴더/images/spiderman.jpg">
          <figcaption>역동적인 스파이더맨 배경화면</figcaption>
    </figure>
    <figure>
        <img src="C:/Users/이진욱/Desktop/새 폴더/images/ironman.jpg">
          <figcaption>아이언맨 배경화면</figcaption>
    </figure>
    <figure>
        <img src="C:/Users/이진욱/Desktop/새 폴더/images/jocker.jpg">
          <figcaption>다크나이트 조커 배경화면</figcaption>
    </figure>
    <figure>
        <img src="C:/Users/이진욱/Desktop/새 폴더/images/godamcity.jpg">
          <figcaption>고담시티 배경화면</figcaption>
    </figure>
    <figure>
        <img src="C:/Users/이진욱/Desktop/새 폴더/images/superman.jpg">
          <figcaption>슈퍼맨 배경화면</figcaption>
    </figure>
    <figure>
        <img src="C:/Users/이진욱/Desktop/새 폴더/images/Frozen.jpg">
          <figcaption>엘사 배경화면</figcaption>
    </figure>
    <figure>
        <img src="C:/Users/이진욱/Desktop/새 폴더/images/짱구.jpg">
          <figcaption>짱구 배경화면</figcaption>
    </figure>
    <figure>
        <img src="C:/Users/이진욱/Desktop/새 폴더/images/jje.jpg">
          <figcaption>징징이 배경화면</figcaption>
    </figure>
</div>
</body>
</html>

 

'HTML' 카테고리의 다른 글

html의 테두리에 대해 알아봅시다.  (0) 2019.10.02
html의 box-sizing, display, visibility속성에 대해 알아봅시다.  (0) 2019.10.02
css속성에 대해 알아봅시다.  (0) 2019.09.27
섹션(section)요소에 대해 알아봅시다.  (0) 2019.09.22
오디오, 비디오태그, 기타택스트관련태그, 특수기호에 대해 알아봅시다.  (0) 2019.09.19
'HTML' Related Articles more