개발 공부66 [HTML] 버튼 클릭 시 팝업창 띄우는 법 (window.open 활용) 💡 버튼을 눌렀을 때 새 창(팝업창)을 띄우고 싶다면?웹페이지에서 버튼을 클릭했을 때 새로운 작은 창(팝업)을 열고 싶을 때가 있어요.예를 들어:이용약관 보기미리보기 창작은 알림창 등이럴 때는 JavaScript의 window.open() 함수를 사용하면 쉽게 팝업창을 띄울 수 있습니다.🛠️ 버튼 클릭 시 팝업창 띄우기: 코드 예제와 설명✅ 기본 예제 (새 창 열기)팝업 열기🎯 포인트 설명첫 번째 인자: 열고 싶은 URL두 번째 인자: 창 이름 ('_blank'도 가능)세 번째 인자: 옵션 (width, height, top, left 등 크기와 위치 설정)⚡ 다양한 옵션 설정 예시'width=600,height=500,top=100,left=200,resizable=yes,scrollbars=ye.. 2025. 5. 9. [HTML] 버튼 클릭 시 페이지 맨 위로 부드럽게 올라가는 법 (scroll behavior 활용) 💡 "맨 위로" 버튼을 눌렀을 때 부드럽게 스크롤되게 하고 싶다면?블로그, 쇼핑몰, 랜딩 페이지를 보면 하단에 "맨 위로 올라가기" 버튼이 자주 있죠.이때 페이지가 갑자기 위로 확 이동하지 않고,부드럽게 올라가는 스크롤 효과를 주면 사용자 경험(UX)이 더 좋아집니다.이 글에서는 scroll behavior와 window.scrollTo()를 활용한 구현 방법을 알려드립니다.🛠️ 부드럽게 맨 위로 올라가기: 코드 예제와 설명✅ 기본 예제 (scroll behavior: smooth)맨 위로 가기🎯 포인트 설명window.scrollTo({ top: 0 }); 👉 위쪽 0 위치로 이동behavior: 'smooth' 👉 부드러운 스크롤 효과 적용behavior: 'auto' 👉 부드럽지 않고 즉.. 2025. 5. 8. [HTML] 버튼 클릭 시 특정 영역을 보여주거나 숨기는 법 (display 속성 활용) 💡 버튼을 눌렀을 때 특정 영역을 숨기거나 보여주고 싶다면?웹페이지를 만들다 보면 FAQ 펼치기, 더보기 버튼, 숨겨진 안내창 표시처럼클릭 시에만 특정 영역이 보이게 하거나 숨기고 싶을 때가 많아요.이럴 때 CSS의 display 속성과 JavaScript의 style 조작을 활용하면 간단하게 구현할 수 있습니다.🛠️ 버튼 클릭 시 영역 숨기기/보이기: 코드 예제와 설명✅ 기본 예제 (JavaScript로 display 조작)보이기 / 숨기기 여기에 숨겨진 내용이 들어갑니다.🎯 포인트 설명display: none; 👉 해당 요소를 완전히 숨김 (자리도 차지하지 않음)display: block; 👉 일반 블록 요소로 다시 보이게 설정if (box.style.display === 'none') ?.. 2025. 5. 7. [서버 기초] Proxy와 Reverse Proxy, 헷갈리는 프록시 개념 쉽게 이해하기! 💡 "프록시? 리버스 프록시? 뭐가 다른데?"서버 관련 문서나 강의 보면"Proxy""Reverse Proxy"비슷하게 생긴 이름에 많이 헷갈리셨죠? 🤔사실 둘은 위치와 역할이 완전히 다릅니다. 오늘은 그림과 예시로 아주 쉽게 구분해드릴게요! 😊🧭 Proxy란?Proxy(프록시)는클라이언트 쪽에서 요청을 대신 보내주는 중간 서버입니다.✅ 즉, 내가 직접 서버에 요청하는 게 아니라프록시 서버에게 대신 부탁하는 거예요. 예시:회사 내부 네트워크 → 프록시 서버 → 인터넷VPN → 나 대신 다른 IP로 요청"우회" 느낌!📌 사용자 → 프록시 → 서버🔁 Reverse Proxy란?Reverse Proxy(리버스 프록시)는서버 쪽에서 요청을 받아서 내부 서버로 전달해주는 중간 관리자입니다.✅ 사용자들은.. 2025. 5. 2. [HTML] 버튼 클릭 시 다른 페이지로 이동하는 법 (a 태그 vs window.location) 💡 버튼을 눌렀을 때 다른 페이지로 이동시키고 싶다면?웹페이지에서 버튼을 클릭하면 다른 페이지로 이동하는 기능이 필요한 경우가 많아요. 태그를 써도 되고, JavaScript의 window.location을 써도 가능해요.이 글에서는 두 가지 방법의 차이점과 사용 예제를 알려드립니다.🛠️ 방법 1. a 태그 사용하기 (HTML만으로 이동)가장 간단한 이동 방법입니다. 이동하기✅ 장점:HTML만으로 구현 가능새 탭에서 열고 싶으면 target="_blank" 추가 새 탭에서 이동🛠️ 방법 2. JavaScript window.location 사용하기JS로 제어하고 싶을 때 사용하는 방법입니다. 이동하기✅ 장점:이동 시점이나 조건을 JS 코드로 더 세밀하게 제어 가능예: 로그인 확인 후 이동, 확.. 2025. 5. 2. [서버 기초] 세션, 쿠키, JWT? 로그인 상태 유지 방식 깔끔 정리! 💡 "로그인했는데, 어떻게 내가 나인지 기억하는 거야?"웹사이트에 로그인했더니"오늘도 로그인 안 풀리고 잘 유지되네?"그런데 로그인 유지하는 방법은 여러 가지가 있어요.세션(Session)쿠키(Cookie)JWT (JSON Web Token)이 세 가지가 왜 다른지, 어떻게 쓰는지 오늘 깔끔하게 정리해드릴게요! 😊🧾 쿠키(Cookie)란?쿠키는브라우저에 저장되는 작은 데이터 파일입니다. 📦 특징:클라이언트(브라우저)가 보관매번 요청할 때 자동으로 같이 전송Set-Cookie 헤더로 서버가 설정예시:Set-Cookie: session_id=abcd1234; HttpOnly;✅ 주로 세션 ID 저장 용도로 사용!🛡️ 세션(Session)이란?세션은서버가 사용자 정보를 서버 메모리나 DB에 저장하고클.. 2025. 5. 1. 이전 1 2 3 4 ··· 11 다음 반응형
