[해피CGI][cgimall] CSS Math Functions

 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);
}

 https://www.w3schools.com/css/css_math_functions.asp

 해당 사이트를 참고하시면 CSS 수학 함수를 자세히 확인할 수 있습니다.