--- title: "Web 前端 - 근심을 잊는 한 장" canonical_url: "https://www.ikxin.com/ko/category/web" locale: ko meta: "og:title": "Web 前端" --- > Index of every page on this site: [llms.txt](https://www.ikxin.com/llms.txt) # Web 前端 ## [Github 팀 프로젝트에서 Vercel 무료 서비스를 공짜로 이용하기](https://www.ikxin.com/ko/article/vercel-team-free) Vercel은 Serverless 서비스를 제공하는 플랫폼으로, 정적 페이지를 프록시하거나 간단한 API를 생성하는 데 특히 적합합니다. 무료 플랜은 개인 프로젝트에 매우 친화적이며, 특히 중국 지역에서 우수한 CD [Web 前端](https://www.ikxin.com/ko/category/web) 2024.11.2523603회 조회 [댓글 0개](https://www.ikxin.com/ko/article/vercel-team-free#comments) [Vercel](https://www.ikxin.com/ko/tag/vercel) [![Vue.js에서 사라지는 HTML Video의 muted 속성](https://www.ikxin.com/_ipx/f_webp&s_448x314/https://img.8b5.cn/uploads/2024/03/22/65fd9a4b7d41f.png)](https://www.ikxin.com/ko/article/vue-muted-attribute) ## [Vue.js에서 사라지는 HTML Video의 muted 속성](https://www.ikxin.com/ko/article/vue-muted-attribute) 회사에 새로운 프로젝트가 생겼고, 제가 독립적으로 기술 스택을 선정하여 개발하게 되었습니다. 프로젝트 요구 사항은 영문 제품 소개 웹사이트를 제작하는 것이었으며, 프로젝트가 비교적 간단하고 기간도 길지 않은 점을 고 [Web 前端](https://www.ikxin.com/ko/category/web) 2024.03.234869회 조회 [댓글 0개](https://www.ikxin.com/ko/article/vue-muted-attribute#comments) [Vue.js](https://www.ikxin.com/ko/tag/vuejs) [ Nuxt](https://www.ikxin.com/ko/tag/nuxt) [![konva.js click 클릭 이벤트가 부모 요소로 버블링되는 것을 방지하기](https://www.ikxin.com/_ipx/f_webp&s_448x314/https://img.8b5.cn/2023/03/29/6423ea1d7d571.png)](https://www.ikxin.com/ko/article/konva-click-bubbling) ## [konva.js click 클릭 이벤트가 부모 요소로 버블링되는 것을 방지하기](https://www.ikxin.com/ko/article/konva-click-bubbling) KonvaJS에서는 이벤트 버블링이 기본적으로 활성화되어 있습니다. 즉, 자식 요소에서 이벤트가 발생하면 해당 이벤트가 부모 요소로 전파됩니다. 따라서 레이어에 click 이벤트를 등록하고 그 위에 그룹을 생성한 경 [Web 前端](https://www.ikxin.com/ko/category/web) 2023.03.295539회 조회 [댓글 0개](https://www.ikxin.com/ko/article/konva-click-bubbling#comments) [Canvas](https://www.ikxin.com/ko/tag/canvas) [![Vue.js에서 v-model과 model-value의 반응성 차이](https://www.ikxin.com/_ipx/f_webp&s_448x314/https://img.8b5.cn/2023/03/28/64229c4ad0677.png)](https://www.ikxin.com/ko/article/vue-model-reactivity) ## [Vue.js에서 v-model과 model-value의 반응성 차이](https://www.ikxin.com/ko/article/vue-model-reactivity) Vue.js의 v-model과 model-value는 모두 폼 데이터의 양방향 바인딩을 구현하는 데 사용되는 지시문입니다. v-model은 Vue.js에서 제공하는 문법 설탕으로, 개발자가 템플릿에서 폼 데이터의 양 [Web 前端](https://www.ikxin.com/ko/category/web) 2023.03.285257회 조회 [댓글 0개](https://www.ikxin.com/ko/article/vue-model-reactivity#comments) [Vue.js](https://www.ikxin.com/ko/tag/vuejs) [![Git Commit Message 코드 컨벤션 커밋 규칙](https://www.ikxin.com/_ipx/f_webp&s_448x314/https://img.8b5.cn/2022/05/19/62862f9890969.png)](https://www.ikxin.com/ko/article/git-commit-conventions) ## [Git Commit Message 코드 컨벤션 커밋 규칙](https://www.ikxin.com/ko/article/git-commit-conventions) 지난달 회사에 한 프런트엔드 전문가가 합류하여 우리 팀을 위한 몇 가지 기술 규칙을 정해 주었습니다. 그중 하나가 Git에 코드를 커밋할 때 Commit Message를 작성하는 규칙에 관한 것이었습니다. 처음에는 [Web 前端](https://www.ikxin.com/ko/category/web) 2022.05.195401회 조회 [댓글 0개](https://www.ikxin.com/ko/article/git-commit-conventions#comments) [Git](https://www.ikxin.com/ko/tag/git) ## [jQuery 온라인 t.cn 시나 웨이보 단축 URL 생성 단일 페이지 도구](https://www.ikxin.com/ko/article/jquery-sina-shorturl-tool) 최근 Ajax 기술을 공부하고 있어서 작은 Demo를 자주 작성하고 있습니다. 예를 들면 지난번에 작성한 「jQuery 온라인으로 QQ 이름과 아바타 가져오기」가 있습니다. 오늘 소개할 것도 Ajax 프로젝트로, 주 [Web 前端](https://www.ikxin.com/ko/category/web) 2017.08.106769회 조회 [댓글 0개](https://www.ikxin.com/ko/article/jquery-sina-shorturl-tool#comments) [jQuery](https://www.ikxin.com/ko/tag/jquery) [ 短网址](https://www.ikxin.com/ko/tag/short-url) [ AJAX](https://www.ikxin.com/ko/tag/ajax) [![WordPress 관리자 로그인 페이지 꾸미기](https://www.ikxin.com/_ipx/f_webp&s_448x314/https://img.8b5.cn/2019/06/27/5d14d6a46336d.jpg)](https://www.ikxin.com/ko/article/wordpress-admin-login) ## [WordPress 관리자 로그인 페이지 꾸미기](https://www.ikxin.com/ko/article/wordpress-admin-login) 저와 마찬가지로 WordPress 기본 관리자 로그인 페이지가 너무 못생겼다고 생각하는 분들이 많지 않나요? 강박증이 있는 저는 당연히 참을 수 없어서 관리자 로그인 페이지를 수정하는 플러그인을 여기저기 찾아보았습니 [Web 前端](https://www.ikxin.com/ko/category/web) 2017.08.055678회 조회 [댓글 0개](https://www.ikxin.com/ko/article/wordpress-admin-login#comments) [WordPress](https://www.ikxin.com/ko/tag/wordpress) [ CSS](https://www.ikxin.com/ko/tag/css) [ 美化](https://www.ikxin.com/ko/tag/beautify) ## [jQuery로 온라인에서 QQ 이름과 QQ 아바타 링크 가져오기](https://www.ikxin.com/ko/article/jquery-qq-profile) 어제 그룹에서 누군가 Dux 테마의 댓글 입력란에 QQ 번호를 입력하면 이름과 아바타를 바로 가져오는 기능을 어떻게 구현하는지 물어보았습니다. Dux 테마를 살펴보니 이 기능이 통합되어 있지 않았고, 오히려 Emlo [Web 前端](https://www.ikxin.com/ko/category/web) 2017.07.265256회 조회 [댓글 1개](https://www.ikxin.com/ko/article/jquery-qq-profile#comments) [jQuery](https://www.ikxin.com/ko/tag/jquery) [ QQ](https://www.ikxin.com/ko/tag/qq) [ 头像](https://www.ikxin.com/ko/tag/avatar) [![HTML, JavaScript, CSS 등의 소스 코드 온라인 압축 및 압축 해제](https://www.ikxin.com/_ipx/f_webp&s_448x314/https://img.8b5.cn/2019/06/25/5d11e3fe93731.png)](https://www.ikxin.com/ko/article/html-js-css-tools) ## [HTML, JavaScript, CSS 등의 소스 코드 온라인 압축 및 압축 해제](https://www.ikxin.com/ko/article/html-js-css-tools) 며칠 전 본 사이트에서는 여러분의 프런트엔드 HTML 학습을 돕기 위해 HTML 온라인 실행 도구를 공개했습니다. 오늘은 이어서 매우 유용한 소형 도구 세 가지를 공개합니다. 각각 HTML, JavaScript, C [Web 前端](https://www.ikxin.com/ko/category/web) 2017.07.256879회 조회 [댓글 1개](https://www.ikxin.com/ko/article/html-js-css-tools#comments) [CSS](https://www.ikxin.com/ko/tag/css) [ HTML](https://www.ikxin.com/ko/tag/html) [ JavaScript](https://www.ikxin.com/ko/tag/javascript) [![jQuery로 간단한 웹 페이지 배경 색상 그라데이션 구현](https://www.ikxin.com/_ipx/f_webp&s_448x314/https://img.8b5.cn/2019/06/25/5d11b0434fb46.jpg)](https://www.ikxin.com/ko/article/jquery-background-gradient) ## [jQuery로 간단한 웹 페이지 배경 색상 그라데이션 구현](https://www.ikxin.com/ko/article/jquery-background-gradient) 오늘 웹 페이지 배경을 만지작거리다가 웹사이트 전체를 투명하게 만들어 버렸습니다. 이렇게 하면 동적인 배경을 만들 수 있습니다. 처음에는 CSS + jQuery를 떠올렸지만, 한참 동안 이것저것 시도한 끝에 지빠귀 [Web 前端](https://www.ikxin.com/ko/category/web) 2017.07.248448회 조회 [댓글 0개](https://www.ikxin.com/ko/article/jquery-background-gradient#comments) [jQuery](https://www.ikxin.com/ko/tag/jquery) [![웹 페이지 특수 문자열 HTML 코드 모음](https://www.ikxin.com/_ipx/f_webp&s_448x314/https://img.8b5.cn/2019/06/25/5d11df0350d2e.png)](https://www.ikxin.com/ko/article/html-special-characters) ## [웹 페이지 특수 문자열 HTML 코드 모음](https://www.ikxin.com/ko/article/html-special-characters) 웹 페이지의 HTML을 작성할 때 특수 문자를 사용해야 하는 경우가 자주 있습니다. 이러한 문자는 키보드로 직접 입력할 수 없는 경우가 많기 때문에 해당 HTML 엔티티 코드를 사용해야 합니다. 이러한 코드는 HTM [Web 前端](https://www.ikxin.com/ko/category/web) 2017.07.195311회 조회 [댓글 0개](https://www.ikxin.com/ko/article/html-special-characters#comments) [HTML](https://www.ikxin.com/ko/tag/html) [![「본 사이트 최초 공개」온라인에서 실행하는 정적 HTML 도구 사이트](https://www.ikxin.com/_ipx/f_webp&s_448x314/https://img.8b5.cn/2019/06/25/5d11de54d7581.png)](https://www.ikxin.com/ko/article/online-html-tools) ## [「본 사이트 최초 공개」온라인에서 실행하는 정적 HTML 도구 사이트](https://www.ikxin.com/ko/article/online-html-tools) 프런트엔드를 공부할 때 테스트 코드를 실행해야 하는 경우가 자주 있습니다. 당시에는 주로 Chinaz의 웹마스터 도구와 같은 온라인 도구를 사용했습니다. 이제 프런트엔드 기술을 어느 정도 익혔기에, 더 많은 사람들이 [Web 前端](https://www.ikxin.com/ko/category/web) 2017.07.184523회 조회 [댓글 0개](https://www.ikxin.com/ko/article/online-html-tools#comments) [HTML](https://www.ikxin.com/ko/tag/html) [![순수 HTML 5 + CSS 3로 iPhone 6 휴대폰 모델 그리기](https://www.ikxin.com/_ipx/f_webp&s_448x314/https://img.8b5.cn/2019/06/25/5d11dac82c0e0.png)](https://www.ikxin.com/ko/article/html-css-iphone6-model) ## [순수 HTML 5 + CSS 3로 iPhone 6 휴대폰 모델 그리기](https://www.ikxin.com/ko/article/html-css-iphone6-model) Bilibili에서 순수 HTML5 작품 하나를 봤는데, 순수한 코드만으로 iPhone 렌더링 이미지를 그려 낸 작품이었습니다. 꽤 재미있다고 생각해서 여러분도 참고하시라고 올려 봅니다. 먼저 결과 이미지부터 보시죠 [Web 前端](https://www.ikxin.com/ko/category/web) 2017.07.114331회 조회 [댓글 0개](https://www.ikxin.com/ko/article/html-css-iphone6-model#comments) [CSS](https://www.ikxin.com/ko/tag/css) [ HTML](https://www.ikxin.com/ko/tag/html) ## [CSS로 사용자 지정 브라우저 스크롤바 스타일 구현](https://www.ikxin.com/ko/article/css-scrollbar-styling) 오늘 憧憬 블로그를 방문했을 때, 해당 사이트의 브라우저 기본 사이드 스크롤바가 사용자 지정 스타일로 변경되어 있는 것을 발견했습니다. 이후 인터넷으로 검색해 보니, 해당 스타일은 CSS를 통해 디자인할 수 있다는 [Web 前端](https://www.ikxin.com/ko/category/web) 2017.07.084439회 조회 [댓글 0개](https://www.ikxin.com/ko/article/css-scrollbar-styling#comments) [CSS](https://www.ikxin.com/ko/tag/css) ## [웹페이지에 누적 실행 시간을 추가하는 JavaScript 코드](https://www.ikxin.com/ko/article/javascript-uptime-timer) 이 사이트를 개설한 지 거의 20일이 되었습니다. 그리 긴 시간은 아닙니다. 이제 막 시작했을 뿐이니까요. 그래서 웹사이트가 실행된 시간을 기록할 수 있도록 온라인 타이머를 만들어 보려고 했습니다. 군말 없이 바로 [Web 前端](https://www.ikxin.com/ko/category/web) 2017.06.077290회 조회 [댓글 0개](https://www.ikxin.com/ko/article/javascript-uptime-timer#comments) ## [「군자는 막아도 소인은 막지 못한다」 브라우저에서 웹 페이지 HTML 소스 코드 보기 비활성화](https://www.ikxin.com/ko/article/disable-view-source-code) 때때로 간단한 HTML 웹사이트를 구축했지만 다른 사람이 웹 페이지의 소스 코드를 보지 못하게 하고 싶을 때가 있습니다. 이럴 때는 코드를 사용해 다른 사람이 HTML 코드를 보지 못하도록 해야 합니다. 먼저 다른 [Web 前端](https://www.ikxin.com/ko/category/web) 2017.05.265934회 조회 [댓글 0개](https://www.ikxin.com/ko/article/disable-view-source-code#comments) [HTML](https://www.ikxin.com/ko/tag/html) ## [「애도」 전체 웹사이트 페이지를 흑백으로 바꾸기](https://www.ikxin.com/ko/article/website-black-white) 지난해 유명 가수 차오런량(乔任梁)이 세상을 떠났을 때를 기억하시나요? 바이두 이미지는 이례적으로 그를 위해 흑백 웹페이지를 만들었고, 모든 사용자가 바이두 이미지에서 차오런량을 검색할 때 사이트 전체가 흑백으로 표 [Web 前端](https://www.ikxin.com/ko/category/web) 2017.05.227434회 조회 [댓글 0개](https://www.ikxin.com/ko/article/website-black-white#comments) [CSS](https://www.ikxin.com/ko/tag/css) [ HTML](https://www.ikxin.com/ko/tag/html) ```json {"@context":"https://schema.org","@graph":[{"@id":"https://www.ikxin.com/ko#website","@type":"WebSite","description":"근심을 잊는 한 장은 기술 탐구와 일상을 다루는 개인 웹사이트입니다. 웹 개발, 백엔드 및 DevOps 실무를 기록하고 소프트웨어 도구와 디지털 경험, 코드 밖의 견문과 생각을 나눕니다.","inLanguage":"ko-KR","name":"근심을 잊는 한 장","url":"https://www.ikxin.com/ko","translationOfWork":{"@id":"https://www.ikxin.com/#website"}},{"@id":"https://www.ikxin.com/ko/category/web#webpage","@type":"WebPage","description":"근심을 잊는 한 장은 기술 탐구와 일상을 다루는 개인 웹사이트입니다. 웹 개발, 백엔드 및 DevOps 실무를 기록하고 소프트웨어 도구와 디지털 경험, 코드 밖의 견문과 생각을 나눕니다.","name":"Web 前端","url":"https://www.ikxin.com/ko/category/web","isPartOf":{"@id":"https://www.ikxin.com/ko#website"},"potentialAction":[{"@type":"ReadAction","target":["https://www.ikxin.com/ko/category/web"]}]}]} ``` ## Sitemap See the full [sitemap](https://www.ikxin.com/sitemap.md) for all pages.