scrollLeft를 이용하여 가로스크롤 이동 & white-space

모바일 페이지에서 상단의 버튼이 있는 경우, 버튼의 총 넓이가 넓으면 스크롤이 들어가게 된다.

이때 스크롤을 움직여야 보이는 버튼을 클릭 후 상세페이지에 들어갔을 때,

상세페이지내에 스크롤 값을 수정하여 버튼이 보이게 하면 된다.

(이걸 풀어쓰기가 너무 힘들었다ㅠ0ㅠ)

위와 같이 메뉴7은 스크롤을 움직여야 보이는데, 스크립트를 이용하면 바로 스크롤이 이동되서 보이게 된다.

그리고 이번에 코딩하면서 white-space 에 대해 다시 한번 알게되는 시간이었다.

상세 옵션을 정리하면 아래와 같다.

• 기본값 : normal
• initial : 기본값으로 설정
• inherit : 부모 요소의 속성값을 상속 받는다.
• normal : 새로운 줄 (공백 1개만 표시) / 공백과 들여쓰기 (공백 1개만 표시) / 줄바꿈 (자동 줄바꿈)
• nowrap : 새로운 줄 (공백 1개만 표시) / 공백과 들여쓰기 (공백 1개만 표시) / 줄바꿈 (자동 줄바꿈 하지 않음)
• pre : 새로운 줄 (공백을 있는 그대로 표시) / 공백과 들여쓰기 (공백을 있는 그대로 표시) / 줄바꿈 (자동 줄바꿈 하지 않음)
• pre-wrap : 새로운 줄 (공백을 있는 그대로 표시) / 공백과 들여쓰기 (공백을 있는 그대로 표시) / 줄바꿈 (자동 줄바꿈)
• pre-line : 새로운 줄 (공백을 있는 그대로 표시) / 공백과 들여쓰기 (공백 1개만 표시) / 줄바꿈 (자동 줄바꿈)

항상 table-cell 하면 한 화면에 들어가야 한다고 생각했는데, white-space를 이용하여 코딩하게 될 줄은 몰랐다.

앞으론 잘 활용할 수 있을 것 같다!