CSS: 오버롤, 오버플로우 및 터치 동작.⛷
CSS: 색재현율 및 적용.🌈
비바프 쿠르베・ 10월 23일 20일.・ 6 분 읽기
#css
#html
#webdev
#tutorial
CSS: 하위 그리드, 다중 열 및 쓰기 모드.🥸
비바프 쿠르베・ 11월 20일'20・ 6 분 읽기
#css
#html
#webdev
#tutorial
그래, 이제 오버롤러가 무엇인지, 오버롤러가 무슨 도움이 되는지, 왜 만지는 동작 같은 것이 필요한지 더 많이 알 때가 됐어!
맥주를 넘치게!!
➡️ CSS 하이퍼볼륨
The overscroll property tells the browser what to do when the body content reaches the boundary of the scroll area. Hence the name over-scroll.
따라서 웹 프로젝트에 오버스크롤 속성을 추가하지 않을 때, 기본값은 auto입니다.모바일 장치에서, 페이지의 밑부분 (또는 맨 위) 으로 스크롤하려고 할 때, 반등 효과를 볼 수 있으며, 웹 페이지의 이러한 행동은 오버스크롤이 제어합니다.
일반적으로 다음 두 속성 중 하나를 사용합니다.
The overscroll property tells the browser what to do when the body content reaches the boundary of the scroll area. Hence the name over-scroll.
overscroll-behavior-x: 수평 (x축) 경계에 도달했을 때 브라우저 스크롤 동작을 처리합니다.
overscroll-behavior-y: 위의 내용과 동일하지만 수직(y축) 경계에 있습니다.
CSS 파일로 이동하여
body 요소에 다음 코드 행을 추가합니다.body {
overflow-y: hidden; /* Hide vertical scrollbar */
overflow-x: hidden; /* Hide horizontal scrollbar */
}
overscroll에서 지원하는 키워드 값은 다음과 같습니다.
overscroll-behavior: auto; 모든 웹 페이지의 기본 모드입니다.실제로는 아무것도 없다:") overscroll-behavior: contain;은 밑바닥 원소가 굴러가는 것을 방지할 것이다.overscroll-behavior: none;의 기본 동작이 차단되고 스크롤 막대를 삭제할 때 흔히 볼 수 있습니다.') ➡️ CSS 오버플로우
The overflow is a CSS shorthand property that is used to set the, well, the overflow behavior of an element.
부모 요소의 경계가 넘쳐흐르는 것을 보면 넘쳐흐르는 것을 볼 수 있습니다. 넘쳐흐르는 내용을 숨겨서 이 문제를 해결해야 합니다.
이 멋진 예를 봐라.
너는 텍스트가 어떻게 용기에서 넘치는지 알아차렸니?그들은 아마도 overflow: visible; 같은 물건을 사용했을 것이다.지금 우리는 어떤 다른 선택을 하고 있습니까?
The overflow is a CSS shorthand property that is used to set the, well, the overflow behavior of an element.
overflow: visible; 이것은 기본 동작입니다. 그렇습니다. 카드 레이아웃에 단락이나 그림이 넘칠 때, 이것은 매우 나쁜 것입니다.컨텐트는 잘리지 않고 정의된 여백/채우기 외부에 표시됩니다.overflow: hidden; 당신의 생명의 볏짚입니다!현재, 내용이 잘렸지만, 스크롤 바를 추가하지 않을 것입니다.또한 어떤 방향으로도 드래그하고 굴릴 수 없습니다.overflow: scroll; 여기 스크롤 바 있어요!그러나 컨텐트는 채우기에 따라 잘립니다.스크롤 막대는 어떤 경우에도 항상 표시됩니다.: ')overflow: auto; 에서는 자동으로 컨텐츠 편집 여부를 결정합니다.컨테이너에 컨텐트가 있으면 기본 visible 비헤이비어와 유사합니다.
CSS에 다음을 추가해야 합니다.
p {
.
.
.
width: 12em;
height: 6em;
overflow: scroll; /* always show scrollbars */
.
.
.
}
➡️ CSS 터치 동작
우리는 터치 제어 설비의 땅에 왔다!
The touch-action property sets how an element's region can be changed on a touch-enabled device.
터치스크린에 추가된 감동적인 기능, 예를 들어 수축 축소, 평이, 더블 클릭 빠른 축소 등은 모두 이 놀라운 CSS 속성을 통해 제어할 수 있다.
따라서 스마트폰에서 손가락으로 제스처를 시작할 때 배경에서 일어나는 일은 브라우저가 터치된 요소(예를 들어 드래그할 수 있는 상자)와 조상(예를 들어 신체 용기)의 touch-action치와 교차하여 제스처가 실현될 때까지 하는 것이다.
다음과 같은 몇 가지 흥미로운 가치를 제공합니다.
The touch-action property sets how an element's region can be changed on a touch-enabled device.
auto: 모든 초점이동 및 줌 기능을 사용할 수 있습니다.none: 이 옵션을 사용하면 모든 초점이동 및 줌 기능을 사용할 수 없습니다.pan-x과 pan-y: 각각 한 손가락의 수평과 수직 제스처를 사용합니다.그 밖에 pan-x , pan-up , pan-left 등 일부 자치도 있다.manipulation: 초점이동 및 축소 및 축소 등의 표준 제스처가 켜져 있지만 두 번 클릭 등의 비표준 제스처가 켜져 있습니다.달콤하게?😏 pinch-zoom: 가장 흥미로운 일입니다!pan- 값을 사용하여 여러 손가락으로 페이지를 초점이동 및 배율 조정할 수 있습니다.🤩 행동 자원을 건드리는 것들!
Adopting a architecture means moving in and the challenges that come with it! Payara Cloud will save you time and effort running apps on the cloud, and ensure everything works with . Watch this space! pic.twitter.com/iIEANhfVRt
— Payara (@Payara_Fish)
📫 매주 개발자 통신 구독📫
PS: 올해부터 저는 이곳에서 개발 커뮤니티에 관한 글을 쓰기로 했습니다.전에 나는'중'자를 썼다.제 글을 보고 싶은 사람이 있다면 here은 제 매체 자료입니다.
Reference
이 문제에 관하여(CSS: 오버롤, 오버플로우 및 터치 동작.⛷), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/vaibhavkhulbe/css-overscroll-overflow-touch-actions-4lhb텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
