CSS calc() 산술식(사칙연산) - HTML+CSS+JQUERY 포트폴리오 중급 실전 퍼블리싱

CSS calc() 산술식(사칙연산) - HTML+CSS+JQUERY 포트폴리오 중급 실전 퍼블리싱 (youtube.com)

---

calc 함수 사용

container 생성

width: 100% - 현재 브라우저 width 

100% 에서 조금 빼고 싶은 경우,

( 40px 정도 빼고 싶은 경우)

이렇게 하면 될 것 같지만 CSS 는 이해를 못함.

= calc() 함수를 사용해야 함.

---

calc() 함수 사용시 주의점

calc 함수 사용할 때 위와 같이 띄어쓰기 있으면 안됨.

그리고 이렇게 괄호 안에 붙여도 안됨.

 Operator 좌, 우 에는 꼭 띄어쓰기 해야함.

---

1. calc() 활용
- 좌 우 마진 넓이 빼기

 

컨테이너 재설정

width: 1000px

마진 auto 로 중앙정렬

rmsep 1000px 이 아니라 100%로 수정

그리고 좌우에서 20px 빼고 싶은 경우 - 전체적으로 40px 을 빼고싶음.

이렇게 식을 짜놓으면 

좌 / 우로 20px 이 빠지게 되고 가운데 정렬도 된다.

---

2. calc() 활용
- 나누기가 어려울 때

부모 div 와 자식 div 3개 설정

css 설정

가로배치하기 - float 사용

부모는 자식이 float 사용하면 높이값을 잃어서 overflow 추가해준다.

 

부모요소 900

자식 300

 

900 나누기 300 은 쉬움.

근데, 부모가 900이 아니라 800인 경우

= 나누기가 어려울 때, calc 함수 사용

800px 나누기 자식이 3개니까

/ 3 을 사용해줌.

그럼 완벽하게 3분의 1로 사칙연산 해줌.

---

3. calc() 활용
- calc 함수 중복 사용

컨테이너 생성

width 를 calc 로 생성해준다.

300 px 나오게 됨.

calc 를 중첩시킬 수 있음.

여기까지는 300px

전체적으로 700px 이 된다.

---

4. calc() 활용
- 웹디자인 시 calc() 활용

반응형 웹 제작 시

빨간 색 부분 남기고

파란색 부분만 웹사이트 만드는 케이스

= 이런 UI 만들 때 calc() 활용

이렇게 적용

* 스크롤이 생기는 이유

= body 에 margin 이 있어서

우리가 하려는 것

= 색상을 저 빨간 색안에만 두기.

상하좌우 20px 만큼 띄울 것

상 하 20px 씩 띄울 거니까

합이 40px 이므로 높이를 calc 사용해서 지정해준다.

width 좌 우 도 설정해줘야 한다.

포지션 부여