SeaPlus

1. $변수선언 CSS 는 변수를 사용할 수 없습니다. 때문에 반복적으로 사용되는 코드를 계속해서 입력해야하고, 그 코드가 바뀌면 모든 코드를 수정해야하는 어려움이 있습니다. 하지만 Sass(SCSS)는 그 코드를 변수로 지정해 필요한곳에 사용할 수 있습니다. 이는 나중에 코드를 수정해야할 상황에서 변수의 값만 변경하면 되므로 작업이 간단해 집니다. 예를 들어 $red: #fe3900 $red 라는 변수를 선언하고 사용시 /*scss*/ GNB{background-color: $red;} CTA{background-color:$red;} modal{background-color:$red;} GNB, CTA, modal 세개의 요소 모두 background-color 값을 $red라는 변수를 통해 선언을 ..

✅ 김버그의 UI 개발 부트캠프 자취생 들의 필수어플 "오늘의 집" 의 상품판매 페이지의 UI 를 SCSS 를 활용해 크게는Layout 단위부터 componet 단위까지 자세하게 분석한뒤 똑같이 만들어 볼수 있다. 프런트엔드를 구성하는 가장 기초적인 assets 단위부터 SCSS를 통해 상태관리하는 방법 과 SCSS의 문법 등을 배울수 있다. - 기술스택 : HTML, CSS, SCSS, JavaScript 🔨 구현방법 1. Asset 파일 준비 Image 웹페이지에서 이미지의 용량은 약 60%를 차지할 정도로 코드파일보다 크고 많은 영향을 끼친다. 랜더링 타임을 줄이고 사용성 증진을 위해, 목적에 맞는 이미지 확장자(jpg, png, svg, webp)를 선택. Icon svg 파일을 icon으로 변환..

css는 웹에 표현될 요소들을 시각적으로 풍부하게 꾸며주고, 장식하는 역할을 맡고 있습니다. 이런 css의 장점때문에 오늘날의 웹은 과거와 비교해서 훨씬 세련되게 발전할수 있었습니다. 하지만 시각적으로 화려한 UI와 디자인을 웹에 부여하기 위해서 고도화된 css 코드를 작성해야 하는데, 그에 반해 css문법적 한계는 뚜렷 한 상황 이었습니다. 이때 등장한 것이 바로 "CSS 전처리기(CSS Preprocessor )" 입니다. [CSS 전처리기(CSS Preprocessor )] css 전처리기는 오늘날 복잡해지고 무거워진 css코드를 보다 간결하고 깔끔하게 만들어줍니다. 전처리기는 CSS 문법과 굉장히 유사하지만 선택자의 중첩(Nesting)이나 조건문, 반복문, 다양한 단위(Unit)의 연산 등… 표..