231106 [Day35] CSS 심화 (2)

Grid Items 1

9개의 cell을 가지는 grid container , grid는 행축, 열축을 기준으로 line을 가진다. 

개발자 도구를 통해 grid를 클릭하면 line의 번호를 알 수 있다.

 

 

grid-row(column)-start(end) : 각 행, 열 의 라인 번호중에 몇 번째 라인에서 시작할 것인지(끝낼 것인지)를 명시

 

grid-row-start : 2;

grid-row-end: 4; 

grid-column-start : 2;

grid-column-end : -1; (음수도 가능)

 

=> 아이템의 위치를 어디서 시작해서 어디서 끝낼것인지 정할 수 있다.

 

 

grid-row(column)-start(end): span 2;

시작 라인을 기준으로 n개의 라인을 확장해서 아이템을 늘리겠다는 의미, 차지할 cell 갯수를 지정한다.

 

명시적으로 3개의 행만 만들어서 4는 암시적인 행에 위치한다. => 4를 빈공간에 위치하게 하자. => grid-auto-flow: (row) dense;

 

grid-row : start 값 / end 값 or start 값 / span 값
grid-column : start 값 / end 값

 

 

Grid Items 2

아이템 전체에 적용하기 위해 container에 justify-items, align-items를 사용한다.

 

개별적으로 제어하려면 각 item에 -self를 사용한다.

=> justify-self  / align-self 

 

justify-self : normal (=stretch) => width: auto를 하면 기본적으로 늘어나려고 하는 속성을 볼 수 있다.

align-self: normal => height: auto

 

 

순서를 바꾸어주는 order 속성 : 숫자가 작을수록 앞으로 이동

 

요소의 쌓임 순서

grid-row, grid-column을 사용해서 적절히 쌓이게 한다. 숫자 순서대로 쌓임 => z-index 속성을 사용하여 인위적으로 결정할 수 있다.

 

 

Grid Functions, Units

 

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-rows : 암시적 행을 100px로 해서 넘쳐서 출력된다.

 

grid-auto-rows : minmax(100px, auto) => 암시적 행에 최소최대값을 지정할 수 있다.

최소로 100px을 유지하돼 최대로는 auto값을 주어 행에 들어있는 아이템의 너비만큼 암시적행의 너비도 같이 늘어날 수 있다.

 

 

fit content(제한너비) : 컨텐트 너비에 딱 맞추되 최대 값을 괄호로 가진다.

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

 

 

Grid에서 사용할 수 있는 단위

 

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

 

min-content, max-content : 요소가 가지는 컨텐츠의 최소/최대 너비를 값으로 반환

 

브라우저 한글은 글자단위로 줄바꿈처리가 된다.

=> word-break : normal / keep-all / break-all

• normal : 기본 줄 바꿈 규칙 사용
• keep-all : 한글도 단어 단위로 줄바꿈
• break-all : 어떠한 두문자 사이에서도 줄바꿈 발생 (한중일 텍스트 제외)

 

 

auto-fit : 지정할 수 있는 최대 너비를 적용해서 빈공간을 채움

auto-fill : 지정할 수 있는 최소 너비를 적용

 

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

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

 

 

Transform 3D

가상클래스선택자 hover를 추가해서 아이템에 마우스를 올리면 요소가 45도 회전한다.

기준점을 기준으로 회전 => transform : rotate(회전각도deg)

 

transform이 일어나는 기준을 재설정(원래는 정가운데가 기준) => transform-origin: x%, y%

 

시간을 두고 어느 지점을 기준으로 회전하는지 쉽게 볼 수 있다. => transition-duration : 1s;

 

원근법 (3차원변환에 적용)

 

perspective 함수 (요소자체에 사용)
transform : perspective(원근거리px) rotateY(회전각도deg)

perspective = 원근의 거리 / 클수록 멀리서 보고, 작을수록 가까이서 본다.

rotateY = y축을 기준으로 3차원 회전을 시킨다.

=>perspective는 3차원 회전과 함께 쓰여야 한다.

 

 

perspective는 속성으로도 쓰일 수 있다. 변환이 일어날 아이템의 부모에 적용해야한다. (요소 상위에 적용)
=> perspective : 원근거리px

 

perspective 효과가 적용된 그 요소에 적용해서 원근으로 바라볼 기준점을 새롭게 정할 수 있다.
=> perspective-origin : x축% y축% (x축은 왼쪽이 0, 오른쪽이 100% / y축은 위쪽이 0, 아래쪽이 100%)

 

함수보다는 속성을 쓰는 것을 추천!! 

 

 

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

=> .item .box에 45도 회전시킨 것을 보기위해 .item에 transform-style: preserve-3d를 적용시켜주었다.

 

 

 backface-visibility: hidden => 요소의 뒷면을 보여주는것을 숨김, 마우스를 올리면 안보이고 떼면 다시 앞면이 보임

visible이 기본값(보여지는것)

 

카드 뒤집어지는 듯한 효과를 낼 수 있다.

 

 

Columns

 

다단 (multi-columns)

 

columns : {column-width} {column-count} (단축속성)

column-count : 2; => 단의 개수 (auto가 기본값)

column-width : 50px; => 단의 너비, 지정된 픽셀을 기준으로 최적의 너비를 자동으로 판단해서 단의 개수가 조정될 수 있음 

 

 

column-rule : 4px solid(dashed, dotted); => 단과 단 사이에 선을 넣어줄 수 있음 (단축속성)

=> column-rule-width, column-rule-style, column-rule-color를 이용해 개별로 속성을 지정할 수 있다. border 속성과 비슷

 

column-gap : 40px; => 단과 단 사이 거리 (그냥 gap만 써도 가능)

 

 

Filter

*image에 그라데이션 => background-image: linear-gradient(orange, royalblue);

 

filter : blur(10px) => 흐림처리가 된다. px값이 커질수록 더 흐려진다.

 

filter : grayscale(70%) => 내부 요소들에 대해 회색처리된다. 기본값은 100%

*** filter: grayscale(70%) blur(10px); 이런식으로 띄어쓰기로 효과를 여러개 줄 수 있다.

 

filter : invert(80%) => 색상반전 / 기본값 100%

 

filter : drop-shadow({x축 거리} {y축 거리} {blur정도} {그림자 색상}) => 그림자 설정 / 색상이 설정되어있지 않으면 글자색을 따라감

***box-shadow({x} {y} {blur} {그림자크기} {색상})

 

만약 컨테이너에 배경색상을 추가하면 배경에 맞게 그림자가 다시 만들어진다.

drop-shadow는 요소의 배경색상이나 배경이미지가 없을 때 내부의 아이템 경계에 맞게 생긴다.

 

filter : brightness(.5) =>이미지 명도 지정. 기본값 1 / 0으로 하면 검정색으로 어두워짐

 

filter : contrast() => 색상 대비 지정. 기본값 100%

 

filter : opacity() => opacity속성과 다르게 filter에서의 함수이다. 기본값 100% / 값이 작아질수록 점점 투명해짐

 

filter : saturate() => 채도 지정. 기본값 100%

 

filter : sepia() => sepia톤(바랜톤) 지정. 기본값 100%

 

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

 

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