SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma - 코딩웍스
강의를 듣고 기억하고 싶은 내용을 씁니다.

공부 완료 (10/24 ~ 11/3)

💻 작업물
1. Figma 작업 (디자인+와이어프레임)

1. Figma

Figma 사용하여 디자인 잡기

• 너비 : 1180px 내외로 하는 것이 집중도 있고 좋다.
• 모니터 해상도
  1. HD : 1280x720
  2. FHD : 1920x1080 (보통 여기를 기준으로 작업함.)
  3. QHD : 2560x1440
  4. 4K/UHD : 3840x2160
• 폰트
  • 구글 웹 폰트에서 검색
  • 저작권 없는 프리 오픈소스 사용 / 웹 폰트가 있는 것을 사용
• 스타일
  • 점 네개 있는 버튼 클릭해서 등록하면 폰트, 컬러스타일 등록 가능.

  Figma 단축키

  • ctrl + 휠 : 확대, 축소
  • shift + 1 : Zoom to fit
  • ctrl + 0 : Zoom to 100%
  • shift + R : Rule toggle
  • ctrl + G : 그룹 만들기
  • ctrl + shift + G : 그룹 해제
  • shift + 방향키 : 설정한 px 만큼 이동 (피그마 로고 -> Preferences -> Nudge amount 에서 설정)
  • space : 손바닥 툴
  • ctrl + alt + K : 그룹을 컴포넌트로 만들기. 컴포넌트로 만든 것은 Assets에서 가져다 사용 가능.
  • alt + 드래그 : 복사
  • ctrl + D : 직전에 한 복사 그대로 복사
  • [ : 영역 가장 아래로 보내기
  • ] : 영역 가장 위로 보내기

2. HTML 와이어프레임

HTML 와이어프레임이란

• 코딩을 하기 전 HTML 구조 파악을 위한 뼈대
• HTML 태그 뿐만 아니라 클래스 이름도 함께 작성
• 일관성 있는 HTML 계층 구조를 사용해야 한다.

  💡 HTML 와이어프레임 구조를 만들어 놓고 퍼블리싱을 하는 것이 중요하다.

와이어프레임 제작

• 와이어프레임 제작 순서

  1. UI 디자인 와이어프레임 박스 그리기
  2. emmet 문법을 활용하여 와이어프레임 구조 작성

  와이어프레임 박스 만들기

  • 박스를 그리는 원칙은 가로 혹은 세로로 2개 이상이 그룹이 되는 경우이다.
    • 가로 배치 : 2개 이상이면 반드시 부모 요소로 감싼다.
    • 세로 배치 : 내용 상 같은 구조를 부모 요소로 감싼다.
  • 같은 계층의 박스는 같은 색상으로 감싼다.

  와이어프레임 구조 작성

  ※ 에밋(Emmet) 문법을 기준으로 작성한다.

  • 점(.) : class 이름
    • 태그명 뒤에 점을 붙이면, 해당 태그에 클래스 이름이다.
    • div는 태그명 생략 가능하여 .으로 시작하면 div의 class
  • 자식 요소는 들여쓰기(indent)로 구분한다.
    • 꺽쇠(>)로 사용할 수도 있다.
    • 들여쓰지 않은 것은 형제 요소.
  • 괄호()는 묶음을 표시한다.
  • 곱하기(*)가 있으면 개수를 표시한다.
  • 폰트 아이콘의 경우 i 태그명 보다는 font-icon으로 표시한다.

  

3. SCSS

SCSS의 장점

• 부모 요소가 반복적으로 사용되는 부분을 줄일 수 있음
• 변수를 사용하여 css 속성을 관리 할 수 있음
• 조건문, 반복문을 사용하여 동적으로 css 관리할 수 있음

SCSS? SASS?

• SASS : Syntactically Awesome Style Sheets
• SCSS : Sassy Cascading Style Sheets
  • SASS가 먼저 생기고, 나중에 SCSS가 생김. 서로 완벽 호환된다.
  • 중괄호({ }), 세미콜론(;) 유무에 따른 사용방식이 다를 뿐이다.
  • 재사용 기능을 만드는 방식인 믹스인(Mixins)에서 거의 유일한 차이가 있다.

SCSS 사용법 및 이론

💡 scss 파일이 컴파일 될 때, 블럭 주석의 경우에만 남아있고, 줄 주석의 경우 사라진다.

• $ : 변수 선언
• & : 상위 선택자 받아옴
• @at-root : 부모 선택자 중첩 나가기
• @import "scss파일.scss" : url 임포트는 css에만 적용, scss의 경우 문자열로 임포트.
• @mixin : 재사용할 그룹을 선언, 정의, 지정하는 것.
  • @mixin을 사용할 때는 @include로 가져온다.

// scss 선언 방식
@mixin 믹스인 이름 {
	재사용 스타일 속성
}
// scss 사용 방식
선택자 {
	@include 믹스인 이름;
}

// sass 선언 방식
= 믹스인 이름 {
	재사용 스타일 속성
}
// sass 사용방식
선택자 {
	+ 믹스인 이름;
}

• @extend : 다른 속성의 css를 그대로 가져온다.
  • @extend로 가져오면 컴파일 시 해당 선택자도 함께 보이는데, 보이지 않게 하려면 플레이스 홀더 선택자(%)를 가져오는 선택자에 적어주면 된다.
• map-get : map 형식으로 변수를 선언하는 것. (js의 object와 유사)

// 선언 방식
$변수 : (
	키: 값,
    키: 값
);
// 사용 방식
.class {
	color: map-get(변수, 키);
}

CSS 추가 포인트

• :before, :after는 인라인 요소라서 크기값을 가질 수 없다. position: absolute; 값을 주게 되면 인라인 블록으로 바뀌면서 크기값을 가질 수 있다.