[Web] 🍭웹 팝업의 종류와 구현 방법(레이어 팝업, 모달리스 팝업, 모달팝업)

웹 팝업은 사용자의 경험과 상호작용에 큰 영향을 미치는 중요한 UI 요소이다. 최근에 프로젝트를 하면서 메인 페이지에 몰아져 있는 팝업 코드들이 코드가 길어짐에 따라 정리가 안되는 것 같아서 팝업에 대한 내용을 한번 정리하고 따로 파일로 구분해보려고 한다.이번에는 레이어 팝업, 모달리스 팝업, 모달 팝업의 개념, 특징, 장단점, 사용 사례, 구현 방법을 자세히 설명하고, 비교해보려고 한다. 1. 레이어 팝업 (Layer Popup)개념레이어 팝업은 웹 페이지 내부에서 특정 위치에 고정된 팝업페이지 레이아웃의 일부처럼 보이며, 배경과 상호작용이 가능특징페이지 흐름을 방해하지 않음특정 위치에 고정되거나 페이지 스크롤에 따라 움직이지 않음사용자가 배경과 자유롭게 상호작용 가능장점사용자 흐름을 크게 방해하지 않..

• format_list_bulleted web_dev
• · 2024. 11. 25.
• textsms

[DOCS] API 문서

1. 문서의 목적과 대상 정의- 목적: API 문서의 목적을 명확히 해야 한다. 개발자가 API를 빠르게 이해하고 효율적으로 사용할 수 있도록 돕는 것이 주 목적이다.- 대상: 문서를 사용할 대상자를 정의한다. 주로 다른 프론트엔드 개발자, 백엔드 개발자 또는 API를 사용할 어떤 소프트웨어 엔지니어가 대상일 수 있다. 2. 문서의 기본 구조 설정API 문서의 기본 구조는 일반적으로 다음과 같다.- 소개: API의 개요, 사용 목적, 주요 기능 설명.- 인증 방법: 사용자 인증을 위한 방법 설명(API 키, 토큰 등)- 에러 코드: 공통 에러 코드 및 그 의미 설며.- 엔드포인트: 각 API 엔드포인트의 상세설명, 요청 방식, 파라미터, 응답 데이터 등 1) 엔드포인트 상세 설명- 경로(URL): 엔드포..

• format_list_bulleted web_dev
• · 2024. 5. 7.
• textsms

[Framework] Spring vs Springboot | 정의, 특징, 사용 이유, 생성 방법

스프링(Spring)이란? 엔터프라이즈용 Java 애플리케이션 개발을 편하게 할 수 있게 해주는 오픈 소스 경량급 애플리케이션 프레임워크 엔터프라이즈용 Java 애플리케이션 개발을 편하게 할 수 있게 해주는 기업에서 운영하는 웹 서비스에는 비지니스 로직이라는 것이 있다. 비지니스 로직이란, 기업이 제공하는 서비스를 코드로 구현한 것으로, 사용자의 요구사항을 해결하기 위한 실질적인 코드들을 의미한다. 스프링이 등장하기 이전에는 비지니스 로직을 구현하기 위해 기술 자체에 대한 공부를 추가적으로 해야만 했다. 비지니스 로직을 구현하는 기술 자체가 복잡하고 어려웠기 때문이다. 그러나, 스프링은 이전 기술에 비해 사 용 방법이 상대적으로 덜 복잡하다. 따라서, 개발 초기에 기본적인 설정과 적용시킬 기술들만 잘 선..

• format_list_bulleted Java/framework
• · 2023. 7. 24.
• textsms

안산문화예술의전당 리뉴얼 _포트폴리오(2022.06.13~07.05)

사이트 주소https://jiwonch.github.io/ansanArtsCenter_pf/ 안산문화예술의전당 jiwonch.github.io WireFrameMainMain - 반응형(tablet)Main - 반응형(Mobile)SubSub(Mobile)     문서 작업

• format_list_bulleted Portfolio/web
• · 2022. 7. 6.
• textsms

따라하기 - 햄버거 메뉴 만들기

따라하기 See the Pen 햄버거 메뉴 만들기 by JIWON CHOI (@jiwonch) on CodePen. 참고 사이트 https://designer-ej.tistory.com/entry/Navbar-%ED%96%84%EB%B2%84%EA%B1%B0-%EB%A9%94%EB%89%B4-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%981-Html-CSS-JS [Navbar] 햄버거 메뉴 애니메이션1 - Html, CSS, JS ⭐햄버거 메뉴 애니메이션 1 2nd bar는 투명하게 사라지고, 1st, 3rd bar가 회전하며 X표시. See the Pen ExNKxGR by Eunji Jeon (@emcjrl) on CodePen. body { display: flex..

• format_list_bulleted web_dev
• · 2022. 6. 1.
• textsms