[DAY-31] CSS 심화 (3)

Header

😉 헷갈렸던 & 몰랐던 부분들만 정리하는 나만의 TIL
😯 모든 강의 내용은 적지 않아요!

오늘의 소감은?
너무나도 배우고 싶었던 CSS 기술 Transform!
그리고 핵심인 @media까지..
오늘 CSS 끝장을 봤네요. (물론 공부할 내용은 산더미지만)

노션.. 모바일도 짜..볼까?

[1] Transform 3D

요소를 회전시킬 수 있는 CSS 기술입니다.

회전시킬 요소의 속성으로 transform: rotate(45deg); 를 지정하면 45도만큼 회전합니다.

기본적으로는 요소의 정중앙을 기준으로 삼지만 transform-origin으로 기준을 변경할 수 있습니다.

.container .item {
  width: 150px;
  height: 150px;
  background-color: tomato;
  transition-duration: 1s;
  transform-origin: 100% 50%; /* x축 기준 y축 기준 */
}

.container .item:hover {
  transform: rotate(45deg); /* 2차원 변환 함수 */
}

참고로 rotate는 2차원 변환 함수입니다.

[1-1] 3차원 변환

[1] perspective

perspective로 원근 효과를 줄 수 있지만, 3차원 변환 함수에서만 적용합니다.

Untitled

따라서 이러한 효과를 주기 위해서는 rotate 대신 rotateY나 rotateX등을 사용해야합니다.

.container .item {
  width: 150px;
  height: 150px;
  background-color: tomato;
  transition-duration: 5s;
  /*   transform-origin: 100% 50%; */
}

.container .item:hover {
  transform: perspective(300px) rotateY(45deg); /* perspective를 함수 형태로 작성 */
}

하지만 perspective는 보통 부모 요소에 작성하는 것이 관리가 쉽습니다.

.container {
  width: 150px;
  height: 150px;
  border: 4px solid;
  margin: 100px;
  perspective: 300px; /* 이곳에 속성 형태로 작성해야 합니다.  */
}

transform-origin과 비슷하게 perspective-origin을 통해서 기준을 변경할 수 있습니다.

여기서 기준이란, 어디서 지켜보는가에 대한 기준입니다.

perspective: 300px;
perspective-origin: 0 500px; /* x축 y축 */

Untitled 1

원근법의 기준이 달라지는 것을 확인할 수 있습니다.

[2] transform-style

보통 3차원 회전이 발생한 요소의 자식 요소에 또 회전을 발생시켜도 적용이 되지 않습니다.

이를 해결하기 위해 transform-style을 사용할 수 있습니다.

.container .item {
  width: 150px;
  height: 150px;
  background-color: tomato;
  transform: rotateY(45deg);
  transform-style: preserve-3d; /* 해당 옵션을 지정하면 자식 요소에도 3차원 변화가 일어납니다. */
}

.container .item .box {
  width: 100px;
  height: 100px;
  background-color: royalblue;
  transform: rotateX(45deg);
}

Untitled 2

자식 요소 부분인 box에서도 3차원 변환이 일어나는 것을 확인할 수 있습니다.

‼ 다만 자식 요소에만 적용되며, 후손 요소에는 변환이 적용되지 않습니다.

[3] backface-visibility

뒷면이 보이지 않게 하는 옵션입니다.

해당 기능을 응용해 화면의 앞면과 뒷면을 따로 지정하여 렌더링할 수 있습니다.

Untitled 3

Untitled 4

.container {
  width: 150px;
  height: 150px;
  border: 4px solid;
  perspective: 300px;
}

.container .item {
  width: 150px;
  height: 150px;
  font-size: 60px;
  transition-duration: 1s;
  backface-visibility: hidden; /* 뒷면을 보여주지 않습니다. (default: visible) */
}
.container .item.front {
  background-color: tomato;
  position: absolute;
}
.container .item.back {
  background-color: royalblue;
  transform: rotateY(-180deg);
}
.container:hover .item.front {
  transform: rotateY(180deg);
}
.container:hover .item.back {
  transform: rotateY(0);
}

마치 카드의 앞, 뒷면을 보여주듯 애니메이션 효과를 지정할 수 있습니다.

[2] Columns

‘다단’의 개념을 살펴봅니다.

[2-1] 다단

[1] column-count

column-count는 단의 갯수를 지정하며 기본값은 1입니다. (multy-count)

column-count의 수를 늘리면, 단의 갯수도 늘어납니다.

Untitled 5

[2] column-width

column-count가 2 이상이면, column-width를 지정할 수 있습니다.

column-width의 기본값은 auto입니다.

columns 속성을 사용하여 column-count, column-width를 단축하여 작성할 수 있습니다.
columns: 300px 3;

[3] column-rule

단과 단 사이의 구분선을 지정해줄 수 있습니다.

Untitled 6

border에서 사용할 수 있는 모든 속성을 사용할 수 있습니다.

[4] column-gap

단과 단 사이의 간격을 지정해줄 수 있습니다. (default: normal)

Untitled 7

[3] CSS Filter

filter는 말 그대로 요소에 다양한 필터 효과를 적용할 수 있습니다.

filter에는 많은 옵션이 있습니다.

Filter MDN 문서

[3-1] filter

몇가지 예를 들어보겠습니다. 먼저 filter는 여러 함수를 한번에 작성할 수 있습니다.

.container {
  filter: blur(4px) grayscale(); /* 여러가지 filter 함수들을 동시에 적용 가능 */
}

