가로 스크롤 앨범을 만들어보자.

기본적으로 가로/세로 스크롤 바는 노드들의 크기가 브라우저 뷰포트보다 클 때 생긴다. 우리는 또한, css로도 스크롤바를 만들 수 있다.

 

가로 스크롤 바는 overflow-x와 white-space 속성으로 만들 수 있다.

 

.photo-scroll {
  overflow-x: scroll;
  white-space: nowrap;
}

.photo-scroll-image {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  margin: 0 16px;
}

 

const imageTagWrapper = ({ src, name }: { src: string; name: string }): string => {
  return `<image class="photo-scroll-image" src="${src}" data-name="${name}"/>`;
};

const photoScrollWrapper = (): string => {
  return `<div class="photo-scroll">
            ${images.map(({ name, src }) => imageTagWrapper({ name, src })).join('')}
          </div>`;
};

 

overflow-x

콘텐츠가 블록 수준 요소의 왼쪽 및 오른쪽 가장자리를 오버플로하는 것에 대한 속성이다.

 

우리는 scroll 속성을 통해 가로 스크롤을 만들어줄 수 있다.

 

white-space

CSS white-space 속성은 요소가 공백 문자를 처리하는 법을 지정한다.

https://developer.mozilla.org/ko/docs/Web/CSS/white-space

nowrap은 연속 공백을 하나로 합친다. 줄 바꿈은 <br> 요소에서만 일어난다.

 

 

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x

overflow-x - CSS: Cascading Style Sheets | MDN