지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

덜 알려져 있지만 CSS의 유용한 기능

Susan Sarandon
풀어 주다： 2024-10-04 06:17:29
원래의
467명이 탐색했습니다.

CSS에는 덜 알려졌지만 유용한 기능이 있습니다. 그 중 몇 가지를 살펴보겠습니다.

1. CSS 스크롤-스냅-유형 속성 및 스크롤-스냅-스톱 속성

스크롤-스냅-스톱

상위 요소 아래의 각 하위 요소에 대해 이 속성을 설정하면 화면을 빠르게 스크롤할 때 트랙패드나 터치스크린

으로 빠르게 스크롤하는 동안 다음 요소가 통과되지 않습니다.

Gif :

Less known but useful features of CSS

예: 


<!DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 80%;
  aspect-ratio: 2/1;
  margin: auto;
  border: solid black 2px;
  overflow-x: hidden;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.blue {
  background-color: lightblue;
  width: 90%;
}

.green {
  background-color: lightgreen;
  width: 80%;
}

.pink {
  background-color: lightpink;
  width: 70%;
}

#container > div{
  margin: 5px;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  aspect-ratio: 4/1;
}
</style>
</head>
<body>


  <div class="container">
    <div class="blue"></div>
    <div class="green"></div>
    <div class="pink"></div>
    <div class="green"></div>
    <div class="blue"></div>
    <div class="green"></div>
    <div class="blue"></div>
    <div class="pink"></div>
    <div class="blue"></div>
    <div class="green"></div>
    <div class="pink"></div>

</div>

</body>
</html>
로그인 후 복사

값 :

  • 보통 : 기본값입니다. 스크롤은 기본 동작

    • 입니다.

  • 항상 : 터치패드나 터치스크린을 빠르게 스와이프하면 스크롤이 멈추고 다음 요소에 초점이 맞춰집니다.

스크롤 스냅 유형 속성

슬라이더를 가로로 드래그한 후 놓으면 효과가 나타납니다.
상자를 클릭한 다음 왼쪽 및 오른쪽 화살표 키를 사용하여 탐색하면 효과가 발생합니다

Gif :

Less known but useful features of CSS

예: 


<!DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 80%;
  aspect-ratio: 2/1;
  overflow-x: scroll;
  overflow-y: hidden;
  margin: auto;
  white-space: nowrap;
  scroll-snap-type: x mandatory;
    border: solid black 2px;
}

.blue {
  background-color: lightblue;
  aspect-ratio: 1/2;
  height: 95%;

}

.green {
  background-color: lightgreen;
  height: 50%;
  aspect-ratio: 2/1;
}

.blue, .green {
  display: inline-block;
  scroll-snap-align: center;
   margin: 5px;
}
</style>
</head>
<body>


<div class="container">
  <div class="blue"></div>
  <div class="green"></div>
  <div class="blue"></div>
  <div class="green"></div>
  <div class="blue"></div>
</div>

</body>
</html>
로그인 후 복사

값 :

  • 없음 : 기본값입니다

  • X : X축에 효과를 설정합니다

  • Y : 효과를 y축으로 설정

  • 둘 다 : x축, y축에 효과를 설정합니다

  • 필수 : 스크롤 종료 후 자동으로 점령 지점으로 스크롤 이동

2. CSS 장소 항목 속성

place-items 속성에 설정된 값은 align-items 및 justify-items 속성 모두에 적용됩니다.

예:

Less known but useful features of CSS


<!DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 60%;
  aspect-ratio: 3/2;
  border: solid black 1px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  place-items: center;
}

.container > div {
  width: 50%;
  aspect-ratio: 2;
  background-color: red;
}
</style>
</head>
<body>
<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

</body>
</html>
로그인 후 복사

값 :

  • 시작 : 그리드 셀 시작 부분에 항목 정렬

  • 끝 : 그리드 셀 끝에 항목 정렬

  • 가운데 : 그리드 셀 중앙에 항목 정렬

3. CSS 모든 속성

요소나 그 상위 요소에 적용된 모든 속성을 초기 값으로 변경합니다

예 :

Less known but useful features of CSS


<!DOCTYPE html>
<html>
<head>
<style> 
html {
  font-size: small;
  color : red
}
}

.a{
  background-color: yellow;
  color: red;
  all: unset;
}
</style>
</head>
<body>


<div class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

</body>
</html>
로그인 후 복사

값 :

  • 설정 해제: 요소 또는 요소의 부모에 적용된 모든 속성을 상속 가능한 경우 상위 값으로 변경하고 그렇지 않은 경우 초기 값으로 변경합니다.

4. CSS 사용자 선택 속성

사용자가 텍스트를 선택하는 것을 방지합니다

예: 


<!DOCTYPE html>
<html>
<head>
<style> 
div {
  -webkit-user-select: none;
  -ms-user-select: none; 
  user-select: none;
}
</style>
</head>
<body>

<div>The text of this div element cannot be selected.</div>

</body>
</html>
로그인 후 복사

5. CSS 캐럿 색상 속성

텍스트 입력 필드의 커서(캐럿) 색상을 변경합니다.


<!DOCTYPE html>
<html>
<head>
<style>
.a {
  caret-color: blue;
}

</style>
</head>
<body>

<input class="a" value="bulue">

</body>
</html>
로그인 후 복사

6. CSS 텍스트 장식-스킵 잉크 속성

text-꾸밈-skip-ink CSS 속성은 선과 밑줄 위로 글리프를 전달할 때 윗선과 밑줄이 그려지는 방식을 지정합니다.

값 :

  • 없음:

예:

Less known but useful features of CSS


text-decoration-skip-ink: none;
로그인 후 복사
  • 자동:

예 :

Less known but useful features of CSS


text-decoration-skip-ink: auto;
로그인 후 복사

7. CSS 포인터 이벤트 속성

pointer-events 속성은 요소가 포인터 이벤트에 반응하는지 여부를 정의합니다.

예 : 


<!DOCTYPE html>
<html>
<head>
<style> 
.a {
  pointer-events: none;
}

.b {
  pointer-events: auto;
}
</style>
</head>
<body>


<div class="a"><a href="https://www.gogle.com">Google</a></div>


<div class="b"> <a href="https://www.google.com">Google</a></div>

</body>
</html>
로그인 후 복사

값:

  • 없음 : 기본값

  • 자동: 요소가 포인터 이벤트에 반응하지 않습니다

결론

잘 알려지지 않은 CSS의 기능을 살펴보았습니다. 귀하의 애플리케이션에 유용한 기능을 배웠습니다.

위 내용은 덜 알려져 있지만 CSS의 유용한 기능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천：dev.to
이전 기사：ESnd Arrow 함수에 대한 종합 가이드 다음 기사：5개 분야 최고의 수익성 있는 프로그래밍 프로젝트
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
2
1902
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
10
2071
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
1742
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
1647
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1656
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