![bg right](https://images.unsplash.com/photo-1634634465913-5bb5600942f2?crop=entropy&cs=srgb&fm=jpg&ixid=M3w1NTU5NjN8MHwxfHNlYXJjaHw1N3x8Y3NzfGVufDB8fHx8MTcyMjMwMjE4MXww&ixlib=rb-4.0.3&q=85) # CSS와 Sass/SCSS ## [소플 (이인제)](https://www.soaple.io/) --- # 목차 - [CSS 소개](#css-소개) - [Sass 소개](#sass-소개) - [SCSS 소개](#scss-소개) - [반응형 웹 디자인](#반응형-웹-디자인) --- ![width:480px height:458px bg right](https://media2.giphy.com/media/aFwbKRmG9dJT9bRxwo/giphy.webp?cid=d8f9e3b8zr3y40j8wz0pmdelw54huattzznl8ior84mb0jwy&ep=v1_stickers_search&rid=giphy.webp&ct=s) # CSS 소개 --- # CSS란? - **C**ascading **S**tyle **S**heets의 약자 - 웹 페이지의 시각적 표현을 담당 - HTML 문서의 스타일 지정 - 레이아웃, 색상, 폰트 등 - HTML과 분리된 스타일링 - 유지보수 용이성 증가 - 재사용 가능한 스타일 정의 가능 --- # CSS 기본 문법 - **선택자 (Selector)**: 스타일을 지정하려는 HTML element를 선택하는데 사용되는 패턴 - **속성 (Property)**: 스타일 속성 - **값 (Value)**: 속성에 대한 값 > 💡 중괄호를 사용하고, 세미콜론으로 구분 --- # CSS Selector - **요소 선택자 (Element Selector)** - 특정 HTML 요소를 선택 (예: `p`, `h1`) - **클래스 선택자 (Class Selector)** - 특정 클래스에 속하는 요소를 선택 (예: `.class`) - **ID 선택자 (ID Selector)** - 특정 ID를 가진 요소를 선택 (예: `#id`) --- # CSS Selector 사용 예시 ```css /* 요소 선택자 */ p { color: blue; } /* 클래스 선택자 */ .class { font-size: 16px; } /* ID 선택자 */ #id { margin: 10px; } ``` --- # CSS 예시 코드 ```css body { background-color: #f0f0f0; font-family: Arial, sans-serif; } h1 { color: #333; text-align: center; } p { font-size: 16px; line-height: 1.5; color: #666; } ``` --- ![bg right width:80%](https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Sass_Logo_Color.svg/2880px-Sass_Logo_Color.svg.png) # Sass 소개 --- # Sass - **S**yntactically **A**wesome **S**tyle **S**heets - CSS Preprocessor (전처리기) - 다양한 기능 지원 - 변수 사용 가능, 중첩 규칙 지원 - 파셜 및 임포트 기능 - 믹스인과 함수 - 상속, 연산 지원 - 장점 - 코드 재사용성 향상 - 유지보수 용이성 증가 --- # Sass의 두 가지 문법 - SCSS - CSS의 상위 집합 (superset) - 파일 확장자로 `.scss`를 사용 - Sass (The Indented Syntax) - Sass의 오리지널 문법 - 중괄호와 세미콜론 대신 들여쓰기를 사용 - SCSS와 동일한 기능을 모두 지원 - 파일 확장자로 `.sass`를 사용 ---

# SCSS 예시 코드 ```scss @mixin button-base() { @include typography(button); @include ripple-surface; @include ripple-radius-bounded; display: inline-flex; position: relative; height: $button-height; border: none; vertical-align: middle; &:hover { cursor: pointer; } } ```

# Sass 예시 코드 ```scss @mixin button-base() @include typography(button) @include ripple-surface @include ripple-radius-bounded display: inline-flex position: relative height: $button-height border: none vertical-align: middle &:hover cursor: pointer ```

--- ![width:480px height:480px bg right](https://media2.giphy.com/media/w7j1Bivh2hvIbhDYO8/giphy.webp?cid=d8f9e3b89t2w5f7vo2mp9clks45ympttdnny0v4nbsb7959a&ep=v1_stickers_search&rid=giphy.webp&ct=ts) # SCSS 소개 --- # SCSS란? - **S**assy **CSS** - CSS의 상위 집합 (superset) - CSS와의 유사성 덕분에 익숙해지기 쉽고 가장 인기 있는 문법 - 파일 확장자로 `.scss`를 사용 - Sass로 컴파일 필요 --- # SCSS 기본 문법 - 변수 사용 - 중첩 규칙 - 믹스인 - 상속 --- # SCSS 변수 사용 - 재사용 가능한 값 - 코드 간결화 - 유지보수 용이성 증가 --- # SCSS 변수 사용 - 예시 코드 ```scss $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } ``` --- # SCSS 중첩 규칙 - 코드 가독성 증가 - 구조적 스타일링 --- # SCSS 중첩 규칙 - 예시 코드 ```scss nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { text-decoration: none; color: $primary-color; } } ``` --- # SCSS 믹스인 (Mixin) - 재사용 가능한 스타일 - 코드 중복 감소 --- # SCSS 믹스인 (Mixin) - 예시 코드 ```scss @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); } ``` --- # SCSS 상속 - 스타일 재사용 - 코드 간결화 --- # SCSS 상속 - 예시 코드 ```scss .message { border: 1px solid #ccc; padding: 10px; color: #333; } .success { @extend .message; } .error { @extend .message; } ``` --- # SCSS 컴파일 - Sass로 컴파일 필요 - 다양한 컴파일러 사용 가능 **명령어 예시** ```bash sass input.scss output.css ``` --- ![width:600px height:600px bg right](https://media3.giphy.com/media/8BDQnNDcocWSnHZLPB/giphy.webp?cid=d8f9e3b8tiuj2k3wq39hpycciujvjj69vv1xj5hqqmdct9j8&ep=v1_stickers_search&rid=giphy.webp&ct=s) # 반응형 웹 디자인 --- # 반응형 웹이란? **다양한 디바이스와 화면 크기에 맞춰 웹 페이지의 레이아웃과 콘텐츠가 자동으로 조정되는 웹사이트** - **유연한 그리드 레이아웃** - 비율 기반의 그리드 시스템을 사용하여 콘텐츠 크기가 화면 크기에 따라 유동적으로 변함. - **유연한 이미지 및 미디어** - 이미지, 동영상 등의 미디어가 화면 크기에 맞춰 자동으로 조절됨. - **미디어 쿼리 (Media Query)** - CSS에서 화면 크기, 해상도, 방향 등을 기준으로 스타일을 조건부로 적용할 수 있는 기능. --- # 반응형 웹의 장점 - **접근성 향상** - 다양한 디바이스에서 일관된 사용자 경험 제공. - **유지 보수 용이** - 하나의 코드베이스로 여러 디바이스를 지원하므로 관리가 용이. - **SEO 최적화** - 단일 URL 구조로 인해 검색 엔진 최적화에 유리. --- # 반응형 웹의 단점 - **복잡한 디자인 및 개발** - 모든 디바이스를 고려한 설계와 개발이 필요하여 초기 작업량 증가. - **성능 문제** - 잘못 설계된 경우 불필요한 리소스 로드로 성능 저하 가능성이 있음. --- # 미디어 쿼리 (Media Query) - CSS의 기능으로, **디바이스의 특성(예: 화면 너비, 높이, 해상도 등)에 따라 스타일을 조건부로 적용하는 방법** - SCSS에서는 미디어 쿼리를 더욱 간편하게 사용할 수 있는 기능을 제공 - 변수와 중첩 기능을 활용하여 코드의 가독성과 유지 보수성을 높일 수 있음. - 한 곳에서 미디어 쿼리를 관리하므로 스타일의 일관성을 유지하기 쉬움. --- # 미디어 쿼리 (Media Query) - CSS 예시 코드 ```css @media only screen and (max-width: 600px) { body { background-color: lightblue; } } @media only screen and (min-width: 601px) { body { background-color: white; } } ``` --- # 미디어 쿼리 (Media Query) - SCSS 예시 코드 ```scss $breakpoint-mobile: 600px; .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 10px; @media (max-width: $breakpoint-mobile) { padding: 5px; background-color: lightblue; } } ``` --- # References - https://sass-lang.com/ - https://sass-lang.com/documentation/syntax/#scss - https://www.w3schools.com/css/css_rwd_mediaqueries.asp --- # Thank you! ## Made with ♥ by [Soaple](https://www.soaple.io/)