CSS2 width: calc(50%- 164px); 무엇이 잘못된 건데 // css 에서 calc 이 안될 때 랜딩 디자인을 개편하는 일이 있어서 오랜만에 신나게 css 작업을 진행하는데 width: calc(50%- 164px); 가 제대로 작동을 안 한다. width가 안 먹혀서 브라우저 검사창에서 style을 보니 ⚠️width: calc(50%- 164px); 이렇게 스타일이 취소되어있다. 잘못된 속성값이라고 한다. 아니 그동안 잘 사용해왔던 문법인데 갑자기 왜???? width: calc(50%- 164px); 정답은 바로... 아래 코드였다. 이렇게 수정하고 나니 정상 작동함 (ㅠㅠ) width: calc(50% - 164px); CSS에서 calc() 함수를 사용할 때, 연산자 전후에는 반드시 공백이 있어야 한다. 기존 코드는 50%- 164px 로 사용해서 연산자(-) 앞에 공백이 없어서 제대로 연.. 2023. 11. 19. [CSS] 자주 사용하는 스타일 (border, color 등) 변수로 만들어서 사용하기 CSS를 사용하다보면 자주 사용하게 되는 스타일(메인 컬러, border 스타일 등) 이 존재하는데, 이렇게 반복되는 스타일을 변수로 처리하게 되면 여러가지 이점이 있다. 그 중에서도 내가 생각하는 가장 좋은 점은 아래 두 가지 ! 1. 같은 코드를 반복해서 입력하지 않아도 된다. 즉 코드 작성이 편해진다. 2. 추후 메인 컬러나 스타일이 변경되더라도 변수만 변경하면 되기 때문에 유지보수가 편해진다. 변수 생성하기 변수를 생성하기 위해서는 :root 선택자를 사용하고, 속성을 --변수명:변수내용; 과 같이 입력한다. 작성한 내용은 CSS 파일 (html에 직접 CSS를 작성하는 경우에는 style 태그 내) 최상단에 넣으면 된다. 변수 사용하기 변수를 사용하는 방법은 아주 간단하다. var(변수명) 으로.. 2022. 3. 10. 이전 1 다음 반응형
