📚 23.11.06

• Grid
• Transform
• Columns
• Filter
• CSS nesting과 &(Ampersand)

Grid-items

grid에선 다음과 같이 행축, 열축을 기준으로 line을 가진다. 개발자도구에서 요소의 grid를 누르면 위 사진과 같이 line번호를 알 수 있다.

이 line번호를 사용해서 그리드 내에서 요소의 위치를 옮길 수 있다.

.container .item:nth-child(1){
	grid-row-start : 2; //시작위치
	grid-row-end : 4  //종료위치
}

.container .item:nth-child(1){
	grid-column-start :2;//시작위치
	grid-column-end : 4  //종료위치
}

확장은 span 키워드와 함께 사용하고, 차지할 셀 갯수를 지정한다. line 번호가 아니다.

.container .item:nth-child(1){
  grid-row-start : span 2; //현재위치부터 2행(row)만!큼 늘어난다.
}

=> 단축 속성으로!

grid-row : {start 값} / {end 값} 혹은 {start 값} / span {값}
grid-column : {start 값} / {end 값}

각 셀 내부에서 정렬하기 위해서는 각 셀 내부에 빈공간이 필요하다.

각각이 아닌 전체에 대해 동일한 값을 적용하려면 container단에 justify-items 와 align-items 를 지정하면된다.

각각 하려면! 각 item에 -self 지정한다!!

justify-self

justify-self : normal: start || end ||
normal = stretch인데, 각 요소의 width값이 특정되지 않은 auto여야한다.

align-self

align-self : normal || start || end ||
normal = stretch인데, 각 요소의 height값이 특정되지 않은 auto여야한다.

grid에서 사용할 수 있는 함수들

repeat(반복할 횟수, 반복할 값)

grid-template-row : repeat(2, 100px);
grid-template-columns : repeat(2, 100px 200px); // 100px 200px 100px 200px 인셈

minmax()
행이나 열 길이의 최소최댓값을 한번에 지정

grid-template-columns : minmax(100px, 1fr) ,minmax(200px, 1fr)

grid-auto-row||columns 와 같은 암시적인 행열 크기 지정에서도 사용 가능하다!

fit content()

grid-template-columns : fit-content(300px) 100px;

컨텐트 너비에 딱 맞추되 최대 값을 괄호로 가진다.

grid에서 사용하는 단위

fr (fractioin)

: 사용 가능한 공간 너비 비율 (요소 외 나머지 공간)

min-content , max-content

요소가 가지는 컨텐츠의 최소/최대 너비를 값으로 반환

gridtemplate-columns : repeat( 4, min-content)

• 브라우저 한글은 글자단위로 줄바꿈처리가 된다. 이를 보완하기위해
  word-break : normal || keep-all || break-all
  • keep-all : 한글도 단어단위로 줄바꿈
  • min-content 등을 이용할 때 한글을 고려해야하면 이를 같이 씁시다
  • break-all : 어떠한 두문자 사이에서도 줄바꿈 발생 ( 한중일제외)

auto-fit, auto-fill

repeat함수와 함께 쓸수 있다. 자동으로 몇개의 행또는 열을 명시적으로 사용할지 정한다.

