[CSS] 최신 CSS 써보자(feat.노마드코더) / @supports / scroll snap / gap / aspect-ratio

인턴이 되고 정말 바쁘게 살면서 공부할 시간이 없었는데, 유튜브 추천 영상에 뜬 노마드 코더님..

(유튜브 볼 시간은 있음ㅋㅋ..ㅠ 노력하자..)

https://www.youtube.com/watch?v=lkTpOHv1Ros 

CSS로 가능하면 편할것 같아서 써보려고 한다!

---

환경
goorm IDE(클릭시 이동) React 프로젝트 생성
제가 구름 ICT 인턴인거든요 헿

---

1. @supports

flex의 space-evenly는 IE에서는 제공하지 않는다.

그래서 위와 같이 보인다. ( 저 주소는 내가 컨테이너 실행을 해야만 열려서 들어가봐도 소용 x )

코드는 간단하다.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div style={{backgroundColor: 'red', width:'30px', height: '30px'}} />
		<div style={{backgroundColor: 'blue', width:'30px', height: '30px'}} />
      </div>
    );
  }
}

export default App;

 

 

그럼이제 @supports 써보자!

 

.App {
	display: flex;
	justify-content: space-evenly;
}

@supports not (justify-content: space-evenly) {
	.App {
		justify-content: space-around;
	}
}

왜 안되지 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ

 

.App {
	display: flex;
	justify-content: space-around;
}

@supports (justify-content: space-evenly) {
	.App {
		justify-content: space-evenly;
	}
}

이렇게 하니 됨.

 

IE는 당연하게도...(?) supports를 지원하지 않는다.....ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

 

 

2. scroll snap

이건 범위에 들어갔을때 스크롤 촵 하고 붙여주는 기능이다! 짱짱 신기하고 왕 써보고 싶은 기능.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';


class App extends Component {
    render() {
        return (
            <div className="App">
                <div className="item">1</div>
                <div className="item">2</div>
            </div>
        );
    }
}
export default App;

.App {
	display: flex;
	flex-direction: column;
	scroll-snap-type: y mandatory;
	height: 100vh;
	overflow: auto;
}

.item {
	scroll-snap-align: center;
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
}

.item:nth-child(odd) {
  background-color: beige;
  color: teal;
}
.item:nth-child(even) {
  background-color: teal;
  color: beige;
}

이거하면 진짜 짱짱 신기함!!

근데 약간 scroll-snap-type, scroll-snap-align만 쓰면 안되고 조건이 있음.

일단 부모에 scroll-snap-type과 더불어 overflow와 크기를 설정.

그리고 자식에 역시 scroll-snap-align 설정하고 height 설정!

(내가 flex로 줘서 그랬던 걸 수도 있음.)

 

3. gap

이건 flex에서 쓸 수 있는거.

flex 를 지정한 container 안에 item 사이의 거리를 줄 수 있다!

구냥 내 코드에선 .App 에다가 gap: 40px 이런식으로 주면 item간의 간격 40px이 생김..!!

gap: 40px 30px 의 경우엔 상하, 좌우 순으로 적용!

 

4. aspect-ratio

이건 image 비율 고정!!!!!!!!!!! 나 이 기능이 저번에 필요했는데....... 어디였더라 ㅋㅋ

쨌든 이제 알아간다..! 이건 지원 안되는 브라우저가 근데 3개정도 있당! IE, sfari ~14, samsung internet 조심조심

<img src="./ffff.PNG" /> 이미지를 요로코롬 넣고

img {
	aspect-ratio: 4/3;
	scroll-snap-align: center;
}

그냥 img 태그에 저렇게 넣으면

가로4, 세로3의 비율로 img가 들어감! 신기신기 ㅎㅎㅎ

 

 

후기)

보기만 했을 때는 자꾸 까먹어서 유튜브 켜놓고 다시 보고 기술이름 쓰고 그랬는데,

직접 사용해보고 나니까 이제 뭐가 뭔지 머리에 기록되는 느낌이다.

앞으로도 기술 있으면 기록해놨다가 직접 사용해보면서 차곡차곡 머리에 쌓아야지..!

 

가끔씩 유튜브로 이렇게 기술 탐색을 해야겠다...!!

 

맨날 토스 세미나 봐야지봐야지.. 하면서 미뤄뒀는데 진짜 봐야지 ㅠㅠㅠㅠ 보고 후기 써야지..!!!

 

구름 인턴 후기도 써야하는데... 출퇴근 3시간이라 너무 피곤해요 ;ㅅ;