2주차: flex, grid

2주차 수업은 flex, grid와 scss를 간단히 배웠다.

flex는 중심축과 반대축이 있다.

중심축을 중(j)심의 j라고 외워서 justify-content 사용하는 축

반대축을 바안(a)대의 a라고 외워서 align-items 사용하는 축이라고 외우면 편하다.

flex의 특징

(1) float를 사용해서 아이템을 정렬하고 아이템에 패딩을 줄 경우 box-sizing: border-box를 쓰지 않으면 밑으로 떨어졌겠지만

flex는 무조건 한 줄에 들어오기 때문에 (flex-wrap: no-wrap이 기본이기 때문) box-sizing: border-box를 쓰지 않아도 떨어지지 않는다.

(2) flex의 아이템들은 높이를 공유한다. align-items: strech가 기본 값이기 때문에 따로 높이를 설정하지 않아도 각 아이템들의 높이가 맞는다.

(3) order는 기본 값이 0으로 세팅되어 있어서 -1이나 1만주면 앞으로 배치되거나 뒤에 배치될 수 있다.

(4) space-between은 사이 간격이 예측이 안 될 때 사용하기 좋음.

자식에게 쓰는 수치

flex-grow

증가 비율. 아이템이 가진 넓이보다 커졌을 때 지정한 비율대로 늘어남.

증가 비율 값은 여백의 비율을 기준으로 하기때문에 안에 콘텐츠가 들어갈 경우 원하는 비율로 조정하기 어렵다. (그래서 flex 속성을 사용)

flex-shrink

수축 비율 1이 기본값이라서 수축하라고 하지 않아도 알아서 줄어듦.

0으로 지정하면 수축 안함.

flex-basis

중심축을 기준으로 한 너비 높이 설정. width나 height의 대체재로 사용할 수 있다.

flex-direction: row; 일 때 flex-basis: 100px;을 준다면 width가 100px이 되고

flex-direction: column; 일 때 flex-basis: 100px을 준다면 height가 100px이 된다.

grow나 shrink를 사용해서 아이템이 늘어나거나 줄어들 때의 기준이 된다.

(flex-basis: 100px이라면 100px보다 작아질 때/ 커질 때를 기준)

flex

flex-grow flex-shrink flex-basis의 단축 속성.

flex:1; 을 주면 아이템이 1:1:1이 된다.

풀어서 써보자면 flex-grow: 1, flex-shrink: 1, flex-basis: 100%; 인데 증가,수축을 하는데 100% 동일한 비율로 증가 수축 한다.

flex: 1 0 500px; 이면 증가하고 수축안하고 500px을 기준으로 증가하고 수축을 하지 않는다는 의미.

grid

grid는 10등분으로 나누고 70%를 차지하는 아이템은 7칸, 30%를 차지하는 아이템은 3칸 차지하도록 세팅하면 편하다.

span 7 = 7칸을 차지해라

SCSS (SASS)

sass 참고자료

https://sass-guidelin.es/ko/

Sass Guidelines — Korean translation

분별 있고, 유지∙확장 가능한 Sass 작성을 위한 주관적인 스타일가이드.

sass-guidelin.es

https://webclub.tistory.com/518?category=541910

Sass 코딩 컨벤션

Sass Coding Convention Sass 작성을 위한 컨벤션에 대해 알아봅니다. Table of Contents 폴더 구조 [Folder structures] 파일 구조 [File structures] 인코딩 [Encoding] 중첩 [Nesting] 들여쓰기 및 선언 순서 [Style Rules] 띄워

webclub.tistory.com

환경설정

(1) Live Sass Compiler 설치 > 톱니바퀴 > 확장설정 > Format > "format": expended 로 되어 있는 부분 변경

css로 변환될 때의 설정을 지정하는 것.

(2) 확장설정 > Generate Map > json 편집에서 generateMap: false 확인

폴더, 파일구조

프론트엔드 프로젝트의 경우는 scss 7-1 패턴으로 사용되며

퍼블리셔 범위에서 컴포넌트까지의 분리는 사용하지 않는다면 아래 이미지처럼 구성해두고 style.scss는 모든 파일을 import하는 방법을 추천.

scss,sass,less 등 전처리도구를 사용하지 않는다면 CSS 아키텍처중 하나인 7-1 패턴

이런식으로 분할해서 사용하면 된다.

abstracts (utills 라고도 함)

실제 스타일은 없고, 그저 다른 폴더에 정의된 스타일을 돕는 역할을 하는 파일을 모으는 폴더.

글로벌 변수, 함수를 포함하는 _variables.scss와 mixin을 포함하는 _mixins.scss를 가진다.

base

사이트 전반에 걸쳐서 재사용되는 스타일을 여기에 정의한다.

