21. 9. 15(수) TIL(CSS: 다단, filter, supports, media)

배준형·2021년 9월 15일

TIL

목록 보기

19/21

Javascript CSS: 다단, filter, supports, media

📌 다단(multi-column)

다단 레이아웃: 다단 텍스트 정의가 쉽도록 블록 레이아웃 모드를 확장한다. 긴 텍스트를 읽을 때 한 줄 끝에서 다음 줄 시작까지 눈으로 옮기기엔 긴 경우 넘어갈 때 어느 부분을 읽었었는지 파악하기 어려워질 수 있다. 그럴 때 css의 다단 속성을 활용하여 전체 레이아웃을 구분할 수 있다.

CSS Column 속성

1. column-count / column-width

column-count: 1;
- 기본값은 1이고, 값이 2 이상이면 해당 숫자만큼 container를 만들 수 있다.
column-width: auto;
- 기본값은 auto이고, 지정한 px 단위를 기준으로 최적의 너비를 자동으로 판단한다.
px를 크게 지정하면 count 값에 상관없이 유지할 수 있는 최적의 너비를 설정해서 자동으로 단이 조정된다.

.container { column-count: 2; }

2. column-rule

column-rule-width: 단과 단 사이의 선
column-rule-style: 단과 단 사이 선의 스타일(실선, 점선 등)
column-rule-color: 단과 단 사이 선의 색상
축약형 column-rule: width style color;
- 단과 단 사이의 border 속성이라고 보면 된다.

.container { column-count: 3; column-rule: 4px dashed black; }

3. column-gap

column-gap: 단과 단 사이의 거리
- flex, grid 등에서 gap을 사용하는 것과 동일하다.

.container { column-count: 3; column-rule: 3px dotted; column-gap: 80px; }

📌 filter

filter: 요소의 흐림 효과나 색상 변형 등 그래픽 효과를 요소에 적용하여 이미지, 배경, 테두리 렌더링을 조정하는데에 쓰인다.

filter 속성

filter: blur(px);
- blur 함수를 통해 px 단위로 요소의 흐름 단위를 조절할 수 있다.(4px 정도만 되도 많이 흐려짐)
filter: grayscale(100%);
- 기본 값: 100%, %의 값 만큼 회색이 된다. 값이 낮아질 수록 색이 나타나고 값이 올라갈 수록 회색이 된다.
filter: invert();
- 기본 값: 100%, % 만큼 색상 반전
filter: drop-shadow(x축거리 y축거리 흐림정도 색상);
- drop-shadow(10px 20px 30px red); 등으로 쓴다.
- container의 배경에 맞게 그림자가 생성된다. 배경 색상, 이미지가 없는 경우 내부 아이템의 경계에 생성되고, 배경이 있다면 그 배경에 맞게 그림자가 생성된다.
filter: brightness(1); 기본값: 1, 밝기 조절
filter: contrast(100%); 기본값: 100%, 대비 조절
filter: opacity(100%); 기본값: 100%, 투명도 조절, 0~100% 사이 값만 가능
filter: saturate(100%); 기본값: 100%, 채도 조절
filter: sepia(100%); 기본값: 0, sepia톤(오래된 사진, 바래져 있는 느낌)을 의미.
filter: hue-rotate(0deg); 기본값: 0deg, hue: 색상을 의미,
backdrop-filter: filter-func;
- 자기 자신에게 filter를 적용하는 것이 아니고, 해당 요소의 배경에 보이는 요소 뒤에 위치하는 요소에 filter 속성을 적용한다.

📌 CSS @Supports

@supports: 주어진 하나 이상의 CSS 기능을 브라우저가 지원하는지에 따라 다른 스타일 선언을 할 수 있는 방법이다.(기능 쿼리(feater query))

@supports (속성: 값 // 또는 함수) {
  // 브라우저에서 괄호 안의 기술을 사용할 수 있으면 중괄호 안의 내용이 실행되고, 지원하지 않으면 실행되지 않는다.
  selector { style }
}

@supports not (속성: 값 // 또는 함수) {
  // 브라우저에서 괄호 안의 기술을 사용할 수 없으면 중괄호 안의 내용이 실행된다.
  selector { style }
}

