HTML
-
Wails: Go언어를 이용해 크로스 플랫폼 앱 만들기컴퓨터/Go language 2022. 6. 26. 12:38
Wails The Wails Project | Wails Build beautiful cross-platform applications using Go wails.io 소개 Wails는 Go언어를 이용하여 크로스 플랫폼 앱을 만들게 도와준다. (MacOS/Windows/Linux) 프런트엔드는 Svelete, React 등을 사용해서 할 수 있고, wails는 Go언어로 빌드나 함수 -> JS를 도와준다. 설치는 쉬우니 공식 사이트를 확인하면 된다. @공식 문서 만들면서 배운 것 Svelte랑 프런트엔드 쪽은 많이 안 해봐서 쉬운 것부터 시작했다. 대학교 공지 홈페이지에서 각 카테고리별로 Go언어로 파싱하고 앱에 뿌리는 것이다. Go언어 Struct -> TypeScript 우선 Go언어로 짠 struc..
-
Rust: actix-rs에서 HTML tera 엔진 렌더링컴퓨터/Rust 2022. 6. 24. 11:24
actix-rs Actix Web | A powerful, pragmatic, and extremely fast web framework for Rust. Request Routing The built-in Actix Web request router can be used with or without macros attached to handlers, and always provides flexible and composable methods of creating routing tables. Includes support for matching dynamic path segments, path prefix actix.rs 소개 이 글에선 Python django 처럼 HTML 엔진을 이용해서 코드를 HT..
-
Rust: HTML 파싱하기 (crawling)컴퓨터/Rust 2021. 7. 15. 19:06
scraper causal-agent/scraper HTML parsing and querying with CSS selectors. Contribute to causal-agent/scraper development by creating an account on GitHub. github.com In Go lang Python의 beautifulsoup4, selectolax, Go의 soup처럼 그리 쉽지는 않았다. 아래 대학교 공지를 불러오는 Go언어에서 작성한 코드를 Rust로 작성할 것이다. import ( "fmt" "strconv" "strings" "github.com/anaskhan96/soup" ) // AjouLink is the address of where notices of aj..
-
HTML webp 이미지 포맷컴퓨터/HTML & JS & TS 2020. 8. 17. 11:14
webp [weppy] A new image format for the Web | WebP | Google Developers A new image format for the Web. developers.google.com 소개 : webp 포맷은 구글에서 만든 무손실/손실 지원 이미지 압축 포맷 방식이다. (jpeg, png, gif) Google Lighthouse(사이트 성능 점수 확인)를 써보니, next-gen 이미지 포맷을 사용하라고 하길래 써봤는데, 퀄리티도 나쁘지 않고, 로딩이 빨라져서 webp 포맷을 계속 사용할 것 같다. (특히 썸네일 파일을 webp로 압축하여, 로딩 속도를 조금 높였다. (약 0.8s) 1. 설치법 옵션 1) binary 파일을 받아서 직접 실행 https://sto..
-
티스토리 highlight JS 코드 복사 플러그인컴퓨터/HTML & JS & TS 2020. 7. 23. 14:48
highlight JS Badge https://github.com/RickStrahl/highlightjs-badge RickStrahl/highlightjs-badge Addon component to highlightjs that lets you copy code snippets to the clipboard and displays the active syntax - RickStrahl/highlightjs-badge github.com 소개 : @RcikStrahl라는 분의 highlight JS badge를 티스토리에 적용하는 방법을 소개하겠습니다. 우선 아래 처럼, 코드 우측 상단에 배지가 생기고, 클릭하면 코드가 복사되는 플러그인입니다. 클래스 안에 codebadge를 추가하고, clicke..
-
소스 하이라이터 (syntaxhighlighter, highlight.js)컴퓨터/HTML & JS & TS 2018. 2. 19. 02:14
syntaxhighlighter를 사용해 왔지만 스킨을 바꾸면서 더 괜찮아 보이는 라이브러리를 찾았다. prism.js도 괜찮아 보인다. highlight.js 사이트└syntaxhighlighter, primsjs 와 같이 컴퓨터 언어 하이라이터└제작자: isagalaev└효과 체험 하기: https://michalsnik.github.io/aos/└176개의 언어 지원과 79가지의 스타일 + 자동 언어 탐지└기본 작동: 와 안 프로그래밍 언어를 하이라이팅 사이트에 들어가 일단 체험하세요. ▷ 설치 방법 1. 간단히 사이에 아래를 추가하면 끝이다. ▷ 사용법 syntaxhighlighter 과 비슷하다. // C Coded 예제) public static void main(String[] args) {..
-
CSS 3D glitch 글씨 효과 (shadow)컴퓨터/HTML & JS & TS 2017. 6. 28. 14:55
※ 폰트는 굵고 큰 게 좋음 See the Pen <a href='https://codepen.io/alfex4936/pen/vdzgxB/'>3d text style</a> by 최석원 (<a href='https://codepen.io/alfex4936'>@alfex4936</a>) on <a href='https://codepen.io'>CodePen</a>.
-
크롬, 사파리 바로가기 홈 화면에 추가 HTML 메타 태그 (meta)컴퓨터/HTML & JS & TS 2016. 11. 15. 18:33
크롬이나 사파리에서 옵션에 '홈 화면에 추가'라는 기능이 있다. 따로 메타 태그를 사용하지 않으면 아이콘이 랜덤으로 생성된다. (구글 플러스 프로필 사진과 같은 글자 아이콘) 바로가기를 이용하여 사이트를 접속하면 크롬에서는 주소창이 없고, 최근 앱 메뉴에 별도의 액티비티로 간주된다. skin.html 에 사이에 아래 코드를 추가한다. 스킨 편집에서 android.png , ios.png를 업로드한다. 안드로이드 = 192 x 192 (px) iOS = 128 x 128 (px) apple-mobile-web-app-status-bar-style 메타 태그는 default, black, black-translu..