티스토리 블로그 에디터에서 글 작성할 때 이미지를 두 개 또는 세 개 이상 나란히 배열할 수 있다. 그런데 에디터에서 한 줄에 세 개 나오도록 배치를 해놔도 실제 화면에서 안되고 세로로 나올 때 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; 를 넣어서 강제로 적용해 주었더니 개발자 도구에서 이렇게 정상적으로 먹히는 것을 확인할 수 있다.
실제 화면에서도 이제 가로로 3개 배열되어 의도한 대로 표시가 된다.
참고 : flex 옵션
display : flex 옆에 아이콘이 있는데 눌러보면 다음과 같이 설정할 수 있는 속성들을 가이드해주고 있다. 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; /* 여러 줄의 이미지가 있을 경우, 그 줄들 사이의 정렬 */
}