jonbeo 님의 블로그

안녕하세요 😊웹페이지에서 공지사항, 이미지 확대, 로그인 창 등을 띄울 때모달 팝업은 정말 자주 사용됩니다.이번 글에서는 jQuery로 간단하게 모달 팝업을 구현하는 방법을 단계별로 안내드립니다.📍 1. 기본 HTML 구조모달 열기 × 모달 제목 여기에 내용을 작성하세요. .modal : 모달 전체 영역 (기본적으로 숨김).modal-content : 팝업 내부 내용.close : 닫기 버튼📍 2. CSS 스타일.modal { display: none; /* 기본 숨김 */ position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0..

안녕하세요 😊웹페이지를 구성할 때 메뉴, 사이드바, 보조 정보 영역을 만들다 보면“이건 로 해야 하나, 로 해야 하나?” 고민되는 경우가 있습니다.두 태그는 비슷해 보이지만 의미와 목적이 다릅니다.이번 글에서는 와 의 차이, 사용 예시, 접근성 팁을 정리해보겠습니다.📍 1. 태그란?페이지의 보조 콘텐츠를 나타내는 태그메인 콘텐츠와 직접적인 관련은 없지만 참고·보조 정보 제공사이드바, 광고 영역, 관련 글 목록, 인용구 등에 사용예시 관련 글 HTML5 시맨틱 태그 정리 CSS Flexbox 완벽 가이드 📌 특징메인 콘텐츠 흐름과 독립적메인 영역 외에도, 글 안의 참고 자료·팁 상자도 가능📍 2. 태그란?페이지나 사이트 내의 탐색 링크 집합을 나타냅니다.메뉴, 카테고리, 목..

안녕하세요 😊React를 사용하다 보면“이 계산은 매번 다시 하지 않아도 되는데…”“렌더링이 되어도 이 값은 유지하고 싶다…”이럴 때 유용한 Hook이 바로 **useMemo**와 **useRef**입니다.이번 글에서는 두 Hook의 차이점과실무에서 어떻게 활용할 수 있는지 예제와 함께 정리해드리겠습니다.📍 1. useMemo – 계산 결과 메모이제이션기본 개념의존성 배열이 변할 때만 함수를 실행하고, 그 외에는 이전 계산값을 재사용 예제import { useMemo, useState } from "react";export default function ProductList({ products }) { const [filter, setFilter] = useState(""); const filte..

안녕하세요 😊비동기 처리(Asynchronous)는 현대 JavaScript 개발에서 빼놓을 수 없는 핵심 개념입니다.특히 API 요청, 파일 읽기, 타이머 등 시간이 걸리는 작업을 효율적으로 다루기 위해Promise와 async/await는 필수 문법입니다.이번 글에서는 초보자도 쉽게 이해할 수 있도록Promise → async/await 변환과 실무에서 깔끔하게 쓰는 패턴을 정리해보겠습니다.📍 1. Promise 기본 구조function getData() { return new Promise((resolve, reject) => { setTimeout(() => resolve("데이터 로드 완료"), 1000); });}getData() .then((res) => console.log(..

안녕하세요 😊이번 글에서는 실무에서 가장 많이 쓰는 SCSS 핵심 문법 6가지를 한 번에 정리해보겠습니다.예제 위주로 설명드리니, 그대로 복붙해서 사용하셔도 됩니다!1) 변수(Variables) – 테마/반복 값 관리에 필수$primary: #1abc9c;$radius: 12px;.button { background: $primary; border-radius: $radius;}색상, 간격, 라운드 값 등 재사용 값을 한 곳에서 관리할 수 있어 유지보수가 쉬워집니다.2) 중첩(Nesting) – 구조가 보이는 SCSS.card { padding: 16px; .title { font-weight: 700; } .desc { color: #666; } &:hover { box-shadow: 0..

안녕하세요 😊HTML5에서는 문서 구조를 더 명확히 하기 위해 의미론적(Semantic) 태그들이 있습니다.그중에서도 과 은 초보자들이 헷갈리기 쉬운 태그인데요,이번 글에서 차이점과 올바른 활용 방법을 쉽게 정리해드리겠습니다.📍 1. 태그란?문서의 주제별 구역을 나누는 태그제목(~)과 함께 쓰이는 경우가 많음같은 주제의 콘텐츠를 묶어 구조적으로 표현할 때 사용예시 회사 소개 우리 회사는 2020년에 설립되었습니다... 📌 포인트주제별 덩어리 구분여러 이 모여 문서를 구성📍 2. 태그란?독립적으로 배포하거나 재사용 가능한 콘텐츠를 나타냄기사, 블로그 글, 포럼 글, 댓글, 제품 카드 등에 사용예시 HTML5 태그 가이드 이 글에서는 HTML5 구조 태그에 대해 설명합니다... 📌 포인트..

안녕하세요 😊이번 글에서는 jQuery를 사용해 탭(Tab) 메뉴를 만들어보겠습니다.탭 메뉴는 한 화면에서 콘텐츠를 구분해 보여줄 때 가장 많이 쓰이는 UI 패턴입니다.기본 구조 → 스타일 → jQuery 로직 순서로 차근차근 진행하고,마지막엔 접근성(ARIA) 과 애니메이션/딥링크(해시) 까지 확장해보겠습니다.1) 기본 HTML 마크업탭은 보통 탭 버튼 목록 + 패널 영역으로 이루어집니다. 공지사항 이벤트 FAQ 공지사항 내용… 이벤트 내용… FAQ 내용…role, aria-* 속성으로 스크린리더에서도 의미가 전달되도록 합니다.처음에는 첫 번째 패널만 보이고, 나머지는 hidden 처리합니다.2) 기본 CSS 스타일보기 좋고, 클릭 영역이 넉넉한 탭을 만듭니다..tabs { display..

안녕하세요 😊이번 글에서는 React 18 이후 도입된 동시성(Concurrency) 관련 Hook인 **useTransition**을 알아보겠습니다.useTransition은 덜 중요한 상태 업데이트를 **비동기 전환(transition)**으로 표시하여, 사용자의 타이핑/클릭 같은 긴급한 인터랙션이 느린 렌더링에 막히지 않도록 도와줍니다.1) useTransition 한 줄 정의긴급도 낮은 업데이트를 “전환”으로 표시해, UI가 끊기지 않게 만드는 Hook반환값: [isPending, startTransition]isPending: 전환 중인지 여부 (로딩 스피너, 로딩 텍스트 등에 활용)startTransition(cb): cb 안의 상태 업데이트를 낮은 우선순위로 실행2) 언제 쓰면 좋은가요?검..

