• 회원가입
  • 로그인
  • 구글아이디로 로그인

[func] CSS - min() 함수 - 최소값 (= min함수 = 민함수)

목차
  1. min() 예제 - 최소값
  2. min() 정의
  3. min() 구문
  4. min() 관련 주소

 

min() 예제 - 최소값

 

<style>

input, label {

  padding: 2px;

  box-sizing: border-box;

  display: inline-block;

  width: min(40%, 200px);

  background-color: yellow;

}


form {

  margin: 4px;

  border: 1px solid black;

  padding: 4px;

}

</style>

 

 

<form>

  <label>이름 입력:</label>

  <input type="text">

</form>

 

결과보기 

 

min() 정의


열거된 값 중 최소값을 기준으로 사용. 

 


 

1. 

※ 값은 수학적 표현식도 가능.

※ 각각의 값은 다른 단위 가능.

※ 계산 순서 위해 괄호 사용 가능.

 

2.

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

 

 

min() 구문

 

min(value1, value2,...)

 


[매개변수]

 

value1, value2,...

필수. 최소값을 구하기 위해 비교할 값 (또는 표현식.)

 


[반환값]

 

열거된 값 중 최소값 반환.

 

 

min() 관련 주소

 

mdn CSS min()

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

 



분류 제목
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)
gradient CSS - repeating-linear-gradient () 함수 - 반복 선형 그레이디언트 ※ 패턴 배경
border CSS - border-image-source 속성 - 테두리 이미지 주소 (= border-image-so…
image CSS - object-fit 속성 - 컨테이너에 맞게 '이미지/비디오' 크기 조정 방법 지정 (= obje…
pagination CSS - 페이징 - 가운데 정렬 (Centered Pagination)
border CSS - border-right 속성 - 테두리우측일괄 (= 테두리오른쪽일괄 = border-right속성…
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…
14/27
목록
찾아주셔서 감사합니다. Since 2012