[CSS] 가로 스크롤 구현하기

.wrap-vertical{ width: 500px; padding: 20px; overflow: scroll; color: #112031; background: #F0D9FF; border: 1px solid #000; /* 가로 스크롤 */ overflow: auto; white-space: nowrap; } 




white-spacing 속성


- normal : 연속 공백을 하나로 합침. 개행 문자도 다른 공백 문자와 동일하게 처리한 줄이 너무 길어서 넘칠 경우 자동으로 줄바꿈

 

- nowrap : 연속 공백을 하나로 합침. 줄 바꿈은 <br> 요소에서만 일어남. pre연속 공백 유지. 줄 바꿈은 개행 문자와 <br> 요소에서만 일어남.

 

- pre-wrap : 연속 공백 유지. 줄 바꿈은 개행 문자와 <br> 요소에서 일어나며, 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꿈.

 

- pre-line연속 공백을 하나로 합침. 줄바꿈은 개행 문자와 <br> 요소에서 일어나며, 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꿈.

 

- break-spaces다음 차이점을 제외하면 pre-wrap과 동일.

  • 연속 공백이 줄의 끝에 위치하더라도 공간을 차지.
  • 연속 공백의 중간과 끝에서도 자동으로 줄을 바꿀 수 있음.
  • 유지한 연속 공백은 pre-wrap과 달리 요소 바깥으로 넘치지 않으며, 공간도 차지하므로 박스의 본질 크기(min-content, max-content)에 영향을 줌.

 

스크롤바 숨기기


 

추가로 가로 스크롤의 경우 비교적 height가 짧기 때문에 스크롤을 지워야 이쁘다. 스크롤을 제거하려면 부모 태그에 아래 CSS속성을 추가해야 함.

 

.wrap-vertical::-webkit-scrollbar{
    display: none; 
}
0
0
이 글을 페이스북으로 퍼가기 이 글을 트위터로 퍼가기 이 글을 카카오스토리로 퍼가기 이 글을 밴드로 퍼가기

HTML/CSS/기타

번호 제목 글쓴이 날짜 조회수
39 FullCalendar(풀캘린더) 어거지 사용법 관리자 01-25 82
38 JQUERY - id가 여러개인데 한번에 찾고 싶을때! ${} 관리자 12-28 88
37 [CSS] 가로 스크롤 구현하기 관리자 12-27 193
36 JCROP을 이용한 업로드한 크롭( CROP ) 하기 관리자 12-27 98
35 제이쿼리 - 모달 다이아로그 및 여러 알림창들 관리자 12-21 77
34 Javascript/jQuery 이미지 회전 돋보기 관리자 11-07 137
33 Resolving the Issue of Fakepath in JavaScript 관리자 10-26 106
32 div 및 요소 화면 중앙에 위치시키기 관리자 10-21 140
31 [Jquery] 체크박스 전체 체크 , 해제 하는 방법 관리자 10-19 131
30 display 스타일 속성 사용하여 행 숨기기/보이기 관리자 09-16 160
29 자주 사용하는 비주얼 스튜디오 코드(Visual Studio Code, VSC, vscode) 단축키 정리 관리자 09-14 385
28 div 2개 나란히 정렬하는 방법 관리자 09-09 163
27 HTML, CSS - 헤더컬럼 고정형 table 구성하기 관리자 09-06 139
26 Drag and Drop File Upload 관리자 09-03 136
25 rowspan으로 합친 table에서 룰오버 관리자 08-23 175
24 스마트에디터 입력 용량 체크 관리자 07-06 246
23 자바스크립트 정규표현식 모음 관리자 07-03 205
22 [Javascript] 쓰레드(웹 워커-Web worker)를 사용하는 방법 관리자 04-13 254
21 구글 차트 관리자 04-12 499
20 Camera API 관리자 04-07 269