IT/CSS 2

SCSS 기본 정리 - SCSS, CSS, Sass 1

📌 SCSS SCSS는 Sass3 버전부터 새롭게 등장 SCSS는 Sass의 모든 기능을 지원하는 Superset SCSS는 CSS와 거의 비슷한 문법으로 Sass의 기능을 사용할 수 있어서 편리함 📚 CSS의 단점 CSS는 복잡한 언어는 아니지만 작업이 커지거나 코드가 많아지면 불편함이 생김 -> 유지보수가 어려워진다는 단점이 있음 선택자(Selector)를 만들때 매번 불필요한 부모요소 선택자를 적어야 함 funtion같은게 없으니, 규모가 큰 프로젝트의 경우 자동화하기 어렵고 모든 것을 수동으로 변경해야 함 결국에는 중복되는 코드가 많아 코드 줄수가 길어져 유지보수에 마이너스적인 요소가 됨 📚 SASS(Synthetically Awesome StyleSheets) Sass는 코드의 재활용성을 올리고..

IT/CSS 2024.02.14

::before, ::after 가상 요소(Pseudo-elements)

📌 가상 요소(Pseudo-elements)란? - CSS 가상 요소는 선택자에 추가하는 키워드로 선택한 요소(elements)의 일부에만 스타일을 적용할 수 있고 선택한 요소 전체에 스타일을 적용하는 것이 아니라, 요소의 일부에만 스타일을 적용할 수 있음!! - HTML에 새로운 엘리먼트를 추가한 것처럼 동작함 - 존재하지 않는 요소를 존재하는 것처럼 부여하여 문서의 특정 부분 선택이 가능함 📕 가상 요소 문법 선택자::의사요소이름 {속성: 속성값;} - 하나의 HTML 요소에 여러개의 의사 요소를 동시에 적용 가능함 ❗❗ 주의점 - CSS1과 CSS2에서는 하나의 콜론(:)으로 가상 요소를 나타내어 CSS3를 지원하지 않는 브라우저에서는 적용되지 않을 수 있음 - CSS3에서는 가상 클래스는 하나의 ..

IT/CSS 2024.01.31