Skip to content

0523.md

Latest commit

 

History

History
84 lines (67 loc) · 2.71 KB

0523.md

File metadata and controls

84 lines (67 loc) · 2.71 KB

npm 설치

  • (전역설치) npm install --global node-sass
  • (로컬설치) npm install --save-dev node-sass

Package.json

DevDependencies

개발 단계에서 필요한 npm 의존성 관리

"devDependencies": {
    "node-sass": "^4.5.0"
  }

참조링크

npm-run-scripts

사용자 정의 스크립트

"scripts": {
    "sass": "node-sass --output-style expanded --source-map true sass/ -o css/",
    "watch": "npm run sass -- -w"
}

참조링크

Git ignore

  • git 명령어 실행 시 제외할 파일/폴더 설정
  • OS, IDEs, Programming languages에 따라 여러가지 패턴 적용 참조링크

Sass

내장함수

Color Function

  • 색상값을 컨트롤 할 수 있는 Sass 내장 함수
    • RGB : rgb, rgba, red, green, blue, mix
    • HSL : hsl, hsla, hue, saturation, lightness, lighten, darken, saturate, grayscale
    • Opacity : alpha, rgba, opacity, transperentize
    • Other (adjust, scale, change, )

참조링크

사용자 정의 함수 (@function)

  • 동일하거나 유사한 로직 실행 후 결과값을 갖는 계산식(또는 스크립트)
  • 함수 수행 후 리턴 값(@return) 반환
@function remy($pxsize[:Default value]) {
    @return ($pxsize/16)+rem;
}

h1 { font-size: remy(32);}

*[:Default value] : 인자값이 전달되지 않은 경우 사용할 기본 값

  • 추가 참고자료 : CSS 방법론 - smacss

Photoshop

상태값에 따른 화면 전환

  • Window > Layer Comps

이미지 자르기

  1. 저장하고자 하는 레이어를 새창으로 복제 후 투명영역을 trim하여 save for web
  2. Generator 실행
    1. Preferences > Plug-in > Generator > Enable Generator 체크
    2. Generate > Image Assets 활성화
    3. 레이어에 경로/파일명.확장자 입력 시 해당 psd 저장 폴더 하위에 assets 폴더 생성
  3. 저장하고자 하는 레이어 선택 후 왼쪽마우스 > Export
  • AI 파일에서 SVG 추출하기
    1. Window > Asset Export (Drag n Drop)
    2. Window > Artboards > Save As > SVG (setting Range)

이미지 최적화

  • 이미지 압축: 이미지 편집툴에서 저장한 이미지는 최적화 되지 않은 상태로, 압축과정을 거쳐야 함
  • Sprite 이미지: 리소스 최소화를 위해 적절한 이미지 병합 필요
  • node.js로 구현 가능
  • 용량 최적화 제공 사이트 : tiny png

Zeplin

  • UI 디자이너와 개발자 간 협업 툴
  • photoshop CC 2015 이후 버전부터 지원

참조링크