kosa-web

Using Web Technologies in 2024
📌: KOSA 웹 프론트엔드 & JSP 실습 코드 모음

🚀 Introduction

KOSA 전자정부 표준 프레임워크 기반 공공프로젝트 개발 전문가 양성과정에서 진행한 웹 프론트엔드 및 서버사이드(JSP) 실습 코드를 정리한 저장소입니다. HTML/CSS 기초부터 JavaScript, jQuery, Ajax, Bootstrap을 거쳐 JSP 기반 서버 프로그래밍까지, 웹 개발 전반의 학습 흐름을 담고 있습니다.

---

✨ Features

• 📂 개발 환경별 폴더 구분 Eclipse(JSP/서블릿 기반 실습)와 VSCode(순수 프론트엔드 실습)로 폴더를 나누어 관리

• 🏷️ HTML 기초 & 실전 폼 태그, 폼, 표, 이미지 등 마크업 기초와 실전 미션 예제 (eclipse/Html)

• 🎨 CSS 스타일링 선택자, 레이아웃, 포지셔닝, 플로트 등 CSS 핵심 개념 실습 (eclipse/CSS)

• 📱 Bootstrap 반응형 UI 챕터별로 구성된 부트스트랩 컴포넌트 및 반응형 레이아웃 실습 (eclipse/Bootstrap)

• 🔗 jQuery 실습 (10개 챕터) DOM 조작, 이벤트 처리 등 jQuery 핵심 기능을 챕터 단위로 학습 (eclipse/JQuery)

• 🔄 Ajax 비동기 통신 JSON 데이터 처리, 자동완성(suggest), 비동기 요청 등 Ajax 실습 (eclipse/Ajax)

• ☕ JSP 서버사이드 프로그래밍 게시판, 로그인 이력 관리, forward/include 지시자 등 JSP 기반 서버 프로그래밍 실습 (eclipse/JSP)

• 🖥️ Tomcat 서버 설정 로컬 Tomcat 9.0 서버 구동을 위한 설정 파일 모음 (eclipse/Servers)

• 🌐 바닐라 JavaScript 심화 기초 문법부터 함수, 객체지향, 클로저, 이벤트, this, DOM, 비동기까지 주제별로 정리된 JS 실습 (vscode/js-practice)

• 🧩 Bootstrap 실전 페이지 VSCode 환경에서 만든 반응형 페이지 실습 (vscode/boot-practice)

---

📂 Folder Structure

kosa-web/
├── eclipse/                  # Eclipse(Dynamic Web Project) 기반 실습
│   ├── Html/                 # HTML 기초 & 폼 미션
│   ├── CSS/                  # CSS 선택자, 레이아웃 실습
│   ├── Bootstrap/            # 부트스트랩 컴포넌트 (ch01~ch04)
│   ├── JQuery/                # jQuery 챕터별 실습 (chap01~chap10)
│   ├── Ajax/                  # Ajax 비동기 통신 & JSON 처리
│   ├── JSP/                   # JSP 서버사이드 프로그래밍 (게시판, 로그인 등)
│   └── Servers/                # Tomcat 서버 설정
└── vscode/                    # VSCode 기반 프론트엔드 실습
    ├── js-practice/            # JavaScript 주제별 실습
    │   ├── 01_basic/            # 기초 문법
    │   ├── 02_function/          # 함수
    │   ├── 03_oop/                # 객체지향
    │   ├── 04_inner/               # 클로저 & 내부 함수
    │   ├── 05_event/                # 이벤트 처리
    │   ├── 06_this/                   # this 바인딩
    │   ├── 07_dom/                     # DOM 조작
    │   └── 08_asy/                      # 비동기 처리
    └── boot-practice/            # 부트스트랩 반응형 페이지 실습

---

🛠️ Built With

• Frontend: HTML5, CSS3, JavaScript, jQuery, Bootstrap
• Backend: JSP (Java Server Pages)
• Server: Apache Tomcat 9.0
• IDE: Eclipse (Dynamic Web Project), Visual Studio Code

---

📧 Contact

• Name: Eunseo Yu
• E-mail: eunseoyu0825@gmail.com
• GitHub: 221B0825