Bundler: Parcel Bundler Ep.1

12 Jan 2023 • TIL

번들러 개요

번들러 (Bundler)

html, css, js를 가지고 웹을 만드는데 이것만으로 만들기에는 비효율적인 면이 있다. 그래서 우리는 typescript, sass, react, svelte 등과 같은 것을 이용해서 코딩을 한다.
이 기능을 이용해서 웹을 만들려면 변환을 해줘야 하는데 이때 우리는 Parcel과 같은 번들러를 사용해서 변환을 해준다.

번들러는 변환하기 위한 패키지를 모아둔 것으로 sass, postcss, typescript 등을 하나하나 설치해서 변환을 해줘야 하는데 이것을 하나로 묶어서 관리하는 것이 번들러이다.

Parcel과 Webpack의 차이점

  • Parcel

    구성 없는 단순한 자동 번들링. 소/중형 프로젝트에 적합하다.

  • Webpack

    매우 꼼꼼한 구성. 중/대형 프로젝트에 적합하다.

정적 파일 연결

  • favicon.ico 파일 만들기

    ICO Converter Link

    해당 링크에서 ico 파일로 만들기를 원하는 이미지를 올려 convert하면 ico 파일을 만들 수 있다.

    만든 파일을 favicon으로 잘 실행되는지 보면 실행되지 않는다. (favicon.ico 파일은 현재 루트경로에 존재

  • favicon 자동으로 dist 폴더에 생성하기

    dist 폴더를 확인하면 우리가 작성했던 파일들이 변환되어져 있는 것을 확인할 수 있다. 그러나 dist 폴더에 favicon 파일은 존재하지 않는다.
    dist 폴더에 파일을 이동하면 간단하게 해결되지만, dist 폴더는 parcel bundler의 개발서버 실행을 통해서 생성되고 삭제되기 때문에 dist 폴더로 파일을 그냥 옮기는 것은 좋지 않다.
    그렇기에 favicon.ico 파일이 dist폴더에 자동으로 실행하게 하는 방법이 가장 옳은 방법이라고 본다.

    • parcel plugin static files copy 패키지

      favicon.ico 파일을 dist 폴더에 생성하기 위해서 패캐지의 도움을 받을 것이다.
      google에 parcel plugin static files copy로 검색하여 해당 사이트에 접속한다.
      parcel-plugin-static-files-copy Link

      # parcel plugin static files copy 설치
npm i -D parcel-plugin-static-files-copy

      package.json 파일 최하단에 해당 코드를 추가한다.

      "staticFiles": {
    "staticPath": "static"
  }

      해당 코드는 parcel-plugin-static-files-copy 패키지를 통해서 static 폴더를 dist 폴더로 복붙해주게 된다.

      루트경로에 static 폴더를 생성해준 후, favicon.ico 파일을 옮겨주면 끝이다.

autoprefixer

설명 사진

  • display: —webkiy-box; 같은 것들은 무엇일까?

    우리가 알고 있는 웹의 표준이 권고안으로 나오기 전에 어느정도 기술 범위가 공개가 된다. 이런 부분들을 브라우저를 제작하는 벤더사(ms, google 등)에서 미리 차용하여 자신들의 브라우저에 동작할 수 있도록 구조를 만들어 둔다.
    하지만 이런 기술들은 아직 표준기술은 아니기 때문에 webkit이나 ms 접두사를 붙여서 사용하는 방식을 제공한다.

    그러나, 일부 유저는 표준기술이 동작하지 않는 구형 브라우저를 사용하는 경우가 존재한다. 이런 경우에 display: flex; 같이 우리가 알고 있는 표준기술은 동작하지 않고, 예전에 접두사가 붙어 시험적으로 적용되었던 flex 기술들이 사용자의 구형 브라우저에서 동작을 할 수 있다.

    특정 브라우저에서 표준 동작이 가능하면 접두사가 붙은 다른 동작들은 작동하지 않게 되어 취소선 표시가 되어 있는 것이다.
    반대로, 표준기술이 동작할 수 없는 브라우저라면 접두사 붙은 코드들이 동작하고 표준 기술에 취소선 표시가 존재하게 된다.

    비교적 신기술이 적용되지 않는 구형 브라우저에서도 최신의 css 기술이 동작할 수 있도록 일종의 보험을 들어두는 방법이 webkit, ms 같은 접두사를 붙여 사용하는 것이다. ms, webkit 등을 공급 업체의 접두사 (Vender Prefix)라고 한다.

    그러나 우리가 공급 업체의 접두사를 각 속성부분에 어떻게 적용할 지 모두 외워서 사용할 수 없다. 이것을 자동으로 붙여주는 패키지가 존재한다. 이 패키지가 autoprefixer이다.

  • autoprefixer 설치

    # postcss 설치
npm i -D postcss
  
# autoprefixer 설치
npm i -D autoprefixer

    package.json 파일 최하단에 추가 코드 작성.

    "browserslist": [
  "> 1%",
  "last 2 versions"
]

    browserslist 옵션은 현재 NPM 프로젝트에서 지원할 브라우저의 범위를 명시하는 용도이다. 이 명시를 autoprefixer 패키지가 활용하게 된다.

    해당 코드의 의미는 browsersList 옵션을 통해서 > 1% 전 세계의 점유율 1퍼센트 이상인 모든 브라우저의 last 2 versions 두개 버전까지는 지원을 하겠다는 의미이다.

    해당 옵션을 꼭 작성을 해줘야 한다. 이 옵션을 통해 설치한 패키지들이 css 속성에 공급업체 접두사를 붙여주는 기능을 구현할 수 있다.

  • .postcssrc.js 생성

    뒤에 rc (Runtime Configuration)가 붙은 파일은 구성 파일을 의미한다. 파일 이름 앞에 마침표를 붙여준다는 것을 구성옵션이라던가 숨김파일을 의미한다.

    해당 이름으로 파일을 만들어 줘야 parcel bundler가 구성옵션으로 찾아서 사용할 수 있다.

    우리가 기존에 내보내기 불러오기를 할때 import, export 키워드를 사용하는데 이 방식을 ESM (ECMA Script module)이라 부른다. ECMA Script는 js의 표준 명칭이고 거기서 사용하는 자바스크립트의 모듈 개념이라는 의미이다.

    node.js에서는 ESM을 지원하지 않고 CommonJS 방식을 제공한다. 그렇기에 node.js에서는 import 대신에 require(), export 대신에 module.exports 를 사용한다.

    .postcssrc.js는 어떤 내용들을 번들러를 통해서 변환하는 용도로 사용하는 것이기 때문에 브라우저에서 동작하는 개념이 아닌, node.js 환경에서 동작하는 개념이다. 그래서 CommonJS 방식을 사용해야 한다.

    // ESM
// CommonJS
  
// import autoprefixer from 'autoprefixer'
const autoprefixer =  require('autoprefixer')
  
// export {
//  plugins: [
//    autoprefixer
//  ]
// }
module.exports = {
  plugins: [
    autoprefixer
  ]
}

    더욱 간단하게 간소화시키기
    autoprefixer를 따로 변수에 담지 않고 plugins 배열 데이터에 바로 담아서 사용한다.

    module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

  • PostCSS plugin autoprefixer requires PostCSS 8. 에러

    지금까지의 과정대로 하고 실행을 해보면 해당 에러가 발생한다.
    postcss의 플러그인 autoprefixer가 필수적으로 postcss의 8버전이 필요하다는 에러이다.

    package.json을 확인하면 autoprefixer은 10버전, postcss는 8버전이다.
    두개의 버전이 달라서 충돌이 일어나게 되었다. (생각보다 흔히 일어난다.) 이 충돌을 해결하는 방법을 둘이 호환이 되도록 버전을 맞춰주는 것이다.
    autoprefixer의 10버전을 9버전으로 낮춰서 postcss의 8버전과 호환되도록 다운그레이드를 진행해준다.

    # autoprefixer 9버전으로 다운그레이드 
npm i -D autoprefixer@9

  • 대부분의 프론트엔드 개발을 할 때 일종의 스타일 보험 형태로 postcss와 autoprefixer을 적용하면 좋다.

BootStrap: CSS 프레임워크 Ep.2

08 Jan 2023 • TIL

NPM 프로젝트 생성

BootStrap을 NPM 프로젝트에서 관리하기

기존에는 link 태그와 script 태그로 손쉽게 bootstrap을 가져왔다. 하지만 해당 방법은 약간의 기능 제한이 존재한다.
외부에서 완성되어져 있는 파일만 연결하는 것이기 때문에 필요에 따라서 세부적으로 정리를 하는 것이 불가능하다.

그렇기에 우리는 NPM으로 관리를 할 것이다.

$ npm init -y
$ npm i -D parcel-bundler

~ package.json 파일 ~

"scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
  },

