본문 바로가기

분류 전체보기111

스크롤 설정하기 - overflow CSS로 스크롤 설정하기 스크롤 항상 보이기 body{ overflow: scroll; } 스크롤 숨기기 body{ overflow: hidden; } 자동 스크롤 body{ overflow: auto; } 콘텐츠가 블록에서 넘치지 않을 경우에는 visible, 콘텐츠가 블록을 넘는다면 데스크탑 브라우저에서는 scroll을 자동으로 적용해준다. 2023. 2. 11.
[ JavaScript ] JS 스크롤 이동하기, scrollBy(현위치, 만큼)와 scrollTo(전체, 까지)의 차이 JS에서 스크롤 이동할 때 사용하는 비슷하지만 다른 scrollBy와 scrollTo에 대해 알아보자. by와 to의 뜻으로 짐작해서 쓴다면 쉽게 헷갈리지 않을 것이다! scrollBy(x-coord, y-coord) 위치하는 곳에서 ~만큼 이동 현재 위치에서 y좌표로 200px만큼 이동하기 x,y축으로이동할 만큼의 픽셀값을 지정해주기만 하면 된다. window.scrollBy(0,200); 오브젝트 형태로도 전달 가능하다. 세로값인 y대신 top, 가로값인 x대신 left를 통해 이동할 만큼의 픽셀값을 지정한다. window.scrollBy({ top: 100, left: 0 }); options - behaivor window.scrollBy({ top: 50, left: 20, behavior: '.. 2023. 2. 11.
CSS 변수 사용하기 자주 사용하는 색상이나, 넓이, 높이가 있다면, 그리고 전체적으로 변경해야 할 때, JS변수를 만들어서 사용하는 것처럼 CSS에서도 변수를 만들어서 사용할 수 있다. CSS 변수 설정하기 :root{ --font-size: 16px; --text-color: black; --base-bg-color: white; } CSS 변수는 최고 부모 위치인 root에서 지정을 하면 모든 자식 요소에서 접근이 가능하다. 선언할 때는 위의 예시처럼 변수명 앞에 --을 붙여서 사용하고 쓸 때는 아래와 같이 var를 붙여서 사용한다. CSS 변수 사용하기 .textBox{ font-size: var(--font-size); color: var(--text-color); } 정의된 것이 없다면 아래와 같이 기본값을 바로 .. 2023. 2. 11.

티스토리툴바