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

 

 


분류 제목
responsive CSS - RES Grid-View - (그리드뷰 = 화면너비분할 = 화면분할 = 수동그리드)
responsive CSS - Responsive Image - (반응형 이미지) ★★★
responsive CSS - RES Video - (반응형 동영상)
responsive CSS - RES Frameworks - (반응형 프레임워크) - 반응형홈페이지틀
intro CSS - 반영 안 될 때 살펴볼 사항 + CSS・JS 바로 반영시키기 (= 캐시 새로고침)★★★★★ 2
css CSS - 블럭요소 수직중앙정렬/수평중앙정렬 (= 가로가운데정렬) (IE9) ★★★★★ (HT - Cent…
intro CSS - 수정할 요소의 CSS스타일 (선택자 확인 + 파일 위치 찾기 + 소스 보기) ★★★★★
selector CSS - 가상선택자 중복 (= 동시, 함께, 여러개)
css CSS - appearance 속성 - 요소자체구성요소숨기기 (= 요소내장구성요소제거 = appearance…
공지 CSS - 모바일 크롬새로고침 (Mobile, Chrome, Cache, Refresh)
intro CSS - @charset 구문 - 스타일시트 인코딩방식 설정 (= 언어셋지정/문자셋지정 = @charset…
intro CSS - (요소정렬/요소위치/요소이동) CSS 속성 BSET ★★★★★ (= 레이아웃/홈페이지 구조 스타일…
css CSS - (div전체/TD전체/TD셀천체/LI전체)에 링크걸기 (= DIV링크/TD링크/LI링크 = 요소전…
intro CSS - CSS RESET(= CSS리셋 = CSS초기화 = HTML요소초기화)
background CSS - backdrop-filter 속성 - 배경 필터 효과. (= 흐림효과 = 유리효과 = backdr…
15/33
목록
 홈  PC버전 로그인 일본어
그누앞단언어
그누뒷단언어
그외코딩언어
그누보드
제작의뢰
Q&A
커뮤니티 2
웹유틸
회원센터
홈짱닷컴 PC버전 로그인