[CSS]한줄로 길게 늘어트리기 (가로로 스크롤 되도록 )

 

탭메뉴를 사용하다보면 모바일에서 보기 불편해지는 경우가 있다. 

이럴때 

 

탭메뉴를 셀렉트메뉴로 바뀌도록 해도되고

[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 (자동 줄바꿈 방지)