blur() : 흐림
grayscale() : 흑백효과
invert() : 색 반전
drop-shadow(x y 그림자의흐림정도 색) : 그림자 생성
brightness() : 명도 조절
contrast() : 대비 조절
opacity() : 투명도 조절
saturate() : 채도 조절
sepia() : 세피아 톤 조절
hue-rotate() : 색조 조절

[3-2] backdrop-filter

filter와 비슷하지만, backdrop-filter는 자기 자신의 배경에 보여지는 요소들에 필터를 적용합니다.

.cover {
  width: 150px;
  height: 200px;
  border: 4px solid;
  position: fixed;
  top: 30px;
  left: 30px;
  backdrop-filter: blur(10px);
}

Untitled 8

backdrop-filter의 함수들은 filter와 동일합니다.

[4] CSS 변수

CSS 파일에서 전역으로 변수를 선언하기 위해서는 :root라는 가상 클래스 선택자를 사용합니다.

:root는 html과 동일한 의미이며, 명시도 점수가 높아 조금 더 안정적이라는 차이가 있습니다.

:root {
  --color-primary: tomato; /* 변수 이름은 --로 시작합니다. */
  --color-danger: red;
  --color-success: skyblue;
}

변수를 사용할 땐, var() 함수를 사용해야 합니다.

.primary {
  background-color: var(--color-primary);
}
.danger {
  background-color: var(--color-danger);
}
.success {
  background-color: var(--color-success);
}

Untitled 9

만약 변수에 값이 없을 때 초기값을 지정해줄 수 있습니다.
var(—color-success, orange)

[4-1] 변수 스코프

만약 :root가 아닌 특정 클래스 선택자, id 선택자 내부에 변수를 선언하면

변수는 해당 클래스 또는 id 요소에 종속됩니다.

따라서 해당 클래스나 id를 가진 요소의 형제 요소나 부모 요소에서는 해당 변수를 사용할 수 없습니다.

또한 전역 변수를 후손 요소에서 재할당 하면

해당 후손 요소에서 새로운 스코프를 가지는 변수를 가지게 됩니다.

따라서 해당 후손 요소가 아닌 조상 요소나 형제 요소는 이전에 정의된 전역 변수의 값을 따릅니다.

[5] @supports

@supports CSS 규칙은 주어진 하나 이상의 CSS 기능을 브라우저가 지원하는지에 따라
다른 스타일 선언을 할 수 있는 방법을 제공합니다.

이를 기능 쿼리(feature query)라 합니다.

@supports MDN 문서

@supports (display: grid) {
  /* display:grid를 지원하면 중괄호 안의 스타일 적용 */
  div {
    display: grid;
  }
}

@supports not (display: grid) {
  /* 지원하지 않을 경우의 스타일 */
  div {
    float: right;
  }
}

또한 @supports 문법에서는 여러개의 기능적인 조건을 지정해줄 수 있습니다.

@supports () and () or () {
  .container {
    ...;
  }
}

@supports not (() and () or ()) {
  .container {
    ...;
  }
}

기능적인 조건은 동작과는 관련이 전혀 없습니다.
단순히 브라우저에서 해당 기능을 지원하는가에 대한 조건을 명시한 것 입니다.

[6] @media

@media CSS 규칙은 스타일 시트의 일부를 하나 이상의 미디어 쿼리 결과에 따라 적용할 때 사용합니다.

기본 형태는 @media 타입 and (기능) { 스타일 }을 따릅니다.

.box {
  width: 100px;
  height: 100px;
  background-color: orange;
}

@media screen and (max-width: 500px) {
  .box {
    width: 200px;
    background-color: royalblue;
  }
}

Untitled 10

Untitled 11

@media의 타입의 기본값은 all입니다.

기본값이 존재하기 때문에 타입 부분과 and 부분을 삭제할 수 있습니다.

@media (max-width: 500px) {
  .box {
    width: 200px;
    background-color: royalblue;
  }
}

조건을 여러개 명시할 수 있으며 @support와 비슷하게 not 연산자도 사용할 수 있습니다.

다만 not 연산자를 사용할 땐 미디어 타입을 생략할 수 없습니다.

@media (max-width: 500px) and (min-width: 300px) {
  .box {
    width: 200px;
    background-color: royalblue;
  }
}

@media not all and ((max-width: 500px) and (min-width: 300px)) {
  .box {
    width: 200px;
    background-color: royalblue;
  }
}

또한 여러개의 미디어 쿼리를 한번에 작성할 수 있습니다. 구분자는 쉼표입니다.

@media all and (max-width: 500px), tv and (display-mode: fullscreen) {
  .box {
    width: 200px;
    background-color: royalblue;
  }
}

[6-1] orientation

@media 기능 부분에 적을 수 있는 옵션입니다.

세로 화면이 더 긴지, 가로 화면이 더 긴지 판단하며, 주로 스마트폰을 가로로 눕혔는지 세웠는지에 따라 UI를 변환할 때 쓰입니다.

portrait : 스마트폰을 보는 것 처럼 세로 너비가 가로 너비보다 긴 상황
landscape : 가로 너비가 세로 너비보다 긴 상황

[6-2] media CSS 작성

보통 반응형 웹을 구현할 때, css 파일은 따로 생성합니다.

또한 링크 태그의 media 속성을 통해 해당 파일을 불러올 수 있습니다.

<link rel="stylesheet" hred="./css/main.css" />
<link rel="stylesheet" hred="./css/main-md.css" media="(max-width: 700px)" />

출처

프로그래머스

Twitter Facebook LinkedIn