부스트코스 반응형 과제를 작업하다가 리스트 태그의 속성들을 가로로 배치 한 후 부모요소를 넘어가는 자식 리스트 요소들에 대해서는 스크롤을 하는 기능을 구현한것을 정리하게 되었다.
스크린의 뷰포트가 pc사이즈일때는 float:left
속성을 통해 가로로 정렬했고 이것을 태블릿용 사이즈에 맞추었을때 가로로 정렬함과 동시에 overflow: scroll
을 적용하려다가 잘 안됬다. 찾아보니까
float
속성때문에 그런거라고 해서 float
속성을 해제하고
li 요소들에 대해 display: inline-block
속성을 부여 한 후 부모요소에
overflow: scroll;
white-space: nowrap;
스타일링을 적용하니까 잘 구현이 됬다.