Skip to main content

2021년 8월

1. @supports#

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

선언 구문#

@supports (display: grid) {
div {
display: grid;
}
}

not 연산자#

@supports not (display: grid) {
div {
display: flex;
}
}

함수 구문#

selector()
@supports selector(A > B) {}
  • 자식요소를 지원할 때 통과
  • and 연산자 , or 연산자도 지원

2. CSS Scroll Snap#

  • CSS Scroll snap 모듈을 사용하면
    스크롤 동작을 정의하기 위한 JavaScript 사용을 줄일 수 있고,
  • 하드웨어 가속을 사용하기 때문에 웹 브라우저에서 원활한 동작과 성능 향상을 기대할 수 있다
  • 웹사이트 스크롤이 어떠할지 정할 수 있다.
#container {
width: 500px;
height: 500px;
overflow: auto;
/* ADD THIS TO THE PARENT */
scroll-snap-type: y mandatory;
}
.item {
/* ADD THIS TO THE CHILD */
scroll-snap-align: center;
display: inline-block;
width: 500px;
height: 500px;
display: flex;
justify-content: center;
font-size: 38px;
align-items: center;
}
  • scroll-snap-type 을 부모요소에주고
  • scroll-snap-align 을 자식요소에 줌

    mandatory 라는 속성은

  • 가능한 경우 스크롤 작업이 완료되면 해당 지점에서 스냅됩니다.

3. :is Pseudo Selector#

적은 코드만으로 여러가지요소를 담을수 있게 해줌

header button,
nav button,
form button {
background-color: red;
}
  • 이런 식의 많은 코드를
:is(header, nav, form) button {
background-color: red;
}
  • 적은양의 코드로 바꿈
div:is(.red, .blue) {
background-color: red;
width: 100px;
height: 100px;
}
  • 선택자도 가능

4. Flex Box gap#

  • 아이템 사이에 간격을 두고싶을때 사용
div.container {
width: 500px;
display: flex;
flex-wrap: wrap;
gap: 20px
}
.container div {
width: 100px;
height: 100px;
background-color: red;
}
  • 단위는 em , % , calc() 등 .. 여러가지 사용가능
gap: 20px 40px;
  • row 와 column 의 간격을 따로 줄수 있다.

5. aspect-ratio#

  • 요소의 aspect-ratio 즉 , 가로 세로 비율을 설정 할 수 있다.
.container {
width: 300px;
}
p {
background-color: red;
aspect-ratio: 16 / 9;
}

6.position:sticky#

유저의 스크롤을 따라다니는 요소를 만들수 있음

section {
background-color:beige;
height:70%;
width:100%;
margin:35px 0px;
display:flex;
justify-content:flex-end;
}
aside {
background-color:teal;
height:50px;
width:100%;
position:sticky;
top:0px;
text-align:center;
color:white;
display:flex;
align-items:center;
justify-content:center;
}

  • 원하는 요소에 position sticky 를 쓰고

  • 정의된 높이가 있는 컨테이너 안에 그 요소를 넣으면됨

  • fixed 박스는 뷰포트에 고정하지만
    sticky 박스는 scroll 박스(영역)에 고정

출처#

Basic Set up#

