CSS/CSS 응용
[CSS]한줄로 길게 늘어트리기 (가로로 스크롤 되도록 )
알찬 퍼블리셔
2019. 7. 15. 11:44
728x90
반응형
탭메뉴를 사용하다보면 모바일에서 보기 불편해지는 경우가 있다.
이럴때
탭메뉴를 셀렉트메뉴로 바뀌도록 해도되고
[javascript/jQuery] - [JAVASCRIPT/JQUERY]반응형 탭메뉴 (웹에서는 탭메뉴 - 모바일에서는 셀렉트메뉴)
아래와 같은 방법을 사용해도 된다.
정해진 영역보다 컨텐츠가 길어지면 자동으로 줄바꿈이된다.
이를 막기위해서는
white-space:nowrap;을 사용해서 줄바꿈이 안되도록 할 수 있다.
기본설정으로는 아래와 같은 결과가 나온다
white-space:nowrap; 을 사용하면 아래와 같이 영역에 상관없이 줄바꿈되지 않는다
white-space:nowrap;를 overflow:auto; 와 함께 사용하면,
줄바꿈이 되지않고 영역밖으로 넘어갈 경우 스크롤이생긴다.
아래에서 확인할 수 있다.
이제 가로로 스크롤되게 만들었으니
스크롤 css를 변경해보자 >>
[CSS/CSS 응용] - [CSS]Scrollbar 꾸미기
두줄 메뉴 - 가로 스크롤 메뉴안에 또 가로스크롤 메뉴 넣기
[CSS/CSS 기초] - [CSS3] 문장의 공백과 줄바꿈을 처리하는 white-space (자동 줄바꿈 방지)
728x90
반응형