멋사 프론트엔드 스쿨 1기 - 19일차

jiyeong0909·2021년 11월 25일
0
post-thumbnail

오늘은 sass 진도 끝난 날..!! 2일컷.. 실화냐궁...
빠른 진도에 조건문, 반복문, 함수 나오니깐 멘탈의 붕괴...!! 멘붕@_@
그래서 평소같았으면 수업에서 배운 코드를 복습했겠지만.. 오늘은 코드 복습이 문제가 아닌거 같아서..(기본 개념조차 이해가 되지 않았다)

교안 출처에 해당하는 책을 읽기로 하였다. [ 40 minutes Basic Sass / 박나연 지음 ] 이것 역시.. 제코배에서 출판한 책!! 대단해..제코배 최고..!!

40분 만에 끝난다는 제목과 달리 블로그에 알아야 할 부분 정리하면서 읽었더니 거의 5-6시간 걸린 듯... 그래도 읽고 나니 개념이 조금은 잡히는 것 같다.

할 공부는 많은데.. sass도 수업시간에 했던 코드랑 같이 보면서 한번 더 공부해야겠다!! 특히 조건문부터는 예제를 봐야 이해를 할 수 있을 거같다.


sass 정리

중첩(Nesting)

  • 속성을 중첩할 때는 콜론( : )을 사용한다.
  • ampersand(&)는 상위에 있는 부모선택자를 가리키며, 이를 이용하여 가상요소, 가상클래스, 셀렉터 등을 참조할 수 있다.
  • ' @at-root ' 를 사용하여 중첩에서 벗어날 수 있으며, 중첩에서 벗어나고 싶은 선택자 앞에 작성한다.

변수(Variable)

  • 변수를 생성할 때는 ' $ ' 기호를 사용한다.
  • 변수 타입
    1. numbers : 1, .82, 20px, 2em 등
    2. strings : "./images/a.png", bold, left, uppercase 등
    3. colors : green, #FFF, rgba(255,0,0,0.5) 등
    4. booleans : true, false
    5. null

Lists

  • lists에 들어있는 값의 index는 0부터 시작하지 않고, 1부터 시작한다.
  • lists 관련 내장함수
    1. append(list, value, [separator]) : lists의 값을 추가
    2. index(list, value) : lists의 값에 대한 인덱스를 리턴
    3. nth(list, n) : lists의 인덱스에 해당하는 값을 리턴

Maps

  • ( ) 괄호 안에 키:값의 형태로 저장하여 사용한다.
  • 키와 값을 정의할 때는, 키는 고유해야 하지만 키에 해당하는 값은 중복이 가능하다. 변수를 각각 선언하는 대신, 관련있는 변수들을 한번에 모아 maps로 만들어서 선언할 수 있다.
  • map 관련 내장함수
    1. map-get(map, key) : 키에 해당하는 값을 리턴
    2. map-keys(map) : map에 들어있는 키(key) 전부를 리턴
    3. map-values(map) : map에 들어있는 값(value) 전부를 리턴

변수의 Scope (변수의 유효범위)

  • 변수에는 지역변수와 전역변수가 있다.
    1. 지역변수
      : 중괄호{ } 안에서 사용되며, 하위 단계에 있는 중괄호에서도 사용할 수 있다.
      : 다른 사용자에 의해 로직이 변경되는 것을 방지하기도 하며, 이에 따라 전역변수보다 먼저 실행되는 것이 좋다.
    2. 전역변수
      : 가장 윗부분에 정의하며, 지역변수가 실행되지 않았을 경우 전역변수가 선언되는 편이다.
    3. 참고
      : ' !global ' 을 사용하여 지역변수(local)를 전역변수(global)로 만들어 사용할 수도 있다.

Mixin

  • 코드를 재사용하기 위해 만들어진 기능으로, 선택자들 사이에서 반복되고 있는 코드들은 mixin을 사용하여 코드 반복을 줄인다.
  • 앞에 @mixin [이름(매개변수)] 을 쓰고 이름을 정해준 후 중괄호 { } 안에 중복되는 코드를 넣어준다.
  • @include [이름(인수)] 를 사용하여 스타일 하고자 하는 요소에 포함시키면 된다.
  • @content 을 사용하면 원하는 부분에 스타일을 추가하여 전달할 수 있다.
  • 매개변수를 가지지 않더라도 만들 수 있으며, 전달인자가 없는 믹스인에서는 @include 키워드에다가 mixin의 이름을 넣어주면 된다.
    ex) a { @include text-style; }

Extend

  • 연관 있는 요소들끼리 스타일 코드가 중복된 경우, 아래와 같이 방법으로 사용할 수 있다.
    (%선택자는 css로 컴파일 되지 않으며, @extend를 사용하여 앞서 %placeholder 스타일 블럭을 불러온다.)
  1. class 이름 가져오기 -> .comment-user { @extend .test-user; }
  2. placeholder(%) 사용(권장) -> %base-button { width: 133px; }
  • mixin은 관계없는 선택자에서 조금 다른 스타일을 적용할 때 사용하는 것이지만, extend는 관계 있는 선택자들의 동일한 소스코드 적용시 사용된다는 점에서 구별된다.

조건문

  • 조건에 따라 스타일을 주고자 할 때, if와 else문을 사용하는데 if문 하나만 사용하는 경우도 있고, else, else if문과 함께 사용하는 경우도 있다.
  1. @if : 괄호 없이 true나 false를 반환할 수 있는 조건문을 작성 / 조건이 참일 때 실행될 구문
  2. @else : if문처럼 조건문이 필요하지 않으며, if문에서 걸었던 조건이 false가 나오면 else문의 코드가 실행됨.
  3. @else if : if문으로 부족할 때, 즉 여러 개의 조건문을 사용해야 할 때 사용함. if문의 조건에서 false가 나오면 else if문으로 넘어가서 조건에 대해 true인지 false인지 판단함.
    true인 경우 else if문 내의 코드를 실행하고, false라면 그 다움 조건문(else or else if)로 넘어감.

반복문
1. @for : 정의한 횟수만큼 코드 실행을 반복하며, 'nth-' 선택자를 사용하는 경우 유용하다.
▷ @for($변수) from (시작: 이상) through(끝: 이하)
2. @each : lists나 맵의 각각의 요소마다 코드를 실행해서 스타일을 적용할 수 있게 한다.
▷ @each($변수) in (리스트나 맵)
3. @while : 특정 조건에 충족될 때까지 코드를 무한 반복하며, 조건이 만날 때 while문을 빠져나오게 된다. ( while문을 빠져나오는 조건을 만드는 경우는 거의 없음. )
▷ @while 조건

function

  • @funtion 키워드를 사용하여 함수를 생성하고, 함수이름() 형태로 함수를 호출하고 실행함. 함수 안에서는 @return 을 이용하여 값을 반환한다.
  • 함수는 Mixin(스타일 코드를 반환)과 비슷하지만, function은 @return 키워드를 사용해서 값 자체를 반환한다는 점에서 차이가 있다.
    ▷ @function 함수이름($매개변수) { @return 값 }

★ (참고자료) 40 minutes Basic Sass / 박나연 지음


어찌어찌 또 지나간 하루! 이제 금요일이다. 하루만 버티자!!!

★ 긍정의 한줄

인내는 어떤 실력보다 강하다. - Ben Hogan -

인내를 갖고, 꾸준히 하자. 잘하고 있다. 빠샤빠샤!!

profile
코딩코딩

0개의 댓글