-
가로 스크롤 만들기Node.js/프론트엔드 2021. 4. 1. 12:15
white-space: nowrap 과 overflow: auto 를 사용하여 가로 스크롤을 만들 수 있다.
white-space 는 엘리먼트가 공백 문자를 처리하는 법을 지정하는 속성인데,
white-space: nowrap 은 연속 공백을 하나로 합친다.
즉 줄 바꿈이 <br> 엘리먼트에서만 일어난다.
위처럼 줄 바꿈이 일어난 엘리먼트의 공백을 아래처럼 없애준다.
반면 overflow 는 엘리먼트의 컨텐츠가 너무 커서 block formatting context 에 딱 맞지 않을 때 사용하는 속성이다.
데스크탑 브라우저의 경우 컨텐츠가 넘칠 때 overflow: auto로 아래처럼 스크롤바를 노출할 수 있다. 컨텐츠 양에 따라 스크롤바를 추가할지 안 할지를 자동으로 정한다.
코드 예시
.html
<!DOCTYPE html> <head> <link rel="stylesheet" href="./test.css"> </head> <body> <div class="scrollMenu"> <a href="#Mark">Mark</a> <a href="#Johnny">Johnny</a> <a href="#Yuta">Yuta</a> <a href="#WinWin">WinWin</a> <a href="#Haechan">Haechan</a> <a href="#Shotaro">Shotaro</a> <a href="#Doyoung">Doyoung</a> <a href="#Taeil">Taeil</a> <a href="#Xaojun">Xaojun</a> <a href="#Jaehyun">Jaehyun</a> <a href="#Zeno">Zeno</a> <a href="#Runjun">Runjun</a> <a href="#Jaemin">Jaemin</a> <a href="#NCT">NCT</a> </div> </body>.css
div.scrollMenu { background-color: rgb(161, 247, 11); overflow: auto; white-space: nowrap; } div.scrollMenu a { display: inline-block; color: rgb(0, 0, 0); text-align: center; text-decoration: none; padding: 14px; } div.scrollMenu a:hover { background-color: rgba(229, 242, 208, 0.797); }www.w3schools.com/howto/howto_css_menu_horizontal_scroll.asp
'Node.js > 프론트엔드' 카테고리의 다른 글
NextJS (0) 2021.11.25 Redux의 원리와 불변성 (0) 2021.05.14 [ESLint] eslint.workingDirectories 옵션 (0) 2020.12.27 프론트엔드 개발 환경의 이해 - NPM (0) 2020.12.01 JSX, Babel, webpack (0) 2020.07.12