[5주차] 2. Grid item 함수와 단위 & SCSS의 개요와 문법

Grid item

함수

• grid에서 사용하는 주요 함수
• 인수: 함수의 괄호 안에 들어가는 것, 함수에 들어가는 일종의 데이터

1. repeat( ) 함수

• 행과 열의 크기 정의를 반복할 때 사용
• 반복하는 횟수를 첫번째 인수로 활용하고 행과 열의 크기 정의를 두번째 인수로 사용
• 두번째 인수에 반복패턴 입력 가능
• 선의 이름도 정의 가능
• fr 단위 사용 가능
• grid-template-rows와 grid-template-columns에서 사용
• grid-template : grid-template-rows 정의 / grid-template-columns 정의;
  ex) grid-template : repeat(2, [row-start] 200px [row-end] / repeat(3, [col-start] 100px [col-end];

2. minmax( ) 함수

• 행과 열의 최소/최대 크기 정의
• 첫번째 인수에 최솟값, 두번째 인수에는 최댓값 입력
• 이 함수 사용시 container 크기가 늘어나고 줄어들 때 더 유연하게 행과 열의 크기 정의 가능
• grid-template-rows, grid-template-columns, grid-auto-rows, grid-auto-columns 등의 행과 열의 크기를 정의하는 속성에서 사용
• container의 크기가 minmax의 최솟값보다 작을 경우에도 최솟값을 유지한다.(overflow:넘치는 개념)
• 일반 요소에 min-max와 max-width 속성을 동시에 지정하는 것과 비슷한 형태

3. fit-content( ) 함수

• 행과 열의 크기를 grid item이 포함하는 내용(content) 크기에 맞추는 함수
• item이 가지고 있는 내용의 최대 크기를 인수로 사용
• item이 가지고 있는 내용의 최대 크기까지 범위 제한, 이 이상으로 content(내용)이 커질 수 없는 구조
• 인수로 갖는 item이 가지고 있는 내용의 최대 크기 범위 안에서 content(내용)에 item 크기를 맞추고 item의 제일 큰 부분의 너비를 맞추는 개념
• 내용의 너비에 맞춰져 있되 내용의 너비를 따라가고 내용의 최대 크기를 넘진 못함
• 최대한의 content 크기에 맞추는 함수
• minmax(auto, max-content); 인수에 최솟값이 auto이고 최댓값은 max-content라는 단위가 입력된 minmax 함수와 유사하지만 똑같진 않다.
• fit-content(제한하는 최대 content의 너비)

 

See the Pen grid item 함수 by ssoyuni (@sssoyuni) on CodePen.

---

단위

• grid에서 사용하는 주요 단위

1. fr(fractional unit)

• fraction이라고 불림
• 사용 가능한 공간에 대한 몇대몇의 비율 의미 ex) 1fr 1fr은 1대 1 비율로 공간을 차지
• 사용하고 남은 공간을 몇대몇의 비율로 나눠서 차지
• 사용 가능한 공간이 있을 때 그 공간을 몇 대 몇의 비율로 행과 열이 사용하겠다

2. min-content

• grid item이 포함하는(가지고 있는) 텍스트, 이미지 등의 특정 contents(내용)의 최소한의 크기를 가지도록 사이즈를 정의
• min-content를 가진 행과 열에 속한 grid item들 중에서 content(내용)를 이 item들이 가지고 있는 content의 크기로 최대한 축소한 사이즈를 갖는다는 것을 의미
• item의 content가 Hello LAURA일 경우 min-content 속성 부여했을 때 띄어쓰기가 사라지고 줄바꿈 처리 된다.
• 해당하는 행이나 열이 가질 수 있는 최소한의 content 크기로 행과 열을 만듦
• 한글의 경우 한글자 한글자가 줄바꿈 처리가 되므로 이를 해결하기 위해선 word-break : keep-all; 속성 적용하여 영어와 동일하게 한글도 잘 나옴

3. max-content

• min-content와 다르게 contents(내용)이 가질 수 있는 최대 너비 의미하는 단위
• 행과 열이 가질 수 있는 가장 큰 내용의 크기를 사용하겠다는 의미를 가짐
• item의 content가 노출된 만큼의 크기 사용
• min-content 먼저 계산 후 그 다음 속성 계산

4. auto-fill, auto-fit

• 간단한 차이만 제외하면 기본적인 동작은 동일하게 작동
• 동일하게 쓰이되 차이가 있다는 것을 인지하고 사용해야지 나중에 문제 발생하지 않는다.
• 행과 열의 개수 설정해야 하는데 grid container나 행과 열의 크기에 따라서 자동적으로 자신이 알아서 맞게 개수를 조정해주는 단위
• repeat 함수와 같이 사용
  • 반복하는 횟수에 auto-fill 넣을 시 container를 자동으로 채우는 기능
• 행과 열 그리고 item의 개수가 명확할 필요가 없거나 명확하지 않은 경우에 굉장히 유용하게 사용
• container 밖으로 item이 넘쳐 흐르는 것을 방지하기 위해 사용
• 이 단위를 가지고 반응형에 가까운 container 사이즈가 자유롭게 늘어나거나 줄어들 때 즉 가변할 때 item 개수와 크기를 자동으로 조정해주기 위해 굉장히 중요하게 사용됨
• auto-fill과 auto-fit의 차이 : grid container가 하나의 행/열에서 모든 아이템을 수용하고 남는 공간을 처리하는 방법이 다르다. auto-fill은 공간 남을 시 빈 공간을 그대로 남겨두고 auto-fit은 남는 공간을 완벽하게 축소시킨다(그래서 축소된 공간만큼 최대한 item을 늘린다). 기본 적으로 auto-fill과 auto-fit은 동작하는 원리나 결과는 동일하지만 마지막에 남는 공간 발생시 남는 공간을 그대로 둘 것인가 축소시킬 것인가의 차이점이 발생한다.

 

See the Pen grid item 단위 by ssoyuni (@sssoyuni) on CodePen.

---

SASS or SCSS

• 우리가 사용할 문법은 SCSS
• CSS는 원시적인 문법이라 간단한 내용 작성시 편리하지만 작업의 내용이 고도화 될수록 작성이 어려워짐 이를 보완하기 위해 나타난 문법이 SASS이다.
• 웹에서는 표준 CSS만 적용되서 SASS는 웹에 그대로 입력한다해서 그래도 돌아가진 않는다.
• SASS는 CSS preprocessor로 작성을 쉽게 하고 쉽게 작성된 것을 컴파일하는 과정을 통해 css문서로 다시 전환 시킴
• 쉽고 고도화되서 다양한 기능을 사용할 수 있는 문법 작성 후 css 문서 변환 후 사용하는 개념

---

CSS Prepocessor

• css 전에 동작한다 해서 css 전(예비)처리기
• css 전처리기를 통한 웹에서의 직접 동작은 안되기 때문에 전처리기를 컴파일하는 과정이 필요하다. 이때 컴파일은 분석해서 css로 다시 변환하는 과정을 뜻한다.
• 여러 개의 전처리기가 존재하는데 SASS(SCSS), Less, Stylus 등이 존재한다.
• Less는 기능의 차이도 있을 수 있고 Stylus는 나중에 나온편이라 성숙도가 부족한 편이다. 실제로 버그가 좀 나오는 편이다.
  • SASS 선택이유 : 다른 전처리기보다 먼저 나와서 오래 되었고 손속도가 높은 편이고 커뮤니티도 많이 가지고 있어 다른 전처리기보다 문제점을 발견했을 때 해결방법이 존재한다.
• 프로젝트를 보수적으로 작업할 시 Less나 SASS(SCSS) 추천

---

Sass와 SCSS의 차이점

• 기본 적으로 내용은 같다
• 작성하는 문법이 다르다
• SCSS의 경우 Sass(Syntactically Awesome Style Sheet)의 3버전에서 새롭게 등장했고 CSS 구문과 완벽하게 호환되는 기능을 가지고 있다. 즉 Sass의 경우 CSS 구문 그대로 붙여넣었을 때 작동이 안되지만 SCSS의 경우 CSS 구문 그대로 붙여넣었을 때 작동이 된다.
• Sass는 {}중괄호와 ;세미콜론이 존재하지 않는다.(있으면 문법에 문제 있는 것) ->컴파일 해서 사용
• SCSS는 {}중괄호와 ;세미콜론이 존재해서 기존 CSS문법을 가지고 와서 적용해도 문제가 생기지 않는다. 그래서 좀 더 편하게 쓸 수 있다
• Mixins(믹스인) 재사용 가능한 기능을 만드는 방식을 의미
• Sass: = 기호로 선언하고 +기호를 이용해서 사용한다.
• SCSS : 기본적으로 SCSS에서 @mixin으로 규칙을 선언한 다음에 내용을 만들어내고 선언된 내용을 사용시에는 @include로 지시해서 사용하게 된다.
• Sass와 SCSS는 지시어만 다른 것만 차이가 있고 중괄호랑 세미콜론 없는 것 빼면 다 똑같음. 그래서 중괄호와 세미콜론이 있고 없고가 Sass와 SCSS 문법을 나누는 기준이라 생각하면 된다.

---

컴파일

- Sass(SCSS)는 웹에서 동작이 되지 않으므로 CSS로 변환해서 사용해야 한다. 그 변환하는 것을 컴파일이라고 한다.

SassMeister

• 웹사이트 주소 https://www.sassmeister.com/
• SassMeister라는 웹사이트에서 컴파일을 실시간으로 처리해서 시각적으로 작성한 SCSS가 CSS로 어떻게 변하는지 실시간 확인 가능
• 왼쪽에는 Sass문법으로 작성, 오른쪽에 Sass 문법이 변환되서 CSS 문법으로 나타나짐
• 상단에 SASS>SCSS 선택>libsass3.5.5

Parcel

• parcel : 웹 애플리케이션 번들러 parcel은 굉장히 단순하게 컴파일할 수 있다. 웹 팩보다는 훨씬 쉽게 번들 할 수 있다.
  • parcel은 npm 환경이 조성되어야 할 수 있음
• parcel을 이용해서 내용을 바로 css가 아닌 scss 문법으로 작성 가능
• parcel bundler 적용 순서

1. npm을 이용한 라이브러리 찾을시 node.js 먼저 깔아야함(https://nodejs.org/en/). 혹시 몰라서 vs 내에서도 node.js 확장패키지를 깔음
2. package.json 생성: 터미널>새터미널>터미널 창에서 내 문서가 위치한 경로 옆에 npm install -y .입력
3. parcel bundler 설치: npm i -D parcel-bundler(npm install --save-dev parcel-bundler)
4. 전역의 parcel 동작(링크로 SCSS 불러오는 현 html문서에 필요한 모듈 자동으로 설치)
   : npx parcel index.html(현재문서)
5. http://localhost:1234 와 같은 로컬 주소를 터미널에서 찾아서 클릭시 만든 SCSS가 적용된 웹을 볼 수 있다.

---

문법(Syntax)

주석(Comment)

• 코드로 해석되지 않는 특정한 구문
• CSS 주석은 /…/

1. Sass, SCSS 공통 주석

• // 컴파일 되지 않는 주석 : javascript와 입력방식이 같으며 CSS로 변환되지 않는다. 메모로 남길 필요 없을 때 사용
• /컴파일 되는 주석/ :CSS로 변환 됨. 메모로 꼭 남겨야 할 때 사용

2. Sass(중괄호x, 세미콜론x) 주석

• 기존 주석에 줄을 맞추지 않으면 주석 처리가 되지 않음
• CSS나 SCSS 같은 경우에는 /* */ 이 사이에 들어가는 모든 내용은 자연스럽게 컴파일되는 주석이 되는데 Sass의 경우에는 범위라는 개념이 없어서 문법을 구분하는데 있어서 가장 주요하게 생각하는 것이 같은줄을 잘 맞춰주는 것이다. 그래야지 컴파일이 잘됨 이부분이 Sass에서 불편한 부분

 

데이터 종류(Data Types)

1. Numbers

: 숫자
ex) 1, .82, 20px, 2em 등

• 주의사항 : 숫자에 단위가 있거나 없음. 하지만 그것들이 숫자데이터로 인식되는 데 문제는 없음

2. Strings

: 문자
ex) bold, relative, “/images/a.png”, “dotum”

