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 - 필수. 최대값

 

 


분류 제목
image CSS - Rounded Images (둥근/동그란 이미지 만들기 = 이미지 테두리 둥글게/동그랗게) - I…
border CSS - border-bottom-right-radius 속성 - 테두리 하단 오른쪽 모서리 둥글게 (= …
image CSS - Image Filter - (이미지 필터 - 흑백/흐림 효과)
selector CSS - :in-range 가상선택자 - 지정범위안값 갖는 요소 선택 (= 인레인지선택자 IE13)
column CSS - columns 속성 - (컬럼최소너비/컬럼개수) 일괄 지정 (= columns속성 = 컬럼즈속성)
gradient CSS - repeating-radial-gradient () 함수 - 방사형 그레이디언트 반복 (= 그라디…
selector CSS - :read-write 가상선택자 - 읽고쓰기가능요소 (= readonly속성없는요소, IE13)
border CSS - border-image-outset 속성 - 테두리 경계 넘는 이미지 양. (= 보더이미지아웃셋속…
selector CSS - :optional 가상선택자 - 선택입력요소 (= required 속성없는 요소, IE10)
css CSS - 구글 로그인 포커스 애니 효과 (Google Logn Foucs Animation Effect) …
responsive CSS - RES Intro - (반응형 웹디자인 소개)
pagination CSS - 페이징 - 둥근테두리 효과 (Rounded bordered pagination)
image CSS - Thumbnail Images - (썸네일 이미지 스타일)
selector CSS - .class1 .class2 클래스선택자 ★★ - class1자손 중 class2 갖는 모든 요소
pagination CSS - 페이징 - 트랜지션 효과 (Hoverable Transition Effect)
18/35
목록
 홈  PC버전 로그인 일본어
그누앞단언어
그누뒷단언어
그외코딩언어
그누보드
제작의뢰
Q&A
커뮤니티
웹유틸
회원센터
홈짱닷컴 PC버전 로그인