[CSS] display:flex 설정방법 – 티스토리 이미지 여러개 나란히 배열 안될 때

티스토리 블로그 에디터에서 글 작성할 때 이미지를 두 개 또는 세 개 이상 나란히 배열할 수 있다. 그런데 에디터에서 한 줄에 세 개 나오도록 배치를 해놔도 실제 화면에서 안되고 세로로 나올 때 CSS 수정한 방법이다.

이미지 나란히 여러 개 배열하는 방법은 아래 블로거 분이 잘 정리해 놓으셔서 참고하였다.

다음 상단 노출 로직으로 알려져서인지 요즘 우후죽순 시작하는 수익형 블로그들 보면 죄다 필요도 없는 이미지 한 줄에 세 개씩 여러개 넣어놓는 것을 알 수 있다. (당장 다음 검색에서 대환대출, 글루타치온 효능 같은 키워드들을 검색해 보라.)

나는 그런걸 노리는 목적으로 하려는 건 아니었고 맛집 포스팅 하는데 사진 몇 장 나란히 배열해보려고 하다가 안되서 CSS 까지 수정하게 되었다.

티스토리 이미지 세 개 배열

티스토리 이미지 세 개 배열

에디터에서 글 작성할 때는 분명 이렇게 나란히 세 장이 표시가 된다.

티스토리 이미지 세 개 배열 안먹힌 모습

하지만 발행을 하고 실제 보이는 글을 살펴보면 이렇게 배열이 깨지고 세로로 나온다. 이미지 사이즈는 에디터에서 가로 배열을 위해 줄어든 상태로 유지되면서.

이게 바로 되는 스킨이 있고, 저 블로그에 적용한 프라치노 공책 스킨처럼 별도의 css 체계를 가지고 있어서 안먹히는 스킨도 있다.

CSS FLEX 속성 수정

<figure class="imagegridblock block">
<div class="image-container">
<span><img src= "" ></span>
<span><img src= "" ></span>
<span><img src= "" ></span>
</div>
</figure>

개발자도구 (F12) 열어서 HTML 구성을 살펴보니 이와 같이 되어 있었다. image-container 안에 세 개가 들어가 있는 모양새이다. 저 클래스들에 해당하는 CSS 설정을 살펴보니 다음과 같다.

#fc-article figure.imagegridblock .image-container {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center
}

#fc-article figure.imagegridblock .image-container * {
    display: block;
    margin: 0 !important
}

#fc-article figure.imagegridblock .image-container > * {
    flex: 1 1 auto !important;
    margin-right: 3px !important
}

#fc-article figure.imagegridblock .image-container > :last-child {
    margin-right: 0 !important
}
#fc-article .image-container {
    display:block !important;
}
.image-container .btn span {
    opacity: 1!important;
}


 html.dark #fc-article blockquote[data-ke-style=style3],
    html.dark #fc-article figure.imagegridblock {
        background-color: #242424 !important
    }

    .text-stripe > figure.imagegridblock,
    .text-stripe > figure.imageslideblock,
    .text-stripe > figure[data-ke-type=opengraph] {
        margin-left: -6px !important;
        margin-right: -6px !important
    }

관련된 부분들을 뒤져보니 이런 식으로 되어 있는데, 이미지 나란히 배열하는데 영향을 주는 flexbox 속성이 적용이 되어있는지 검토가 필요하다.

맨 위에 부분에 image-container 부분을 살펴보았다.

flex-direction: row 이 부분은 이미지가 가로 방향으로 배열되도록 설정해주는 옵션이다.

그런데 이 flex 속성이 적용되려면 애초에 디스플레이가 flex로 보여지도록 해주는 것이 필요하다. display:flex 이게 들어간 다음에 flex를 어떻게 할 지 지정해야 의미가 있다.

한 줄을 추가했더니 취소선이 생겨서 (다른 CSS 규칙이 우선적으로 덮어쓰고 있기 때문) display: flex !important; 를 넣어서 강제로 적용해 주었더니 개발자 도구에서 이렇게 정상적으로 먹히는 것을 확인할 수 있다.

