랜딩 디자인을 개편하는 일이 있어서 오랜만에 신나게 css 작업을 진행하는데 width: calc(50%- 164px); 가 제대로 작동을 안 한다.
width가 안 먹혀서 브라우저 검사창에서 style을 보니 ⚠️width: calc(50%- 164px); 이렇게 스타일이 취소되어있다. 잘못된 속성값이라고 한다.
아니 그동안 잘 사용해왔던 문법인데 갑자기 왜????
width: calc(50%- 164px);정답은 바로... 아래 코드였다. 이렇게 수정하고 나니 정상 작동함 (ㅠㅠ)
width: calc(50% - 164px);
CSS에서 calc() 함수를 사용할 때, 연산자 전후에는 반드시 공백이 있어야 한다.
기존 코드는 50%- 164px 로 사용해서 연산자(-) 앞에 공백이 없어서 제대로 연산자 인식이 안된 것이고, 결과적으로 속성값이 잘못되었다고 여겨진 것이다. 흫엥 나처럼 삽질하는 누군가가 있으실까봐 짧게 포스팅을 남겨놓는닷.
반응형
댓글