๐ŸŒˆW2_DAY_6-(2) SCSS

RoRAยท2023๋…„ 3์›” 20์ผ
1

TECHIT_BlockChain_School_3

๋ชฉ๋ก ๋ณด๊ธฐ
3/9
post-thumbnail

๐Ÿช‚ 2023. 03. 20. Monday_ scss ์‰ฌ์šด๋“ฏ ์‰ฝ์ง€ ์•Š์€ ๋„ˆ. . . ๐Ÿช‚


โœ… SCSS

Intro

์•ˆ๋…•ํ•˜์„ธ์š”!๐Ÿ˜
์˜ค๋Š˜์€ TECHIT-๋ธ”๋ก์ฒด์ธ ์Šค์ฟจ 3๊ธฐ์˜ ์—ฌ์„ฏ ๋ฒˆ์งธ ์‹œ๊ฐ„์ž…๋‹ˆ๋‹ค ~!~!~!!!๐Ÿ‘๐Ÿ‘๐Ÿ‘

* ์ด ๊ณณ์—์„œ๋Š” ๋‹น์ผ์— ๋ฐฐ์šด ๋‚ด์šฉ์„ ๋ณต์Šตํ•˜๋Š” ์šฉ๋„๋กœ ๊ธ€์„ ์ž‘์„ฑํ•˜๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

* ์˜ค๋Š˜์€ 'SCSS ํ™˜๊ฒฝ์„ธํŒ…' ๋‚ด์šฉ์„ ๋ณต์Šตํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.
โ €โ €โ €โ €
โ €โ €


๐Ÿ‘‰SCSS ํ™˜๊ฒฝ ์„ค์ •

/*
	์ฃผ์˜ํ• ์ 
    : ๋ชจ๋“  ํ„ฐ๋ฏธ๋„์—์„œ ๋™์ž‘ํ•˜์ง€ ์•Š์„ ์ˆ˜ ์žˆ์Œ => ๋˜๋„๋ก cmdํ„ฐ๋ฏธ๋„์—์„œ ์ž‘์—…ํ•˜๊ธฐ!!!
    : ์ „์ฒ˜๋ฆฌ๊ธฐ ํŒŒ์ผ์ด ์žˆ๋Š” ๊ณณ์—์„œ!!! ์‹คํ–‰ ์ฝ”๋“œ ์ž…๋ ฅํ•˜๊ธฐ(step3)

*/

//step1. VS Code ํ„ฐ๋ฏธ๋„ ์ฐฝ์—์„œ ์ž…๋ ฅ
	
    ๐Ÿ”ธnpm install -g sass
    
    
//step2. sass๊ฐ€ ์„ค์น˜๋˜์–ด๋Š”์ง€ ํ™•์ธํ•˜๊ธฐ
	
    ๐Ÿ”ธsass --version
    
//ste3. index.htmlํŒŒ์ผ๊ณผ input.scssํŒŒ์ผ ์ƒ์„ฑ
    
    
//step4. index.html ํŒŒ์ผ ์ƒ์„ฑ ํ›„ ์ „์ฒ˜๋ฆฌ๊ธฐ(ํŒŒ์ผ) ์‹คํ–‰ํ•˜๊ธฐ
    
    ๐Ÿ”ธsass --watch input.scss style.css
    ๐Ÿ”ธsass --watch (์ƒ์„ฑํ•œ scssํŒŒ์ผ๋ช…) (์ƒ์„ฑํ•  cssํŒŒ์ผ๋ช…)
    
//step5. style.css ํŒŒ์ผ ์ž๋™ ์ƒ์„ฑ๋Œ



๐Ÿ‘‰๊ฐ„๋‹จํ•œ ์˜ˆ์ œ ์‹ค์Šต !

โœ”๏ธindex.html

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <h1>Hello, SCSS!</h1>
    </body>
</html>

โœ”๏ธinput.scss

//responsive || responsive.scss ๋กœ ์‚ฌ์šฉ๊ฐ€๋Šฅ
@import "responsive.scss";

body {
    margin: 0;

    background-color: lightpink;

    @include responsive("tablet") {
        background-color: red; }
     
    @include responsive("laptop") {
        background-color: blue; }
        
    @include responsive("pc") {
        background-color: deeppink; }
}
h1 {
    @include responsive("tablet") {
        color: white; }
}

โœ”๏ธresponsive.scss

$tablet: 768px;
$laptop: 1024px;
$pc: 1280px;

// ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ๋ฅผ ํ™œ์šฉํ•ด ๋ฐค์‘ํ˜• ์›น ๋””์ž์ธ ํ•˜๊ธฐ!
@mixin responsive($device) {

    @if $device == "tablet" {
        @media (min-width: $tablet) {
            @content; }
    }
    @else if $device == "laptop" {
        @media (min-width: $laptop) {
            @content; }
    }
    @else if $device == "pc" {
        @media (min-width: $pc) {
            @content; }
    }
}



๐Ÿ‘‰์˜ˆ์ œ ๊ฒฐ๊ณผ๋ฌผ

