본문 바로가기

CSS

 (3)
모바일 제스처 스와이프, CSS 두 줄로 간단하게 만들기(가로스크롤) 모바일에서 좌/우로 넘기는 제스처를 스와이프라고 한다. 흔히 모바일 쇼핑 어플등에서 스와이프 제스처를 안 써본 사람은 없을것이다. 아래는 스와이프가 되는 박스(div) 안에 넣어야 할 CSS 코드이다. 1. 스와이프 박스 만들기 스와이프를 원하는 구간에 아래의 코드를 넣는다. 가로스크롤을 만드는것이다. .box { overflow-x: auto; white-space: nowrap; } 2. 가로 스크롤 없애기 보통 모바일에서 가로스크롤이 보이지않아도 스와이프 제스처로 좌우 화면이동이 가능하다. 가로 스크롤을 안보이도록 하기위해 아래의 코드를 추가로 작성한다. .box { overflow-x: auto; white-space: nowrap; -ms-overflow-style: none; scrollbar..
CSS로 스크롤바 기능만 살리고 안보이게하기 IE, Edge, Firefox, Chrome, Safari, Opera 대응법 1. IE, Edge .box { -ms-overflow-style: none; /* IE, Edge */ } 2. Firefox .box { scrollbar-width: none; /* Firefox */ } 3. Chrome, Safari, Opera .box::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ }
[Hweb] CSS grid 기본 1. grid란? grid란 레이아웃을 설정하는 CSS속성입니다. grid 속성을 이용하면 웹페이지의 레이아웃을 한번에 잡을 수 있습니다. 물론 모든 웹디자인에 grid를 사용하기 좋은것은 아닙니다. 보통 규칙적인 비율로 디자인된? 웹사이트에 적용하면 편리합니다. 레이아웃을 잡고자하는 가장 큰 영역에 display: grid를 표기하여 사용하면됩니다. 또, grid안에 grid도 사용 가능합니다. Internet Explorer를 제외한 모든 브라우저에서 호환됩니다. 2. grid 용어 그리드를 사용하려면 주요 구문의 개념을 잘 이해해야 합니다. 아래에 그리드의 다양항 속성들을 정리해 놓았는데 주요 구문의 개념을 알아야 속성의 뜻도 이해하실 수 있을거에요. 1. 그리드 컨테이너(gird container..

티스토리툴바