npm install bootstrap@5.3.0-alpha1

해당 부트스트랩은 개발할때만 사용하는 것이 아니고 실제 브라우저에도 동작해야 하기 때문에 일반 의존성 모드로 설치해야 한다.

~ main.js ~

*import* bootstrap *from* 'bootstrap/dist/js/bootstrap.bundle'

bootstrap의 dist 폴더에서 js 폴더 선택 후 bootstrap.bundle 파일을 선택하면 popper JS 패키지까지 합쳐서 번들로 프로젝트에 적용이 된다.

~ main.scss ~

*@import* "../node_modules/bootstrap/scss/bootstrap.scss";
@import "../node_modules/bootstrap/scss/bootstrap";

두 코드중에 하나를 선택해서 사용하면 된다. (scss 확장자 입력 유무차이 / scss는 확장자를 적지 않아도 동작한다.)

js파일과 scss(css)파일의 차이점

main.js 에서는 node_modules에 설치되어져 있는 bootstrap 폴더로 바로 접근이 가능하다.
그러나, scss(css)는 바로 node_modules 폴더로 접근이 불가능하기 때문에 상대경로로 정확하게 node_modules 먼저 찾아주고 안에 있는 bootstrap으로 접근해야 한다.

NPM 관리의 장점

NPM으로 bootstrap을 가져오는 방법이 더 복잡하고 귀찮다. 그런데도 우리가 NPM을 통해 관리해야 하는 이유는 무엇일까?