CSS FLEX 수정 후 이미지 세 개 나란히 배열된 모습

실제 화면에서도 이제 가로로 3개 배열되어 의도한 대로 표시가 된다.

참고 : flex 옵션

display : flex 옆에 아이콘이 있는데 눌러보면 다음과 같이 설정할 수 있는 속성들을 가이드해주고 있다. flex와 관련된 속성들의 의미는 아래 내용과 같다.

CSS FLEX 속성 항목들

flex-direction은 flex 컨테이너 안의 아이템들 배치 방향을 정한다.

  • row : 아이템들을 가로로 배치한다.
  • row-reverse : row의 반대 방향으로 아이템들을 배치한다.
  • column : 아이템들을 세로로 배치한다.
  • column-reverse : column의 반대 방향으로 아이템들을 배치한다.

flex-wrap은 아이템들이 컨테이너 안에서 한 줄로 배치될지, 여러 줄로 나누어질지를 결정한다.

  • nowrap : 모든 아이템을 한 줄로 배치한다.
  • wrap : 아이템들을 여러 줄로 나누어 배치한다. 추가되는 아이템들은 새로운 줄에 배치된다.
  • wrap-reverse : wrap과 비슷하지만, 아이템들의 순서가 반대로 배치된다.

align-items는 컨테이너의 교차 축에 대해 아이템들을 어떻게 정렬할지 설정한다.

  • flex-start : 아이템들을 컨테이너의 시작 부분에 정렬한다.
  • flex-end : 아이템들을 컨테이너의 끝 부분에 정렬한다.
  • center : 아이템들을 컨테이너의 중앙에 정렬한다.
  • baseline : 아이템들을 텍스트 기준선에 맞춰 정렬한다.
  • stretch : 아이템들을 컨테이너의 높이에 맞춰 늘린다.

justify-content는 컨테이너의 주 축에 대해 아이템들을 어떻게 정렬할지 설정한다.

  • flex-start : 아이템들을 컨테이너의 시작 부분에 정렬한다.
  • flex-end : 아이템들을 컨테이너의 끝 부분에 정렬한다.
  • center : 아이템들을 컨테이너의 중앙에 정렬한다.
  • space-between : 아이템들 사이에 동일한 간격을 두고 정렬한다.
  • space-around : 아이템들 주변에 동일한 간격을 두고 정렬한다.
  • space-evenly : 아이템들 사이와 양 끝에 동일한 간격을 두고 정렬한다.

align-content는 flex-wrap이 wrap으로 설정된 경우에만 적용되며, 여러 줄로 나뉜 아이템들의 정렬 방식을 설정한다.

  • flex-start : 줄들을 컨테이너의 시작 부분에 정렬한다.
  • flex-end : 줄들을 컨테이너의 끝 부분에 정렬한다.
  • center : 줄들을 컨테이너의 중앙에 정렬한다.
  • space-between : 줄들 사이에 동일한 간격을 두고 정렬한다.
  • space-around : 줄들 주변에 동일한 간격을 두고 정렬한다.
  • stretch : 각 줄을 컨테이너의 높이에 맞춰 늘린다.

다음 예시와 같이 각 옵션들을 적용해 줄 수 있다.

#fc-article figure.imagegridblock .image-container {
    display: flex !important;
    flex-direction: row !important; /* 이미지들을 가로로 나란히 배치  */
    flex-wrap: wrap !important; /* 이미지들이 충분한 공간이 없을 때, 새로운 줄로 넘어가도록 설정  */
    align-items: center !important; /* 이미지들이 교차 축(cross axis)에서 중앙에 위치  */
    justify-content: space-around !important;  /* 이미지들이 주 축(main axis)에서 균등하게 배치되도록 설정  */
    align-content: space-around !important;  /* 여러 줄의 이미지가 있을 경우, 그 줄들 사이의 정렬  */
}
0 0 투표
Article Rating

0 Comments
Inline Feedbacks
댓글 모두 보기