@supports (display: grid) {
  div {
    display: grid;
  }
}
// 브라우저가 display: grid를 지원하면 그대로 grid를 적용시킨다. 지원하지 않는 경우 실행되지 않는다.

@supports 는 and 또는 or 로 지원하는지 확인하려는 기능을 여러개 작성할 수 있다.

@supports (기능1) and (기능2) and (기능3) { style }
@supports (기능1) or (기능2) or (기능3) { style }

@supports 기능을 작성할 때 selector() 함수를 사용할 수 있는데, 이는 선택자의 지원 여부를 확인할 때 사용할 수 있다.

@supports (selector(.container)) {
  선택자 {
    속성: 값;
  }
}

📌 CSS @media

@media: 반응형 레이아웃 구조를 만들 때 사용한다.

@media 타입 and (기능) { 스타일 }

타입: all(기본형), screen, print, tv 등을 사용할 수 있다.
기본형인 all을 생략하고 기능, 스타일만 작성해도 동작한다.

@media (max-width: 1024px) { 스타일 }
// all 타입에 최대 너비가 1024px 까지 중괄호 안의 스타일을 적용한다.

@media not all and (max-width: 1024px) { 스타일 }
// all 타입에 최대 너비가 1024px이 아닐 때 중괄호 안의 스타일을 적용한다.
// 여기서 not 연산자를 사용할 때는 타입을 명시해줘야 작동한다.

@media
  not all and (max-width: 1024px) and (min-width: 768px),
  tv and (display-mode: fullscreen)
{ 스타일 }
// 여러개의 @media를 입력할 때는 쉼표로 구분하여 작성할 수 있다.

html 파일에서의 사용: @media는 .css 파일에서 사용되지만, .html 파일에서 link 태그 내부에 입력해서 사용할 수 있다.

<head>
  <link rel="stylesheet" href="./css/main.css">
  <link rel="stylesheet" href="./css/main-media.css" media="(max-width: 1024px) and (min-width: 768px)">
</head>
// html의 link 태그 내에 media 속성을 입력하면 css 파일에서 미디어 쿼리를 입력한 것과 동일한 속성을 적용시킬 수 있다.

📌 배운점

html, css를 배우고 나서 javascript를 배우는 데에 집중하느라 html, css에는 소홀히 했었다. html, css를 완전히 아는 것이 아니더라도 대략적으로 알고 있는 내용을 검색을 통해서 필요할 때 가져다 사용할 수 있을 줄 알았다. 그러나 오늘 새롭게 알게 된 내용들이 많았다.

@media의 경우 사용을 해봤지만 정확하게 아는 것은 아니었고, @media screen and (max-width: 1024px) 이렇게만 사용해서 만약 @media 기능을 응용해야 했었다면 쉽게 느껴지지 않았을 것이다.

CSS column, filter, @supports에 대해서는 이미 배웠거나 사용했거나 본적은 있었을지 모르겠지만 처음 보는것처럼 생소했다. 지금이라도 알게된 것이 다행이고, 이런 기능들을 통해서 더 다양한 기능들을 구현할 수 있게 될 것이라고 생각한다.

📌 앞으로

CSS는 어렵다. 정적인 웹 사이트를 보고 클론하여 스타일을 적용하는 것은 어려워도 어느정도 가능한 수준이라고 생각하지만, Animation 같은 CSS로 동적인 웹 사이트를 보고 클론하는 것은 쉽지 않다.

지금까지는 단순히 내 컴퓨터의 chrome 브라우저에서 정상적으로 작동하면 당연하게 넘어갔었는데, @supports 기능으로 크로스 브라우징 같은 문제를 해결할 수 있을것이라 생각한다.

Javascript도 마찬가지지만 CSS는 특히 사용할수록 금방 손에 익고 실력이 늘어가는 게 느껴지는 분야라고 생각하고, 사용하지 않을수록 금방 잊혀지게 되는 것이라 생각한다.

오늘 배운 내용들, 앞으로 배우게될 CSS 내용들을 지속적으로 공부하다 프로젝트를 진행하게 되면 배운 내용을 적극적으로 사용하여 프로젝트를 진행할 예정이다.

📌 참고한 사이트

배준형

프론트엔드 개발자 배준형입니다.

이전 포스트

21. 9. 7(화) TIL(배포)

다음 포스트