해당 방법을 통해 bootstrap을 가져오면 우리가 필요로 하는 기능만을 가져와서 사용할 수 있다.
그리고 bootstrap에서 제공하는 기본적인 테마들을 우리가 원하는 대로 커스터마이징을 할 수 있다.

테마 색상 커스터마이징

Color Link
색상 커스터마이징을 하기 위해서 필수적으로 불러와야 하는 코드이다.

// required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: (
  "primary":    $primary,
  "secondary":  yellowgreen,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

theme-colors는 bootstrap에서 지정해 놓은 색상들이다. 해당 테마의 색상을 원하는 형태로 변경이 가능하다

성능 최적화(트리 쉐이킹)

main.scss

특정한 스타일만 가져와서 적용할 수 있는데 이게 성능적으로는 가장 최적화된 방법이긴 하지만 아직은 해당 기능이 성숙도가 떨어져 스타일 에러가 발생할 수 있다.
그렇기 때문에 그냥 bootstrap.scss 파일을 불러오는 것이 더 안전하다.
해당 파일은 스타일 내용만 가지고 있기 때문에 모든 스타일을 불러오는 것이 성능적으로 크게 바뀌는 것이 없기 때문이다.

@import "../node_modules/bootstrap/scss/bootstrap";
@import "../node_modules/bootstrap/scss/dropdown";

main.js

자바스크립트에서는 개별적으로 가지고 오는 것이 큰 성능적인 차이를 가질 수 있다.
bootstrap.bundle은 모든 자바스크립트 기능을 불러오는 파일을 사용하는 것이기 때문이다.

기능 하나만 불러오는 것은 해당 기능만을 가져오기 때문에 bootstrap이라는 단어로 받아줄 필요가 없다. 따라서 해당 기능의 이름으로 받아준다.
추가로, 개별적인 기능에서 가지고 오는 내용은 자바스크립트의 기본 내보내기로 나온다.

해당 기능을 불러왔으면 초기화를 해줘야 한다. 가져온 기능의 bootstrap 홈페이지로 들어가서 Via JavaScript 부분을 찾는다. 해당 부분에서 초기화되는 코드를 복사해서 붙히면 된다.

const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))

