LearnFit

 YouTube, 5 More Must Know CSS Tricks That Almost Nobody Knows

서원석님의 학습노트

[CSS - 노트] 사람들이 잘 모르는 CSS 스킬 5개

#전체

#개발자

#프론트엔드

#webdevsimplified

#css features

#complex css

#new css features

#future css

#css

#css tutorial

#css new

#new css

#css project

#css project tutorial

#css top 10

#css top 5

#wds

#css aspect ratio

#css resize

#css advanced

#expert css

#new css properties

#important css

#css4

#css 4

#css four

#css3

#css 3

#css three

#modern css

#modern css features

#modern css properties

#cascading style sheets

#modern html

#cool css features

#cool css

#fancy css

#how to write css

#html

#js

00:201. var 활용해서 마치 함수처럼 CSS를 적용하기 css를 변수 입력 형식으로 활용한다는게 신기했습니다. 코드 예시(영상과는 다른): // css .box { width: 100px; height: 100px; background-color: var(--box-color, black); // black은 default value } .red-box { --box-color: red; } .blue-box { --box-color: blue; } // html <div class="box"></div> <div class="box red-box"></div> <div class="box blue-box"></div> // 결과 순서대로 검은 네모, 빨간 네모, 파란 네모가 화면에 표시됩니다.

04:162. resize property

06:093. aspect ratio padding-bottom: 60%;로 이미지 비율을 유지한 경험이 있었는데 해당 CSS property를 보고 훨씬 간단한 방법이 있다는 것을 알게 되었습니다. aspect-ratio: 16 / 9; 이런식으로 입력을 합니다. *브라우저별로 지원하지 않는경우도 있으니 caniuse.com에서 확인 후 사용해야합니다. *저 같은 경우 제 맥의 현재 사파리 버전에서 동작하지 않았습니다.

08:084. Calc Unit Conversion

09:555. scroll-padding-top 1. css 파일의 root {} 안에 css variable을 선언해두고 필요한 곳에서 해당 변수를 가져다 사용하는 형식은 코드 관리에 편리함을 가져다 줄 것으로 보입니다. ex: root안에 --header-height을 50px로 설정하고 <header>의 높이를 --header-height으로 입력하는 경우나 padding-scroll-top을 --header-height로 입력하는 경우가 CSS var 재사용을 뜻함 2. 전체적으로 적용되어야 할 CSS 속성을 root에 입력하는 방식은 전역 css 적용에 편리함을 가져다 줄 것으로 보입니다. ex: root에 padding-scroll-top을 --header-height으로 입력하는 것도 해당 설명에 속함 3. padding-scroll-top을 활용하면 scroll 이동했는데 navigation bar가 존재해서 화면에 header가 보이지 않는 문제를 방지할 수 있습니다. *padding-behavior: smooth가 safari에서 지원되고 있지 않습니다. 4. (개인적인 필기) a href에 같은 페이지 내 css id selector를 입력하면 scrolling 되는 것을 알게 되었습니다.

✔ 학습 완료

취소

작성하기

이런 러닝패스는 어때요?

무료

박어진

의 러닝패스

Adaptive Learning이란 무엇이고 어떤 서비스들이 있나?

서원석님의 다른 노트는 어때요?

서원석

의 학습노트

리액트로 이미지 미리보기 구현(feat. useState, useEffect, useRef, FileReader)

Video

⏱ 핵심 스탬프

25개

00:01

이 학습노트에서 구현하는 결과물 입니다.(파일 선택기에서 이미지 파일을 고르면 이미지 미리보기)

00:25

코드 살펴보기 시작

👍

서원석

의 학습노트

리액트 라우터 버전 6의 리다이렉트는 Navigate로 구현

Video

⏱ 핵심 스탬프

8개

00:00

해당 학습노트에서는 react router 버전6에서 redirect를 어떻게 구현하는지 소개합니다. 공식 문서: https://reactrouter.com/

00:50

react router 버전5에서 redirect를 구현하는 방법입니다. *예상 시나리오: pathname이 '/redirect'인 page 접근 시 pathname '/about'인 page로 전환됨 *특정 pathname에 redirect 로직을 등록하는 이유는 가지각색이겠지만 그 중 대표적인 용도는 로그인 여부 검사입니다. 서비스를 이용하는 유저가 로그인을 했을 경우 특정 pathname에 접근하지 못하도록 사용하는 것이죠.

👍

다시 보지않기