안녕하세요 😊개발하면서 포트폴리오를 만들거나 블로그, 티스토리, 깃허브에코드를 깔끔하게 캡처해서 올리고 싶은 적 있으셨죠? 그럴 때 사용하면 좋은 Visual Studio Code 확장 프로그램이 바로✨ CodeSnap입니다! 이번 글에서는 CodeSnap의 설치 방법부터예쁘게 캡처하는 꿀팁까지 차근차근 알려드릴게요!📍 1. CodeSnap이란?CodeSnap은 VS Code에서 코드 블록을 이미지로 예쁘게 캡처할 수 있는 확장 프로그램입니다.📸 자동 배경 + 그림자 효과🎨 테마 자동 반영✂️ 캡처할 영역 드래그만 하면 끝!디자인 감성 살리면서, 코드 스니펫을 깔끔하게 공유할 수 있는 최고의 도구예요.📍 2. 설치 방법VS Code 좌측 Extensions (확장 프로그램) 아이콘 클릭검색창에 ..

안녕하세요 😊웹사이트에서 자주 볼 수 있는 UI 중 하나가 바로클릭하면 열리고 닫히는 FAQ 형태의 아코디언 메뉴입니다.이런 기능을 대부분 JavaScript로 구현하는 경우가 많지만,사실 HTML5의 태그만으로도 아주 간단하게 구현이 가능합니다!오늘은 초보자 분들도 쉽게 이해할 수 있도록와 태그의 사용법과 함께실전 예제까지 꼼꼼히 알려드리겠습니다.📍 1. 태그란?HTML5에서 새로 추가된 태그숨겨진 내용을 클릭 시 펼쳐서 보여주는 기능JavaScript 없이도 동작하는 접이식 인터페이스함께 사용되는 태그는보여지는 제목 부분, 즉 클릭하는 영역입니다.📍 2. 기본 예제 코드 자주 묻는 질문 답변 내용이 이곳에 표시됩니다. 📌 작동 방식:사용자가 summary를 클릭하면내부의 내용이 열..