Via JavaScript에서 복사해온 코드는 마지막 new 키워드 뒤에 bootstrap이 존재하는데 해당 코드는 삭제한다. 개별적인 기능만 불러와서 사용하기 때문에 해당 객체 데이터는 변수로 사용이 불가능하다.

import Dropdown from 'bootstrap/js/dist/dropdown'

const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new Dropdown(dropdownToggleEl)

해당 코드만 작성해서는 동작하지 않을 것이다.
bootstrap.bundle에 popperjs 패키지가 같이 존재했기 때문이다. 해당 기능은 popperjs가 필요하기에 따로 해당 패키지를 설치해줘야 한다.

npm i @popperjs/core

패키지 설치 후 package.json 파일의 dependecies에 popperjs가 잘 설치가 되었다면 다시 서버를 열어 확인해보면 잘 작동하는 것을 볼 수 있다.

+ Modal
modal의 초기화 코드의 경우 options가 붙는 것을 볼 수 있는데, options는 모달을 생성할 때 기본 옵션을 추가적으로 붙여줄 수 있다.
예시로, backdrop의 경우 default가 ture인데 이걸 static으로 변경하면 배경을 선택해도 꺼지지 않도록 만든다.

new Modal('#exampleModal', {
  backdrop:'static'
})

초기화 컴포넌트

초기화를 해야하는 컴포넌트와 안해도 되는 컴포넌트를 어떻게 구분할 수 있을까?

bootstrap 홈페이지에서 해당 컴포넌트 페이지에 Via JavaScript가 존재하지 않는다면 초기화를 하지 않아도 되는 컴포넌트라고 보면 된다.
단, method를 들어가면 초기화 코드가 보일 수 있는데 해당 초기화의 경우에는 어떤 기능을 사용하기 위해서 필요한 초기화이기 때문에 무조건 초기화를 진행하지 않아도 된다. (해당 기능을 사용하고 싶을 때만 초기화를 하면 된다.)

BootStrap: CSS 프레임워크 Ep.1

08 Jan 2023 • TIL

Bootstrap

CDN 프로젝트 생성

CSS

jsdelivr에서 bootstrap css 파일을 원격으로 제공한다. 해당 코드를 복사해서 붙여 넣어주기만 하면 된다.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

JS

  • bundle

    Bootstrap JS는 외부에서 Popper JS패키지를 가져와서 활용하고 있다.
    bundle은 Popper 패키지와 bootstrap을 묶어서 파일을 제공한다.

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

  • Separate

    만약, 프로젝트에서 이미 Popper JS패키지를 사용하고 있다면 이중으로 사용할 필요가 없다.
    그럴때, Popper 패키지와 묶이지 않은 별도의 Bootstrap 파일을 제공한다.

    위와 같이 Popper JS패키지와 Bootstrap을 따로 호출할 때, Poper JS파일을 먼저 호출해야 한다.

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>

Popper

Popper JS패키지는 팝업을 조금 더 쉽게 만들어 줄 수 있도록 도와준다.
Poper Home Link

버튼과 버튼 그룹 (button and botton group)

Button

다양한 색상의 버튼
Buttons Link

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

Button Group

버튼들을 btn-group 클래스에 묶어서 넣으면 하나의 버튼 일렬로 출력된다.
Button group Link

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

드롭다운과 리스트 (Dropdown and list)

Dropdowns Link

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

List Group

List group Link

<ul class="list-group">
  <li class="list-group-item active" aria-current="true">An active item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

aria-current는 웹 접근성과 관련된 것으로 실제 기능 동작과는 연관되지 않은 부분이니 꼭 필요한 것이 아니라면 무시하면 된다.

disabled 클래스를 추가하면 해당 항목을 비활성화 될 수 있게 만들 수 있다.

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    The current link item
  </a>
  <a href="#" class="list-group-item list-group-item-action">A second link item</a>
  <a href="#" class="list-group-item list-group-item-action">A third link item</a>
  <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
  <a class="list-group-item list-group-item-action disabled">A disabled link item</a>
</div>

클래스에 list-group-item-action을 추가 작성하게 되면 hover나 disabled를 active 상태로 추가할 수 있다.
즉, 마우스를 올렸을 때 동작 효과를 넣은 것이다.

양식 (Forms)

Form

Forms Link