โœ”๏ธ ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ ๊ธฐ๋Šฅ์„ ํ™œ์šฉํ•ด ๋ฐ˜์‘ํ˜• ์›น๋””์ž์ธ์„ ํ•˜์˜€๋‹ค.
โœ”๏ธ ๋ธŒ๋ผ์šฐ์ € ์ฐฝ์˜ ์ตœ์†Œ ๋„ˆ๋น„๋ฅผ ์„ค์ •ํ•ด, ์ฐฝ์˜ ํฌ๊ธฐ๊ฐ€ ๋ณ€ํ™”ํ•  ๋•Œ ๋””์ž์ธ์ด ๋ณ€๊ฒฝ๋˜๋„๋ก ์„ค์ •ํ•˜์˜€๋‹ค.


โ €โ €โ €


๐Ÿ‘‰ ์˜ค๋Š˜ ํ™œ์šฉํ•œ SCSS ์ฃผ์š” ๊ธฐ๋Šฅ ์ •๋ฆฌํ•˜๊ธฐ!

โœ”๏ธ$(๋ณ€์ˆ˜)
: ๋ฐ˜๋ณต์ ์œผ๋กœ ์‚ฌ์šฉํ•  ๊ฐ’์„ ๋ณ€์ˆ˜๋กœ ์ €์žฅํ•˜์—ฌ ํŽธ๋ฆฌํ•˜๊ฒŒ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋‹ค.

//์„ ์–ธ๋œ ๋ธ”๋ก ๋‚ด์—์„œ๋งŒ ํšจ๋ ฅ์ด ์žˆ๋‹ค.
๐Ÿ”ธ $tablet: 768px;

โ €โ €โ €
โœ”๏ธ Mixin
: Mixin์„ ํ™œ์šฉํ•ด ์ง€์ •ํ•œ ์Šคํƒ€์ผ์„ ์žฌ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
: 2๊ฐœ์˜ .scss ํŒŒ์ผ ์—ฐ๊ฒฐํ•œ ํ›„ ๋ชจ๋“ˆ ์‚ฌ์šฉํ•˜๊ธฐ !

/* ์‚ฌ์šฉ๋ฒ•
	
	๐Ÿ”ธ์„ ์–ธ
		@mixin mixin๋ช…(์ „๋‹ฌ ๋ฐ›์„ ์ธ์ž) { } 
        
	๐Ÿ”ธ์ ์šฉ
		@include mixin๋ช…(์ „๋‹ฌํ•  ์ธ์ž) {}
*/

โ €โ €โ €
โœ”๏ธ @if, @else if
: ์กฐ๊ฑด์— ๋”ฐ๋ผ ๋ถ„๊ธฐ ์ฒ˜๋ฆฌ๊ฐ€ ๊ฐ€๋Šฅํ•˜๋‹ค!

	@if ๋ณ€์ˆ˜ (์กฐ๊ฑด๋ฌธ) {
       ์กฐ๊ฑด๋งŒ์กฑ์‹œ ์‘๋‹ต ๊ตฌ๋ฌธ
    }
    
    @else if ๋ณ€์ˆ˜ (์กฐ๊ฑด๋ฌธ) {
        ์กฐ๊ฑด๋งŒ์กฑ์‹œ ์‘๋‹ต ๊ตฌ๋ฌธ
    }
    
    @else if ๋ณ€์ˆ˜ (์กฐ๊ฑด๋ฌธ) {
        ์กฐ๊ฑด๋งŒ์กฑ์‹œ ์‘๋‹ต ๊ตฌ๋ฌธ
    }

โ €โ €โ €


๐Ÿ“Œ DAY-6-(2)

scss ์ฒ˜์Œ ๋ฐฐ์›Œ๋ดค๋‹ค. ์ด๊ฒŒ ๋ญ์ง€ ? ใ…‹ใ…‹ใ…‹ใ…‹ใ…‹ใ…‹ใ…‹ใ…‹ใ…‹์ „์ฒ˜๋ฆฌ ๊ธฐ๋Šฅ์ด๋ผ stylesheet๋ณด๋‹ค๋Š” ์ค‘๊ฐ„ ์ค‘๊ฐ„์— ํŽธ์ง‘ํ•˜๋‹ค ์ž˜ ๋ชป.. ๋˜๋ฉด..๋˜๋Œ๋ฆฌ๊ธฐ๋Š” ์‰ฌ์šธ๊ฒƒ ๊ฐ™๋‹ค! ๋งˆ์ง€๋ง‰ ๋‚จ์€ 5๋ถ„๋™์•ˆ ์—„์ฒญ๋‚œ ์Šคํ”ผ๋“œ๋กœ ์ง„๋„๋ฅผ ๋‚˜๊ฐ€์„œ ๋ฉ˜๋ถ•์ด ์™€๋ฒ„๋ ธ๋˜ ํ•˜๋ฃจใ…‹ใ…‹ใ…‹ใ…‹ใ…‹ใ…‹ใ…‹
๋‚ด์ผ๋„ ํ™”์ดํŒ…! ์•„์ž์•„์ž์•„์ž~~!~!~!~!๐Ÿ™Œ

2๊ฐœ์˜ ๋Œ“๊ธ€

comment-user-thumbnail
2023๋…„ 3์›” 24์ผ

๊บพ์˜€๋Š”๋ฐ๋„ ๊ทธ๋ƒฅ ํ•˜๋Š” ๋งˆ์Œใ…‹ใ…‹ใ…‹ ์ข‹๋„ค์š”! ์ฃผ์—ฐ๋‹˜ TIL ์ตœ๊ณ ..

1๊ฐœ์˜ ๋‹ต๊ธ€