사이트 전반에 사용될 폰트, 디폴트 스타일이 여기에 해당한다.

_reset.css 등

components

컴포넌트는 '소형' 레이아웃을 의미한다.

사이트 내에서 재사용 가능한 작은 부분들을 여기에 정의한다.

buttons, forms, profile pictures와 같은 것들이 해당된다.

layout

사이트 구조에 해당하는 레이아웃을 여기에 정의한다.

nav bars, headers, footers 같은 것이 해당된다.

pages

모든 페이지가 같은 스타일을 사용할 수 없기 때문에 각 페이지에서 사용될 구체적인 스타일을 여기에 넣는다.

예를들어, 'Contact Us' 에서만 사용될 스타일이 있다면 _contact.scss 와 같이 네이밍한 후 이 폴더에 넣으면 된다.

themes

사이트가 다른 종류의 모드를 지원할 때 사용된다.

예를 들어 관리자모드 / 디폴트모드가 있는 사이트나 다크모드 / 라이트모드가 있는 사이트가 있을 수 있다. 각 모드에 따라서 각기 다른 스타일이 지정되기 때문에 이렇게 사용한다.

vendors

프로젝트에서 사용되는 외부 스타일을 이 폴더에 넣으면 된다.

예를 들어 부트스트랩을 커스터마이징 하고 싶다면 부트스트랩 stylesheet를 다운받아 이 폴더에 넣으면 된다.

style.scss

모든 scss 경로가 모이는 곳.

위와 같이 각 폴더의 기준에 따라 scss 파일들을 분류했다면, 이 파일을 한데 모을 허브가 필요하다.

해당 파일에는 직접 스타일을 정의하지 않고 import 만을 담당한다.

여기로 모이는 scss 파일들은 파일명 앞에 _(언더바)를 붙인다. 언더바가 붙은 파일은 컴파일이 되지 않으므로 style.scss만 컴파일이 되는 것.

경로 가져오는 순서 : 변수 (_variables.scss) > 믹스인(_mixin.scss) > ...

변수는 reset 보다 전에 세팅 되어야 사용할 수 있다.

- 내부경로 가져올 때
@import './reset';

- 외부경로 가져올 때
@import url('./reset');

_mixin.scss

믹스인은 코드를 재사용 가능하게 만드는 것. 재사용 가능한 코드들을 모아둔다.

_variables.scss

변수를 모아두는 파일.

_reset.scss

reset css 설정

하단에 watch sass를 누르면 css로 컴파일 된 파일 확인 가능.

html에서 가져오는 건 css 파일. 하지만 코드 수정은 scss에서.

사용 예시

중첩 (Nesting)

상위 선택자의 반복을 피하고 좀 더 편리하게 복잡한 구조를 작성할 수 있다.

header {
	background-color: #000;

	h1 { font-size: 30px; }
    .sns { float: left; }
    .login { float: right; }
}

상위 선택자 참조 (Ampersand)

중첩 안에서 & 키워드는 상위 선택자를 참조하여 치환한다.

/* .btn.prev와 .btn.next를 꾸며줄 때 */
/* 부모자식 관계가 아니므로 &를 붙여줌 */

.btn {
	&.prev { left: 10px; }
    	&.next { right: 10px; }
}

믹스인 (Mixin)

믹스인은 재사용한 기능을 만드는 방식을 의미한다.

Mixin은 두가지만 기억하면 된다. 선언하기 (@mixin)와 포함하기 (@include).

만들어서(선언) 사용(포함)하는 것이다.

(1) _mixins.scss 파일

// 믹스인 - 재활용 가능한 소스 만들기

// 중앙정렬 소스 만들기
@mixin position-center {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

// 말줄임표 소스 만들기
// $line의 기본은 1로 설정
@mixin ellips($line:1) {

	overflow: hidden;
    text-overflow: ellipsis;
	
    // 여러줄 말줄임표
	@if($line > 1) {
    	display: -webkit-box;
        -webkit-line-clamp: $line;
        -webkit-box-orient: vertical;
    }
    // 한줄 말줄임표
    @else {
    	white-space: nowrap;
    }
    
}

(2) _main.scss 파일

말줄임은 괄호 안의 숫자를 $line으로 받아서 처리함.

h1 {
	@include position-center;
}

.box1 {
	//한 줄 말줄임표
	@inclue ellips;
}
.box2 {
	//두 줄 말줄임표
	@include ellips(2);
}

변수 (Variables)

포인트 컬러나 폰트 사용 시, 변수에 저장해두고 갖다 쓰면 편리하다.

(1) _variables.scss 파일

$red: rgb(197, 78, 45);
$title-size: 30px;