사용자에게 데이터를 얻는 양식을 말한다.
boostrap에서 제공하는 양식을 통해 사용자에게 조금 더 깔끔한 형태로 데이터를 얻게 도움 받을 수 있다.

  • form control

    Sizing
    데이터를 입력받는 양식의 사이즈를 조절할 수 있다.

    Disabled
    해당 속성을 통해서 입력받는 양식을 비활성화시킬 수 있다.

    Readonly
    해당 속성을 통해서 읽기 전용 양식으로 만들 수 있다.
    참고로, disabled랑 매우 유사하다. 그래도 약간 차이를 두고 사용하는 게 좋다.

    File input
    버튼을 클릭해서 실제로 파일을 추가하고 삽입된 사항을 확인할 수 있는 양식도 존재한다. (매우 유용하게 사용할 듯)

  • input group

    다양한 input 태그를 사용자가 보고 사용하기 편하도록 정리해 두었다.

모달 (Modal)

해당 코드로 모달 창 내부에서 원하는 부분에 focusing 되도록 만들어준다.
Modal Link

const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {
  myInput.focus()
})

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
  • button 태그의 data-bs-target 속성으로 원하는 모달의 id값을 입력하면, 버튼 클릭시 해당 모달창을 띄운다.
  • modal-header에는 모달 창 내부의 header 내용
  • modal-body는 내가 나타내고자 하는 핵심 내용
  • modal-footer에는 주로 원하는 기능의 버튼 등

Via JavaScript
오른쪽 사이드에 해당 목록을 클릭하면 모달에서 사용할 수 있는 자바스크립트의 기본적인 코드들을 확인할 수 있다.
ex) show, hide …

Events
다양한 이벤트를 통해서 모달의 상태를 제어할 수 있다.

툴팁 (Tooltips)

Tooltips라는 컴포넌트는 성능상의 이유 때문에 포함되어 있지 않아, 직접적으로 초기화를 해줘야 한다.
Tooltips는 단일요소, 다수요소가 아니고 굉장히 많은 부분에서 사용될 수 있기 때문에 해당 부분을 인지해서 따로 정확하게 초기화를 해줘야지만 동작한다.

Tooltip은 팝업으로 설명글이 나오는 것을 말한다.
방향을 원하는 방향으로 설정이 가능하다.
Tooltips Link

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Tooltip on left">
  Tooltip on left
</button>

Tooltip을 사용하기 위해서는 초기화가 필수!!이다.

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

SCSS: SCSS Ep.6

21 Dec 2022 • TIL

데이터 종류

$number: 1;
$string: bold;
$color: red;
$boolean: true;
$null: null;
$list: royalblue, orange, yellow;
$map: (
  r: royalblue,
  o: orange,
  y: yellow
);

  • 숫자 데이터

    단순한 숫자만이 아닌 px, em 등의 단위가 붙은 것들도 숫자 데이터에 포함된다.

  • 문자 데이터

    bold, relative, “ 따옴표 ” 등이 문자 데이터이다.
    단, red나 blue같은 실제 css에서 적용되는 문자들은 문자 데이터가 아니다.

  • 색상 데이터

    red, blue, #FFFF00, rgba(0,0,0,.1) 등 색상을 나타나게 하는 것들을 색상데이터라고 한다.

  • boolean

    true, false 만이 boolean 데이터로, 참과 거짓을 말한다.

  • null

    아무것도 의미하지 않는 빈 데이터를 말한다.

  • list

    자바스크립트의 배열 데이터와 유사한 데이터이다.
    데이터들을 쉼표로 구분해서 순서대로 정렬한 것이 list이다.

  • map

    자바스크립트의 객체 데이터와 유사하다.
    기본적으로 key, value 형태로 구성되어 있다.
    다른점은, 자바스크립트이 객체 데이터는 중괄호로 나타내는 반면에 map 데이터는 소괄호로 나타낸다.

반복문 @each

list와 map 데이터를 다루기 위해서 @each 키워드를 사용할 수 있다.
해당 키워드는 list와 map 데이터의 반복문을 만들어 낼 수 있다.

