04.30.2022 TIL

😸 CSS TIL

😽 Done it

😼 다단

: 한페이지를 여러 조각으로 나누는 것

column-count: auto: 조각낼 갯수(= 1)
column-width: auto: 지정된 값을 기준으로 최적의 너비를 자동으로 판단한다.
column-rule:: 단과 단 사이에 선을 넣어주는것(border와 유사)
column-gap: normal: 단과 단사이의 gap

😼 Filter

< container에 사용 하며 요소만 나타내겠습니다. >

blur(0): 흐림 처리
grayscale(100%): 무채색
invert(100%): 색상 반전
drop-shadow(x축거리 y축거리 그림자흐림정도 그림자색상): 그림자(배경색상이 없는 경우 설정된다.)
brightness(1): 명도
contrast(100%): 색상 대비
opacity(100%): 투명도
saturate(100%): 채도
sepia(100%): 오래된 사진 표현(색바랜 느낌)
hue-rotate(각도): 각도별 색

< 요소에 사용 >

backdrop-filter: 해당 배경에 보여지는 영역을 filter적용(위의 요소 사용)

😼 변수

• 변수를 선언할 때 --를 붙여서 사용한다.
• 변수 선언 장소에 종속되며 후속요소로 상속됩니다.
• var()을 이용해서 변수를 사용한다.
• var(변수, 초기값설정)다음과 같이 초기값설정을 할 수 있는데 변수에 값이 없을 때만 적용이 됩니다.
• 변수 재 할당 할때 유효범위는 재할당 한 곳에서만 적용됩니다.
• :root : 최상위 요소를 선택하는 가상선택자(html 유사 but 우선순위가 높다.)

😼 @supports

css기능을 브라우저가 지원하는 지에 따라 다른 스타일 선언 할 수 있는 방법
=> if문 but (기능) 부분은 browser에 지원하는지만 파악

@supports (기능) and (기능) or (기능) {
}

selector(): css 선택자의 browser지원여부 판단 함수

😼 @media

반응형 layout을 만들때 사용
(not을 사용할 경우 타입이 명시되어 있어야 한다.)

@media 타임(=all) and (기능) {
}

//기본 타입이 all이며 생략 가능합니다.
@media (기능) {
}

<link ... media="(기능)" />

재미있는 기능(모바일 파악할 때)

orientation: portrait: 세로너비 > 가로너비
orientation: landscape: 세로너비 < 가로너비

😺 Feeling

css 과제를 진행하기 전에 css강의를 다 듣고 하고 싶어서 미리미리 듣고 있지만... 강의만 듣고 있어서 재미가 없습니다. 빨리 실습으로 부딪치고 싶은 생각뿐입니다.
꾸준히하는 재능밖에 없어 주말에도 공부하는 나라니.... 흑흑

📖 REF

https://developer.mozilla.org/en-US/docs/Web/CSS/column-width
https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule
https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur
https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/brightness
https://developer.mozilla.org/en-US/docs/Web/CSS/@media