최신 CSS 기능 및 트렌드
- Things You Can Do With CSS Today — Smashing Magazine[^106-1]
- The Future of CSS: Cascade Layers (CSS @layer)
- The Undeniable Utility Of CSS :has • Josh W. Comeau
- An Interactive Guide to CSS Container Queries
- 컨테이너 쿼리 사용 방법 | web.dev
- What if you used Container Units for everything?
레이아웃과 반응형 디자인
- Fluid Sizing Instead Of Multiple Media Queries? — Smashing Magazine
- Complex conditional width using flex-basis with clamp
- Using grid to split a table cell
- TablesNG — Improvements to
<table>rendering in Chromium
CSS 애니메이션 및 효과
- A CSS-only, animated, wrapping underline.[^106-2]
- Cubic Bézier: from math to motion
- Zero Trickery Custom Radios and Checkboxes - CSS-Tricks
- CSS One-Liners to Improve (Almost) Every Project
- 6 CSS Snippets Every Front-End Developer Should Know In 2025
텍스트 및 타이포그래피
스타일 가이드 및 접근성
- Naming Variables In CSS
- Margin considered harmful
- Defensive CSS - Ahmad Shadeed
- The wasted potential of CSS attribute selectors
CSS와 JavaScript의 조합
- Constructable Stylesheets: seamless reusable styles
- Replace JavaScript Dialogs With New HTML Dialog | CSS-Tricks
- How to prevent scrolling the page on iOS Safari 15
CSS 아키텍처 및 모듈화
background
git checkout -- ./index.js
// 마지막 커밋 시의 상태로 되돌립니다.
git reset --hard리모트 브랜치 가져오기
git remote updateFootnotes
-
명령어로 discard를 하려면 ↩
# 마지막 커밋 해시
git log --pretty=format:'%h' -n 1# 유저정보
git config user.name
git config user.emailUsing Slack Slash Commands to Send Data from Slack into Google Sheets
- 사람들이 추천한 책을 기록한다
- 슬랙 -> 구글시트
- 슬랙 커맨드 설정
/book+ 구글앱스 스크립트 url 연결1 - POST로 전송 받은 데이터값을 기반으로 데이터 처리 완료
Footnotes
-
꿀벌개발일지 :: 구글 앱스 스크립트에서 비동기 작업 추가하기 doPost에서 비동기 처리 ↩
이미지 저장1
- 페이지에서 JavaScript를 통해 이미지 추출
- 캔버스에서 이미지 추출
- 서버에서 이미지 가져오기
- DevTools 프로토콜을 사용하여 이미지 추출
const tree = await page._client.send('Page.getResourceTree')
for (const resource of tree.frameTree.resources) {
const { content } = await page._client.send(
'Page.getResourceContent',
{ frameId: String(page.mainFrame()._id), url: resource.url },
)
const contentBuffer = Buffer.from(content, 'base64')
}page.on('response', async (response) => {
const url = response.url()
const buffer = await response.buffer()
})Footnotes
setExtraHTTPHeaders 호출하기
await page.setExtraHTTPHeaders(headers)인터셉트로 가로채기
await page.setRequestInterception(true)
page.on('request', (request) => {
const headers = {
...request.headers()
}
interceptedRequest({ headers })
})httpOnly, secure 플래그 쿠키값이 필요한 경우 CDPSession 실행 후 클라이언트와 통신한다.
const client = await page.target().createCDPSession()
const data = await client.send('Network.getAllCookies')로컬에 해당 쿠키정보를 임시로 저장해서 재활용하고 만료 시 갱신하는 방법을 사용.
fs.writeFileSync('cookies.json', JSON.stringify(data))
const { cookies } = JSON.parse(fs.readFileSync('cookies.json', 'utf8'))
await page.setCookie(...cookies)hash 링크로 연결될 경우 스크롤위치가 최상단으로 위치하기 때문에 문제(헤더가 고정일 경우)가 있을수도 있어서 scroll-margin-top으로 제어가 가능한 부분을 설명하고 있다.
- Add scroll margin to all elements which can be targeted - Piccalilli1
- Fixed Headers and Jump Links? The Solution is scroll-margin-top | CSS-Tricks
- Prevent content from being hidden underneath a fixed header by using scroll-margin-top – Bram.us
Footnotes
-
2ex유닛을 사용하여 선택한 글꼴의 x 높이의 상대적인 크기로 설정. ↩
function getReverseGeocodeData() {
const response = Maps.newGeocoder()
.setLanguage('ko')
.reverseGeocode(40.758577, -73.984464)
return response.results.map((result) => {
return {
formatted_address: result.formatted_address,
lat: result.geometry.location.lat,
lng: result.geometry.location.lng,
}
})
}