📌 Shorten URL 이란?긴 원본 URL을 단축시켜서, 간결한 URL로 만드는 기술 📌 Short URL 생성 원리일반적인 URL 단축 서비스에서는 긴 URL을 직접 인코딩하지 않고, DB에 해당 URL을 저장하고 생성된 Index(또는 고유 ID)를 인코딩해서 단축 URL을 생성한다.1. 원본 URL → https://example.com/some/very/long/url 2. DB에 저장 후 → 고유 Index: 125 3. Index 125를 base62 방식으로 인코딩 → "cb" 4. 단축 URL: https://short.ly/cb 🔐 Base62 인코딩 방식 사용이렇게 하는 이유는 Base64를 쓰면 +, /는 URL에서 쿼리 문자열이나 경로 처리 시 문제를 일으킬 수 있기 때문..
CSS Diner는 CSS 선택자를 학습하고 연습할 수 있는 재미있는 웹 기반 게임이다.사용자가 HTML 코드에 적용할 올바른 CSS 선택자를 작성하면, 게임의 각 레벨을 클리어하며 점점 더 복잡한 선택자를 익힐 수 있다. 이 게임은 CSS를 배우거나 복습하고 싶은 초보자와 중급자를 위한 좋은 도구이고특히 선택자 공부를 하고 싶은 사람들께 추천한다.크롤링 연습하시는 분들께도 많은 도움이 될 것 같다. https://flukeout.github.io/ CSS DinerA fun game to help you learn and practice CSS selectors.flukeout.github.io 가장 쉬운 난이도인 1번부터 가장 어려운 32번까지 있다.ㅋㅋ 화면에서 고르라고 하는 물건을 고르는 CSS..
나만 알기에는 아까운 사이트 `Learn Git Branching` 은 Git을 쓸 때 필요한 브랜치에 대한 개념을 잡는 것을 돕기 위해 만들어진 사이트이다. https://learngitbranching.js.org/?locale=ko Learn Git BranchingAn interactive Git visualization tool to educate and challenge!learngitbranching.js.org 처음 접속하면 이렇게 팝업이 뜨는데 ESC 누르면 바로 배쉬창에 아무거나 연습해 볼 수 있다.단계별로 연습하고 싶은 사람은 아래 팝업에서 레벨을 선택하면 된다. 콘솔에 명령어를 입력해도 되고,브랜치 이름을 직접 클릭해도 checkout 이 된다~
ttps://www.tablesgenerator.com/html_tables HTML Tables generator – TablesGenerator.comYou can import table data by uploading file in CSV format (Comma Separated Value). Most spreadsheet software, both desktop and online, allows to save tabular data in CSV format — it is usually available in the File menu under the name "Save As..." or "Exwww.tablesgenerator.com프론트엔드 개발 작업 하시다보면 테이블을 만들어야 하는 경우가..
자바 온라인 IDE 모음 👩🏼💻 인텔리제이나 이클립스를 설치하지 않고도,브라우저에서 바로 실행가능한 자바 IDE 웹 컴파일러 사이트 두 개 가져와 봤어요.코테 문제 풀 때 간단히 코드 테스트 하는 용도로 사용하시면 좋을 것 같습니다. 제가 추천하는 자바 웹코딩 사이트는Online Java IDE와 JDoodle, MyCompiler 입니다.간단하게 코테 결과 콘솔에 실행할 용도로는 MyCompiler 추천합니다~ 어떤 사이트가 더 적합할지는 주로 개발 환경과 요구되는 기능의 수준에 따라 달라집니다.Jdoodle은 경량화된 코드 테스트와 다중 언어 지원에 초점이 맞춰져 있어, 초보자나 간단한 코드 실행 및 결과 확인에 적합하며, 복잡한 디버깅이 필요한 대규모 프로젝트보다는 학습이나 빠른 테스트..
웹디자인에서 색채는 전체적인 분위기를 구성하는 중요한 요소입니다. 색은 시각적으로 사람에게 가장 먼저 인식되는 감각인데요.같은 색감이라도 명도나 채도에 따라 느낌이 달라지며, 보는 사람의 감정까지 변화시킵니다. 웹디자인을 할 때 브랜드 이미지와 개성을 표현하기 위해 특정 색감을 강조하여 활용하기도 합니다. 미국의 컬러 리서치 연구소 (CR)에 따르면, 소비자가 상품을 결정하는 시간은 90초 안에 이루어진다고 합니다. 이때 상품에 대한 판단 80~90%가 색상에 의해 결정된다고 하는데요. 이처럼 고객의 마음을 이끌기 위해 색감은 기업 마케팅의 중요한 부분입니다. 온라인상에서 기업을 대표하는 요소인 홈페이지의 색감은 판매 상품의 긍정적인 이미지를 전달하고, 방문자의 재방문을 유도하기 위해 매우 중요한 ..
✨사진의 형태를 다양한 모양으로 바꾸기 ✨ 안녕하세요. 사진 형태를 재미있는 모양으로 수정해주는 기발한 사이트 하나 소개해 드릴게요. Fancy Border Radius GeneratorGenerator to build organic shapes with CSS3 border-radius9elements.github.io 이 사이트에서 마우스로 이미지를 원하는 모양으로 드래그 해주면 border-radius 프로퍼티 값을 자동으로 계산해서 알려준답니다. 값을 복사해서 vscode로 가져오면 직접 프레임을 만들지 않아도 쉽게 사진 테두리를 원하는 모양으로 자를 수 있어요. 사진이 정사각형에 가까울수록 내가 설정해 준 모양으로 만들기가 쉬워요. ☑️ HTML 코드☑️ CSS 코드 border-radiu..