$list: royalblue, orange, yellow;
$map: (
  r: royalblue,
  o: orange,
  y: yellow
);
  • list 데이터 @each 반복 
    @each $c in $list {
  .box {
    color: $c;
  }
}

    @each 키워드를 통해서 $list 변수안에 있는 데이터들을 반복적으로 c변수에 담아서 중괄호 안에서 처리한다는 의미이다.

    .box {
  color: royalblue;
}
  
.box {
  color: orange;
}
  
.box {
  color: yellow;
}
  • map 데이터 @each 반복 
    @each $k, $v in $map {
  .box-#{$k} {
    color: $v;
  }
}

    list 데이터와 구조는 유사하다. 다른 점은 map 데이터는 변수 부분을 key, value 형태로 만들 수 있다는 것이다.

    .box-r {
  color: royalblue;
}
  
.box-o {
  color: orange;
}
  
.box-y {
  color: yellow;
}

재활용 @content

@mixin left-top {
    position: absolute;
    top: 0;
    left: 0;
    @content;
}
.container {
    width: 100px;
    height: 100px;
    @include left-top;
}
.box {
    width: 200px;
    height: 300px;
    @include left-top {
        bottom: 0;
        right: 0;
        margin: auto;
    }
}

@content의 역할

@mixin을 통해서 left-top을 재활용하고 있다.
box 클래스에서도 left-top을 재활용하고 있는데, 이때 중괄호를 열어서 추가로 코드를 작성해 주었다.
재활용 코드에 내용을 추가적으로 넣을 수 있도록 도와주는 것이 @content 키워드이다.

재활용하고 있는 코드 내부에 @content 키워드를 작성해주면 해당 코드를 재활용하고 있는 곳에서 중괄호를 열어 추가적으로 코드를 작성할 수 있게 해준다.

즉, 중괄호를 열어서 새롭게 작성한 코드가 @content 안으로 들어간 것이라고 보면 된다.

.container {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
}

