CSS

[func] CSS - clamp() 함수 - 최소값과 최대값 사이의 중간값 반환. (= clamp함수 = 클램프함수)

목차

  1. clamp() 예제 - 최소값과 최대값 범위 내에서 중간값 선택
  2. clamp() 정의
  3. clamp() 구문

 

clamp() 예제 - 최소값과 최대값 범위 내에서 중간값 선택

 

<style>

p {font-size: clamp(1rem, 2.5vw, 2rem); }

</style>

 

<p>홈짱닷컴 Homzzang.com</p>

 

결과보기

 

clamp() 정의

 

최소값과 최대값 범위 내에서 중간값 선택.

 


 

1.

<length>, <frequency>, <angle>, <time>, <percentage>, <number>, <integer> 등에서 사용 가능.

 

2.

clamp(MIN, VAL, MAX)  =  max()(MIN, min()(VAL, MAX))

 

3.

IE 제외한 주요 최신 브라우저 모두 지원.

 

4. 예제 더 보기

https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()

 

 

clamp() 구문

 

selector {property: clamp(MIN, VAL, MAX);}

 


[매개변수]

 

  • MIN - 필수. 최소값
  • VAL - 필수. 기본값
  • MAX - 필수. 최대값

 

 


분류 제목
gradient CSS - repeating-linear-gradient () 함수 - 반복 선형 그레이디언트 ※ 패턴 배경
image CSS - object-fit 속성 - 컨테이너에 맞게 '이미지/비디오' 크기 조정 방법 지정 (= obje…
border CSS - border-image-source 속성 - 테두리 이미지 주소 (= border-image-so…
border CSS - border-right 속성 - 테두리우측일괄 (= 테두리오른쪽일괄 = border-right속성…
pagination CSS - 페이징 - 가운데 정렬 (Centered Pagination)
animation CSS - animation-timing-function 속성 - 애니재생중속도변화 (= 움직임 중 속도변경…
border CSS - border-left-style 속성 - 테두리좌측모양 (= 테두리왼쪽모양 = border-lef…
border CSS - border-image-width 속성 - 테두리 이미지 너비 (= border-image-wid…
border CSS - border-right-color 속성 - 테두리우측색상 (= 테두리오른쪽색상 = 테두리우측색깔…
border CSS - border-top-style 속성 - 테두리상단모양 (= 테두리상단스타일 = border-top…
color CSS - RGBA , HSL , HSLA , opacity - (색상코드)
transform CSS - backface-visibility 속성 - 3D요소 뒷면 노출 여부. (= backface-vi…
border CSS - border-right-width 속성 - 테두리우측두께 (= 테두리우측너비 = 테두리오른쪽너비 …
image CSS - Image Text - (이미지 위에 텍스트 배치/띄우기)
selector CSS - :disabled 가상선택자 - 비활성화 된 요소 선택 (= 실행불능요소 = 작동불능요소 = :d…
19/35
목록
 홈  PC버전 로그인 일본어
그누앞단언어
그누뒷단언어
그외코딩언어
그누보드
제작의뢰
Q&A
커뮤니티
웹유틸
회원센터
홈짱닷컴 PC버전 로그인