CSS Math Functions happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > CSS > 기본 소스 > CSS Math Functions 상세정보

클라우드태그

Javascript

PHP

ASP

CSS

html

mysql

jquery

image

API

Mobile

메뉴

slide

게시판

현재접속자 명

CSS Math Functions

해피팀

네티즌

소스분류

기본 소스

다운로드 횟수

0 회

간단설명

CSS 수학 함수를 사용하면 수학 표현식을 속성 값으로 사용할 수 있습니다.

평가하기

calc() 함수

calc()함수는 속성 값으로 사용할 계산을 수행합니다.

예)

calc()를 사용하여 <div> 요소의 너비를 계산합니다.

#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
}

max() 함수

max()함수는 쉼표로 구분된 값 목록에서 가장 큰 값을 속성 값으로 사용합니다.

예)

max()를 사용하여 #div1의 너비를 50% 또는 300px 중 가장 큰 값으로 설정합니다.

#div1 {
background-color: yellow;
height: 100px;
width: max(50%, 300px);
}

min() 함수

min()함수는 쉼표로 구분된 값 목록에서 가장 작은 값을 속성 값으로 사용합니다.

예)

min()을 사용하여 #div1의 너비를 50% 또는 300px 중 가장 작은 값으로 설정합니다.

#div1 {
background-color: yellow;
height: 100px;
width: min(50%, 300px);
}