• “”가 있을 수도 있고 없을 수도 있다
• 주의사항 : 문자에 따옴표가 있거나 없음

3. Colors

: 색상 표현
ex) red, blue, #FFF00, rgba(255,0,0, .5)

• 문자 데이터는 아님

4. Booleans

: 논리
ex) true, false

• 참/거짓을 나타내는 두 가지 값을 가지는 논리 데이터

5. Nulls

: 아무것도 없음
ex) null

• 아무것도 존재하지 않는다는 것을 명시하는 데이터
• 주의사항 : CSS 속성 값으로 null이 사용되면 그것은 없는 개념이 되기 때문에 CSS로 컴파일하지 않을 수 있다.

6. Lists

: 공백이나 ,로 구분된 값의 목록
ex) (apple, orange, banana), apple orange

• 특정한 데이터들이 공백이나 , 로 구분되어 있는 목록 전체를 의미하는 데 그 목록 전체도 또 하나의 데이터로 구분된다.
• js의 array 값과 비슷
• 쉼표로 구분시 ( )로 묶어줌
• 공백으로 구분시 그 전체가 리스트화 됨
• 주의사항: ( )를 꼭 붙이지 않아도 문제가 되지 않음

7. Maps

: Lists와 유사하나 key : value 형태
ex) (apple: a, orange: o, banana: b)