.box {
  width: 200px;
  height: 300px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

SCSS: SCSS Ep.5

20 Dec 2022 • TIL

반복문

@for $i from 1 through 10 {
	.box:nth-child() {
		width: 100px;
	}
}
  • ‘@for’을 통해서 반복문을 시작한다.
  • 내부에서 사용할 반복 변수는 통상적으로 ‘$i’로 사용한다.
  • through 앞에는 시작할 숫자, 뒤에는 끝날 숫자를 작성한다.
    1 through 10이라면 1부터 시작해서 10까지 반복된다. 총 10번 반복.
    css는 js과 달리 제로 베이스가 아니기 때문에 1부터 시작을 해준다.
@for $i from 1 through 10 {
	.box:nth-child(#{$i}) {
		width: 100px * $i;
	}
}

단순하게 박스 클래스만 반복하는 것은 유용하게 사용이 불가능하기 때문에 nth-child를 추가하여 유용하게 사용할 수 있도록 해본다.

  • nth-child() 가상 클래스 추가하기
    소괄호에 몇번째인지 표시할 수 있게 된다.
  • .box:nth-child()는 css 선택자로, i라는 변수가 가지고 있는 숫자를 그대로 명시할 수 가 없다.
  • 문자 보간 방식을 통해 숫자를 명시할 수 있도록 한다.
    JS에서 백틱기호 사이에 문자 데이터에다가 자바스크립트 데이터를 채우기 위해서 보간이라는 특수한 문법 사용했었다.
    SCSS 또한 보간을 지원한다.
  • SCSS에서 보간은 ‘${ }’이 아닌 ‘#{ }’을 통해서 괄호 안에 데이터를 채워넣는 방식이다.
  • 추가로, 연산할때에는 보간을 사용할 필요가 없다!
    위에서 보간처리를 한 것은 값을 적는 부분이 아니기 때문에 해준 것이다.
    연산에서는 값을 작성하기 때문에 보간을 할 필요가 없다.

함수

@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@function ratio($size, $ratio) {
  @return $ratio * $size;
}

.box {
  $width: 100px;
  width: $width;
  height: ratio($width, 1/2);
  @include center
}

.box {
  width: 100px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
  • @function 키워드는 지정한 이름(ratio)의 함수를 만들어 낸다.
  • @return 키워드는 해당하는 값($ratio * $size)을 함수 밖으로 내보내는 역할을 한다.

  • mixin과 function 키워드의 차이점

    mixin은 css코드의 모음집이라고 보면 된다.
    css의 속성과 값을 나열해서 재활용이 가능한 부분들을 재활용하기 위해서 사용하는 용도이다.

    function은 어떤 값을 따로 연산을 해서 반환된 결과로 사용하기 위해서 만드는 용도이다.
    function 키워드가 우리가 익히 아는 JS의 함수 개념과 훨씬 유사하다.

색상 내장 함수

<div class="box"></div>
<div class="box built-in"></div>

.box {
  $color: royalblue;
  width: 200px;
  height: 100px;
  margin: 20px;
  border-radius: 10px;
  background-color: $color;
  &.built-in {
    background-color: $color;
  }
}

  • mix()

    첫번째 인수의 색상과 두번째 인수의 색상을 섞어서 새로운 색상을 만들어 낸다.

    .box {
  $color: royalblue;
  background-color: $color;
  &.built-in {
    background-color: mix($color, red);
  }
}

  • lighten()

    첫번째 인수에는 색상을, 두번째 인수에는 수치(%)를 넣는다.
    첫번째 인수의 색상이 해당 수치만큼 밝아진다.

    .box {
  $color: royalblue;
  background-color: $color;
  &.built-in {
    background-color: lighten($color, 10%);
  }
}

  • darken()

    첫번째 인수에는 색상을, 두번째 인수에는 수치(%)를 넣는다.
    첫번째 인수의 색상이 해당 수치만큼 어두워진다.

    .box {
  $color: royalblue;
  background-color: $color;
  &.built-in {
    background-color: darken($color, 10%);
  }
}

    • 사용 예제

      hover시 박스의 색상을 약간 더 어둡게 변경하고 싶을 때 사용하기 유용하다.
      특히, 버튼을 만들 때 굉장히 유용하게 사용이 가능하다.

      .box {
  $color: royalblue;
  background-color: $color;
  &:hover {
    background-color: darken($color, 10%);
  }
}

  • saturate()

    첫번째 인수에 해당하는 색상을 두번째 인수의 수치만큼 채도를 높여준다.

    .box {
  $color: royalblue;
  background-color: $color;
  &.built-in {
    background-color: saturate($color, 60%);
  }
}

  • desaturate()

    첫번째 인수에 해당하는 색상을 두번째 인수의 수치만큼 채도를 낮춰준다.

    .box {
  $color: royalblue;
  background-color: $color;
  &.built-in {
    background-color: desaturate($color, 60%);
  }
}

  • grayscale()

    인수의 색상을 회색으로 변경시켜준다. (두번째 인수는 필요하지 않다.)

    .box {
  $color: royalblue;
  background-color: $color;
  &.built-in {
    background-color: grayscale($color);
  }
}

  • invert()

    인수의 색상을 반전 시켜준다. (두번째 인수는 필요하지 않다.)

    .box {
  $color: royalblue;
  background-color: $color;
  &.built-in {
    background-color: invert($color);
  }
}

  • rgba()

    첫번째 인수로는 원하는 색상, 두번째 인수로는 색상의 투명도를 넣어준다.
    기존 css에서는rgba(0,0,0, .5) 형식으로 작성해야 했다.
    css에서는 쓸대없이 길어서 불편했던 것이 인수 2개만 넣어주면 되는 것으로 간편해 졌기에 많이 사용하게 된다.

    .box {
  $color: royalblue;
  background-color: $color;
  &.built-in {
    background-color: rgba($color, .5);
  }
}

가져오기

@import

@import url("./sub.scss");

$color: royalblue;

.container {
  h1 {
    color: $color;
  }
}

css의 선언방식에서 import 키워드는 css가 css를 가져올 수 있도록 해준다.
url 함수를 통해서 연결하기를 원하는 scss 파일의 경로를 넣어준다.

  • 더 간편하게 줄이기 (SCSS)

    scss에서는 url 함수를 사용하지 않아도 해당하는 내용이 정상적으로 작동한다.

    @import "./sub.scss";

    추가로, scss에서는 확장자를 명시하지 않아도 작동한다.

    @import "./sub";

  • 쉼표를 통해서 다른 파일도 가져올 수 있다.

    @import "./sub", "./sub2";