<body>
<div class="scene">
<div class="floor"></div>
<div class="cube"></div>
<div class="ball"></div>
</div>
</body>
:root {
--boxColor: #0ff7;
}
body {
background-color: #000;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 75px;
}
.scene {
position: relative;
}
.ball {
width: 1em;
height: 1em;
border-radius: 50%;
background: lightblue;
position: absolute;
left: -.5em;
bottom: 1em;
}
.cube {
width: 2em;
height: 2em;
background: var(--boxColor);
position: absolute;
top: -1em;
left: -1em;
}
.floor {
position: absolute;
top: 1em;
transform:
translate(-50%, -50%);
width: 5em;
height: 5em;
background-image: repeating-conic-gradient(from 45deg, #111 0deg 90deg, #222 90deg 180deg);
background-size: 1em 1em;
}

  • --key: value

    • CSS 변수 선언

  • :root

    • 간단히 이야기 하면 최상위 엘리먼트 HTML 을 뜻한다.
    • 우선순위때문에 사용 , 전역 변수의 느낌

  • em 사용 이유

    • 강의에선 , font-size를 이용해 변수처럼 사용하기위해

  • background-image: repeating-conic-gradient

    • 반복되는 원뿔형 형태의 그라디언트 이미지 생성

Scene 의 관점 변화#

.floor {
position: absolute;
top: 1em;
transform:
translate(-50%, -50%)
rotateX(90deg);
width: 15em;
height: 15em;
perspective: 10em;
perspective-origin: 50% calc(50% - 2em);
}
.scene {
position: relative;
transform-style: preserve-3d;

  • rotateX(90deg)

  • perspective

    • 얇은 판을 깔아 원근법 사용, 멀리서 볼수 있게

  • perspective-origin: 50% calc(50% - 2em);

    • 자신이 보는 위치를 정하는

  • transform-style: preserve-3d;

    • 자식요소를 3D 공간에 배치

Cube 만들기#

<div class="cube">
<div class="front"></div>
<div class="back"></div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
<div class="bottom"></div>
</div>
.cube .front { transform: translateZ(1em); }
.cube .right { transform: rotateY(90deg) translateZ(1em); }
.cube .back { transform: rotateY(180deg) translateZ(1em); }
.cube .left { transform: rotateY(270deg) translateZ(1em); }
.cube .top {
position: absolute;
width: 2em;
height: 2em;
background: var(--boxColor);
transform: translateY(-50%) rotateX(90deg);
  • translate Z 로 면을 앞으로 빼서 , rotateY 로 6면채로 배치
radial-gradient(#0000, #000 75%),
background-size: 100%, 1em 1em;
  • 바닥에 방사형 효과를 추가
box-shadow: 0 0 0.5em #000a inset;
  • 면 안쪽에 그림자를 추가
.cube .bottom {
position: absolute;
width: 2em;
height: 2em;
background: #0007;
bottom: 0;
background: var(--boxColor);
transform: translateY(-50%) rotateX(90deg);
box-shadow: 0 0 0.5em #000;
}
  • 공이 떨어질때 그림자 효과를 주기 위해 추가

Ball 만들기#

background-image: radial-gradient(
circle at top,
lightblue,
#000
);
  • 구의 위에서 부터 아래로 방사형 으로 그림
<div class="top">
<div class="ballShadow"></div>
</div>
.top .ballShadow {
position: absolute;
width: 100%; height: 100%;
background-image: radial-gradient(#000, #0000 50%);
}
  • Ball 의 그림자 엘리먼트 생성

Scene 의 회전#

transform-style: preserve-3d;

  • .cube 에 preserve-3d 추가

  • @keyframe 을 사용하여 , 회전 추가 (360도)

.scene {
position: relative;
transform-style: preserve-3d;
animation: sceneRotate var(--rotateSpeed) infinite linear;
}
@keyframes sceneRotate {
to { transform: rotateY(360deg);}
}
  • .ball 에 Revers 추가한 animation ,
  • 마치 구 처럼 보인다.
animation: sceneRotate var(--rotateSpeed) infinite linear reverse;

ball 의 Bounce#

  • ease-out : 전환 효과가 천천히 끝남

  • ease-in: 처음을 느리게

  • timing function , keyframes 를 사용하여 공의 운동 즉
    에니메이션의 속도를 조절한다.

  • ballShadow 는 opacity , scale 을 통하여 조절

animation:
ballBounce var(--bounceSpeed) infinite ease-out,
sceneRotate var(--rotateSpeed) infinite linear reverse;
}
@keyframes ballBounce {
0%, 100% { bottom: 1em; }
50% { bottom: 3em; animation-timing-function: ease-in; }
}
.top .ballShadow {
position: absolute;
width: 100%; height: 100%;
background-image: radial-gradient(#000, #0000 50%);
animation: ballShadow var(--bounceSpeed) infinite ease-out,
}
@keyframes ballShadow {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(2); opacity: 0.5; animation-timing-function: ease-in; }
}

링크를 따라가면 , 상자의 Bounce 까지 표현가능..

출처#