• key는 value 다
• ( )가 붙는다
• js의 object 값과 비슷
• 주의 사항 : ( )를 꼭 붙여야지 인식되는데 문제가 되지 않는다.

 

중첩

• 특정한 중괄호 시작하고 끝나는 범위가 중간에 계속 겹쳐지는 것을 중첩
• 중첩이라는 기능을 통해 선택자의 반복을 피할 수 있다.
• CSS 선택자 작성시 굳이 작성하고 싶지 않은 데도 계속해서 작성해야 하는 선택자 부분들이 굉장히 많은데 그것을 중첩이라는 기능을 통해 정리 할 수 있다.
• 클래스 안에 중첩된 클래스는 자식요소인 개념이다.
• container 내부에 특정한 선택자를 더 선언해주게 되면 후손 선택자로서 해석이 됨
• 선택자 안에 또다른 선택자를 선언하게 되면 또다른 선택자는 계속해서 그 선택자 안에 속한 상태가 된다.

1. Ampersand(상위 선택자 참조)

• 중첩 안에서 &( Ampersand) 기호를 사용해서 상위(부모) 선택자를 참조하는 방식
• 자기 자신을 추가적으로 정의하기 위해서 사용
• 자기가 속해 있는 범위 안에 있는 선택자를 참조함
• 중첩 내부에서 그 중첩이 포함되어 있는 선택자를 참조한다.`
• 중첩시 자기 자신을 한번 더 입력해서 작성할 경우 CSS로 변환시 두번 반복될 수 있다. 그래서 &기호를 활용해야 한다.
• 이 기호를 활용해 선택자 이름 정의도 가능하다.
  ex)SCSS에서 .fs 선택자 안 중첩으로 &-medium 선언시 css 변환시 .fs-medium 선택자로 선언 가능

2. @at-root(중첩 벗어나기)

• @at-root 키워드 사용시 중첩에서 벗어나기 가능
• 자기가 속해 있는 범위 안의 선택자의 속성을 그대로 사용하되 그 선택자 안에서 선언되고 싶지 않을 때(독립적으로 선언하고 싶을 때) 사용
• 특정한 범위로 들어가서 그 안에서 쓸 수 있는 거 다 쓰고 나올 때 이기호 사용

3. 중첩된 속성

• 쓰고자 하는 단축속성: { 개별 속성 }
• font-, margin-, padding- 등과 같이 동일한 네임 스페이스(범위)를 가지는 속성(단축 속성 안 개별 속성)들을 사용 가능

 

변수

• 변수 정의 시 $변수 : 속성값; 으로 작성
• 자기가 선언된 중괄호 범위 안해서만 사용 가능
• 함수 안에서도 사용 가능
• 반복적으로 사용될 수 있는 부분의 내용을 변수라는 것을 통해 정의할 수 있다.

1. 변수의 유효범위(variable scope)

• 변수가 선언되고 사용될 수 있는 유효범위가 존재한다.
• 유효범위는 선언된 블록 즉, {} 안의 범위를 가진다.
• 변수 유효한 범위를 가지고 있어 그 안에서만 사용할 수 있다

2. 변수 재할당(variable ressignment)

• 변수를 특정한 다른 변수에다가 다시 넣어주는(할당) 개념
• 변수에다가 특정한 값을 넣어서 할당하지만 다른변수에다가 또다른 변수를 할당해서 값을 정의할 수도 있다.

---

Tips

• i= install
• css에서 클래스 선택자와 클래스 선택자가 붙어있으면 일치 선택자
• 참고 링크의 블로그는 Stylus로 작성되었다.
• 참고
  https://heropy.blog/2019/08/17/css-grid/
  https://heropy.blog/2018/01/31/sass/