• 빠른 이동을 원하시면, 아래 키워드를 클릭하세요!

🌿 모달 아이템 만들기

calc()

top: calc(50% - 250px);  /* 높이 500px의 절반인 250px을 중앙 정렬하기 위한 값 */
left: calc(50% - 200px); /* 너비 400px의 절반인 200px을 중앙 정렬하기 위한 값 */

calc() 함수는 CSS에서 동적인 크기 계산을 가능하게 해주는 유용한 도구입니다. 이 함수를 사용하면 단순히 픽셀(px)이나 백분율(%) 단위뿐만 아니라 다양한 단위의 값을 조합하여 계산할 수 있습니다.

calc()는 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/) 연산자를 지원합니다.

calc() 함수의 장점

1. 동적 계산:
   • calc()를 사용하면 고정된 값과 비율을 조합하여 동적으로 크기나 위치를 계산할 수 있습니다. 이는 반응형 디자인에서 매우 유용합니다.
2. 복잡한 레이아웃 조정:
   • 여러 단위(픽셀, 퍼센트 등)를 조합하여 복잡한 레이아웃 조정을 쉽게 할 수 있습니다.
3. 유연한 디자인:
   • 다양한 화면 크기와 해상도에 맞추어 요소의 크기나 위치를 유연하게 조정할 수 있습니다.

겹치기 핵심을 이해하지 못한 경우에 발생하는 실수 => 상위부모 position 두지 말 것

body {
	margin: 20px;
	position: relative;
}

위 설명에 따르면, 배경을 배치하는데 absolute를 이용했다는 것을 알 수 있습니다.

쌓임 맥락에 따르면, absolute는 상위에 적용된 relative에 따라서 위치가 결정되기 때문에, 상위 부모에 position을 두게 된다면 위 사진처럼 원하는 모달이 제대로 구현되지 않을 수 있습니다.

📝 실습 코드