뒤로 가기
홈으로 이동
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 되는 것을 알게 되었습니다.
✔ 학습 완료

이런 러닝패스는 어때요?

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

서원석의 프로필 이미지
서원석
의 학습노트

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

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
25
00:01
이 학습노트에서 구현하는 결과물 입니다.(파일 선택기에서 이미지 파일을 고르면 이미지 미리보기)
00:25
코드 살펴보기 시작
👍
2
스크랩
서원석의 프로필 이미지
서원석
의 학습노트

네거티브 마진 negative margins | 코딩가나다 | 빔캠프

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
6
04:38
B에 negative margin을 적용하기
05:00
마크업 상에서 아래 쪽에 위치하면 위로 올라갑니다. *negative margin과 상관없는 이야기
👍
6
스크랩
👋 다양한 인사이트를 읽어보고 계신가요?
나만의 학습 기록을 남기고, 관리하고 싶다면!
다양한 전문가의 멤버십 전용 콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고, 수익을 올리고 싶다면!
3초 회원가입/로그인으로, 런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기