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,
}
})
}
Cool Cats: The Coolest NFT’s on the Blockchain!
const imageSrc = `https://s3.amazonaws.com/api.coolcatsnft.com/thumbnails/${ID}_thumbnail.png`
const query = {
sortBy: 'token_id_asc',
limit: 48,
page: 1,
face: 'angry',
hats: 'admiral',
shirt: 'astro',
tier: 'cool_1',
}
fetch('https://prod-api.coolcatsnft.com/cat?sortBy=token_id_asc&limit=48&page=1&tier=${tier}')
| key | values |
|---|---|
| face | angry, angry cute, angry scar, beard brown, beard pirate, beard tan, derp, ditto, dizzy, double face, face face, glasses, glasses funny, glossy, grin, happy, happy cute, hearts, mononoke, mummy, ninja black, ninja blue, ninja red, owo, pixel, rich, shocked, smirk, stunned, sunglasses blue, sunglasses cool, sunglasses cowboy, sunglasses heart, sunglasses pixel, sunglasses squad, sunglasses yellow, three eyes, tired, tvface 404, tvface bobross, tvface nosignal, tvface xp, unamused, uwu, wink, zombie |
| hat | admiral, admiral pink, afro black, afro brown, afro rainbow unicorn, antlers, apple, arrowhead, astro, astro cheeks, astro fishbowl, beanie black, beanie blue, beanie orange, beanie red, beret black, beret green, beret pink, beret red, bow, bucket hat blue, bucket hat green, bucket hat tan, bucket hat white, candle, costume dragon, costume frog, costume gorilla, cowboy black, cowboy brown, crown black, crown fire, crown gold, cupcake, deepsea bronze, deepsea orange, dutch, flower blue, flower pink, flower red, goggles seaweed, halo, halo fire, hat black, hat skull, hat visor blue, hat visor yellow, hat white, headband blue, headband red, helm army, helm biker, helm bronze, helm silver, horns, knight black, knight blue, knight red, mohawk green, mohawk purple, mohawk red, mullet blonde, mullet brown, ninja black, ninja blue, ninja red, nurse, piercings, pirate black, pirate red, prince, sunhat black, sunhat tan, sunhat white, sushi, top hat, tvhead grey, tvhead purple, tvhead white, unicorn horn, visor green, visor purple, wreath, wreath flowers |
| shirt | astro, astro black, astro orange, bandana green, bandana purple, bandana red, baseball blue, baseball red, buttondown black flannel, buttondown blue flannel, buttondown green, buttondown red flannel, buttondown tan, chain, combat black, combat green, costume dragon, costume frog, costume gorilla, costume hotdog, cowboy black, cowboy brown, deepsea bronze, deepsea orange, epaulette black, epaulette red, epaulette white, gown black, gown purple, gown white, hoodie black, hoodie purple, hoodie red, knight, knight black, knight leather, labcoat, lederhosen, monk, mononoke, ninja black, ninja blue, ninja red, nurse, overalls blue, overalls flannel, overalls pink, overalls red, overalls yellow, pirate black, pirate red, punk, robe blue, robe king, robe red, robe white, shirt bowtie, shirt white, shirt yellow, sweater black, sweater green chain, sweater orange, sweater pink, tanktop orange, tanktop pink, tanktop sailor black, tanktop sailor blue, tanktop sailor red, tanktop tattoo, tanktop white, tiger, toga, tshirt blue, tshirt green, tshirt metal, tshirt pink, tshirt red, tshirt white, tshirt yellow, viking brown, viking navy, wetsuit, winter blue, winter red, work blue, work red |
| tier | cool_1, cool_2, wild_1, wild_2, classy_1, classy_2, exotic_1, exotic_2 |
Footnotes
-
GitHub GraphQL API를 통해 쿼리할 수 있는 다양한 개체에 대한 개요. ↩
-
GitHub에서 플랫 데이터를 사용하는 방법에 대한 튜토리얼. 플랫 데이터는 개발자가 API 또는 CSV 파일과 같은 다양한 소스의 데이터를 GitHub 리포지토리로 쉽게 가져올 수 있는 기능입니다. 이 자습서에서는 GitHub Actions와 함께 플랫 데이터를 사용하여 다양한 소스에서 데이터 가져오기를 자동화하는 방법과 가져온 데이터를 사용하여 시각화 및 대화형 웹 애플리케이션을 만드는 방법을 다룹니다. 또한 플랫 데이터를 사용하는 방법을 보여주는 예제 프로젝트에 대한 링크를 제공합니다. 여기에는 Google 스프레드시트를 사용한 플랫 데이터 데모 저장소와 독일의 코로나19 백신 접종 기록 데이터가 포함된 저장소가 포함됩니다. ↩
-
사용자가 GitHub의 공개 리포지토리 내에서 코드 조각을 검색할 수 있는 GitHub 코드 검색에 대한 링크입니다. 다른 개발자의 코드를 빠르게 찾고 탐색할 수 있는 방법을 제공하며 새로운 라이브러리, 프레임워크 및 모범 사례를 찾는 데 사용할 수 있습니다. 검색 결과는 리포지토리, 언어, 파일 유형 및 기타 기준으로 필터링할 수 있으며 관련성, 별 또는 분기별로 정렬할 수 있습니다. ↩
- Use the Notion API to Create a Quiz with JavaScript - SitePoint
- Collecting Email Signups With the Notion API | CSS-Tricks
- 통합(integration)을 생성합니다.1
- 통합과 데이터베이스 공유
2.1
•••->Add connections
Footnotes
검색기능을 정말 간단하게 구현하고 싶을때: 프로그래밍 가능한 검색 엔진을 사용하면 웹사이트, 블로그 또는 웹사이트 모음에 대한 검색 엔진을 만들 수 있습니다. 웹 페이지와 이미지를 모두 검색하도록 엔진을 구성할 수 있습니다. 순위를 미세 조정하고 자신의 프로모션을 추가하고 검색 결과의 모양과 느낌을 사용자 지정할 수 있습니다. 엔진을 Google 애드센스 계정에 연결하여 검색으로 수익을 창출할 수 있습니다.
- 혜택은 웹뷰로 존재함
- GraphQL을 사용 중
useSWR(
`{
pages {
user_group
highlight_color
page_list {
type
page_id
page_name
is_new
}
}
}`,
(query) => request('https://api.zigzag.kr/api/2/graphql', query)
)
# /home/USERNAME/.zshrc
HOME="/mnt/c/Users/cbcru"
DL="$HOME/Downloads"
if [[ $PWD == $HOME ]]; then
cd $DL
fi
extractFrames() {
ffmpeg -i $1 -vf fps=30 output_frame_%d.png
}
# $1 = frames로 사용될 파일들
# $2 = output 파일
# Example: concatFrames ./frame_%5d.png output.webm
concatFrames() {
ffmpeg -framerate 30 -i $1 -c:v libvpx-vp9 -pix_fmt yuva420p $2
}
# $1 = frame로 사용될 파일
# $2 = output 파일
# Example: frameToVideo frame.jpg output.mp4
frameToVideo() {
ffmpeg -loop 1 -i $1 -c:v libx264 -t 10 -pix_fmt yuv420p $2
}
# $1 = 인코딩할 영상 video.mp4
# $2 = output 파일명
encodingVideo() {
ffmpeg -an -i $1 -vcodec libx264 -pix_fmt yuv420p -profile:v baseline -level 3 "${$2}.mp4"
ffmpeg -i "${$2}.mp4" -vcodec libvpx-vp9 -b:v 1M -acodec libvorbis "${$2}.webm"
}