grid-template-columns : repeat(auto-fit, minmax(100px, 1fr)

auto-fit은 지정할 수 있는 최대 너비를 가진다.
auto-fill은 지정할 수 있는 최소 너비를 가진다.

Transform

transform이 일어날 기준 = 디폴트는 요소의 정가운데
기준을 재설정하려면 해당 요소에서 transform-origin : x축% y축%

• 그 기준점을 기준으로 회전(rotate)
  transform : rotate(회전각도deg)
  
• 원근법 적용 - 3차원변환에 적용하면 좋다
  • perspective를 함수로 사용
    transform : perspective(원근거리px) rotateY(회전각도deg)
    perspective = 멀리서 지켜볼 거리
    rotateY = y축을 기준으로 3차원 회전을 시킨다. perspective는 3차원 회전과 함께 쓰여야 한다.
  • perspective는 속성으로도 쓰일 수 있다.
    단, 변환이 일어날 아이템의 부모에! 적용 (추천)
    perspective : 원근거리px
    perspective 효과가 적용된 그 요소에 적용해서 원근으로 바라볼 기준점 새로 정함
    perspective-origin : x축% y축%

transform-style : flat(디폴트) || preserve-3d
3차원효과가 적용된 부모(.item)의 자식에 또 3차원 효과 적용이 허용되도록 설정해줘야한다.

Columns

다단 (multi-column)

columns : {column-**width** 값} {column-count값} 각 단의 너비와 단의 갯수

column-rule : 4px solid 단 사이 선

column-gap 단 사이 거리

Filter

filter : blur(_px)

blur함수 = 흐림처리 px값이 커지면 더 흐려진다.

filter : grayscale(100%(디폴트) || _%)

grayscale 함수 = 내부 요소들에 대해 회색처리된다.

filter : invert()
invert 함수 = 색상반전 / 디폴트100%

filter : drop-shadow({x축 거리} {y축 거리} {blur정도} {그림자 색상})
dropt-shadow 함수 = 그림자 설정

filter : brightness(.5)
이미지 명도 지정. 디폴트 1

filter : contrast()
색상 대비 지정. 디폴트 100%

filter : opacity()
opacity속성과 다르게 filter에서의 함수임! 디폴트는 100%
값이 작아지면 점점 투명해짐

filter : saturate()
채도 지정. 디폴트 100%

filter : sepia()
sepia톤(바랜톤) 지정. 디폴트 100%

filter : hue-rotate(_deg)
원형 색상표에서의 각 각도에 해당하는 색상. 0~360deg. 해당 색상 섞여진 색상으로 바뀜

backdrop-filter :
요소자체인 filter와 다르게 요소의 배경에 보여지는 영역에 대한 설정

backdrop-filter : blur(10px) grayscale(); 

-단, IE와 파이어폭스에선 적용되지 않음 ㅠ ㅅ ㅠ

😲 알게된 것

CSS nesting

html 구조가 .div > .item 인 상황에서 .div 요소에 마우스 호버했을 때 .item요소의 배경색만 바꾸는 코드이다.

.div:hover{
  .item{
    background:yellow    
  }
}

항상 이렇게 css 중첩을 사용했었는데, 강의 코드를 보면서 다른 것을 보았다!

.div:hover .item{
  background:red
}

스타일 차이라기엔 직관적으로 보이는 것에 많이 차이가 있다고 생각했다.
우선, css에서는 아래코드처럼, 부모자식 관계라면 공백을 두고 뒤에 붙여서 효과를 나타낼 요소를 지정하면 되고 형제관계라면 결합자 ~ 를 사용하여 붙이면 된다.
그리고, 위처럼 중첩으로 쓰는 것은 SCSS의 스타일이다. 그런데 왜 CSS에서 작동되었을까..? 추가로 과제에서 사용된 &(Ampersand)또한 SCSS 스타일인데 적용이 되었다.
이에 열심히 찾다가 Getting started with CSS Nesting 라는 글을 찾았다!

CSS Nesting used to only be possible in CSS preprocessors like Sass and Less. But guess what, it’s now built in native CSS and all modern browsers will support it after August 29th.

& (Ampersand)

위의 중첩 연산과 더불어 & 연산자도 사용이 가능하다! 이는 부모 참조 선택자로, 하위 자식에서 부모 엘리먼트에 참조할 수 있다. 가상클래스 선택 등에 활용할 수 있었다!
MDN &

---

🤔 오늘 회고

-self 속성을 알게 되었다. 그리드에서 전체 일괄로 정렬하는 것이 아닌 각각의 셀에 대해 정렬하는 방법이 있었구나! 정렬과 transform 속성만 요리조리 활용해도 훨씬 액티브한 화면을 만들 수 있을 것 같다! flex, grid 속성들이 비슷하다고 느꼈는데 비슷한 속성들이 각각에서 어떻게 쓰이는지 특히 어떤 기준에 따라 작동하는지를 알 수 있어서 유익했다.
추가로, 궁금했던 css nesting에 대해 찾아내서 후련하다-! 리액트에서 styled-component 쓰던 습관에 의해 scss문법을 scss문법인지 인지 못하고 써왔는데, css에서도 지원을 시작하였던 것이었다 ! 야호 !

Keep

꾸준히 물어보기 :) 또 내 스스로도 열심히 찾아보기

Try

가상 클래스에 대해 조금 더 알아봐야겠다 !