티스토리에 Flex로 가로 스크롤 삽입하기

하고 나니 왠지 뿌듯

내가 사용하고 있는 스킨은 Portfolio라는 것인데, 현재 그곳에다가 조금씩 수정을 가하면서 사용하고 있다. 예전부터 배우고 싶었던 기능이 있는데, 개인적인 능력이 되지 않아서 넣지 못했던 기능이 있다. 바로 가로 스크롤 기능이었다. 기존에 짜여져있던 워드프레스를 건들다보니 쉽지 않았다. 하지만 티스토리에서는 쉽게 성공하였다!! 

Flex의 기본적인 것

flexbox로 만들 수 있는 10가지 레이아웃, 네이버 D2 (https://d2.naver.com/helloworld/8540176)

flex는 container(부모)와 item 자식요소로 구성되는데, 이 곳에 들어가는 속성을 잘 구별해서 넣어야한다. 일단 Container CSS에 display:flex; 를 넣는 것으로 시작한다. 그리고 원하는 속성에 따라서 이제 추가적인 설정을 하면 되는데, 그 활용법은 네이버 D2에 아주 잘 나와있다.

 

display:flex를 해버리면, 카드 형태의 모습이 모두 일그러져 버리는데 그것은 item CSS에 shrink에 대한 내용이 '1'로 설정되어 있어서 그렇다.

1. Display: flex;

2. Container에서 flex-wrap 감싸는 것을 감싸지 않도록 한다.  만약 nowrap이 아닌 wrap으로 설정하면 오른쪽으로 쭉 나열되지 않게 된다.

3. overflow-x : auto; 를 설정하지 않으면 스크롤이 되지 않는다.

4. item 요소에 flex에 대한 세부요소를 설정해주는데,  flex: 0 0 auto;로 설정하면 flex-grow: 0, flex-shrink , flex-basis가 auto로 설정되게 된다. 각각 화면을 늘릴 때, 줄일 때 어떠한 비율로 할 것인가에 대한 내용이며, basis는 요소의 크기를 결정하게 되며 일반적인 %, px, em, rem 모두 사용할 수 있다.

 

.container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;

 .item {
    flex: 0 0 auto;
  }
}

결과 화면

1. 위의 코드와 특별히 다를 것은 없지만 item 요소 auto 대신 90%로 만들었다. 그게 사람들이 보았을 때 옆에 콘텐츠가 더 있을 것이라고 느낀다고 생각했기 때문이다. 

2. 450px보다 작은 상황에서만 가로스크롤이 만들어지도록 media 를 이용했고, webkit-overflow-scrolling을 추가하였다. 해당 기능을 추가하면 끝에서 바운스되는 효과가 관찰되기 때문이다.

3. 결과적으로, 너무 만족스럽다 

4. 추가적으로 스크롤 기능을 더 추가했다. 약간의 UX를 개선하기 위한 것인데, scroll snap 기능을 추가하였다. 태곤님이 잘 정리해놓은 글을 읽고 나서, 나에게 필요한 것은 scroll snap-type이라는 것을 깨달았다. 스크롤을 할 때 하나의 아이템씩 넘기는 것인데, UX 개선에 상당히 유용하다. container에 scroll-snap-type: x mandatory;를 넣었고, item 에 scroll-snap-align : start를 넣었다. 

• scroll-snap-type : x 축으로 정확하게(mandatory) 잡아주는 것, 대략적으로 잡는 proximity도 있다.
• scroll-align: start를 설정하면 한번에 넘어가서 고정되는 기준이 시작점을 기준으로 한다. 다른 기준점도 있다. 나는 중간점보다 시작점에 고정되는게 좋았고 하나의 아이템 크기가 90%밖에 되지 않기 때문에 center보다는 start가 좋았다.

@media screen and (max-width: 450px) {
	.list_type_card{
		display:flex;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;		/* 끝에서 바운스 되도록*/
		scroll-snap-type: x mandatory;
			}
	.item_card{
		 flex: 0 0 90%; /* basis 를 90%로 조절함*/
scroll-snap-align: start;
	}
}

참고한 내용들

1. https://d2.naver.com/helloworld/8540176

2. https://codeburst.io/how-to-create-horizontal-scrolling-containers-d8069651e9c6

3. https://taegon.kim/archives/9807