📌 들어가며 이번 글에서는 CSS를 적극 활용해 드롭다운 메뉴바를 만든다. 평소엔 최상위 메뉴만 보이다가, 마우스를 올리면 하위 메뉴가 펼쳐지는 구조다. 1. 전체 골격 (HTML) <div id="container"> <header> <div id="logo"><a href="ind...

📌 들어가며 이번 글에서는 저번에 만든 웹페이지에 JS 슬라이드쇼와 CSS 탭 메뉴를 추가해 그럴듯하게 완성한다. 전체 코드는 길지만, 핵심 부분 위주로 살펴본다. 페이지 구조 한눈에 보기 container ├─ header (로고 + 드롭다운 메뉴) ├─ slideShow (JS 슬라이드쇼 + prev/next 버튼) ├─ conte...

📌 들어가며 HTML을 대충 마치고 이번엔 CSS를 살짝 배웠다. HTML로 만든 구조에 스타일(디자인)을 입히는 것이 CSS다. 1. 왜 CSS가 필요한가? 링크 3개에 색을 주고 싶다면 각각에 style을 넣으면 된다. 하지만 링크가 수백~수천 개인 대형 사이트라면? 일일이 다는 건 비효율적이다. 이때 CSS로 한 번에 스타일을 적용한다....

📌 들어가며 이번 글에서는 2차원 레이아웃 도구인 CSS Grid와, 화면 크기에 반응하는 미디어 쿼리로 웹페이지를 다듬어본다. 레이아웃에 초점을 맞춘다. 1. 선택자 우선순위 — class vs id .saw { color: gray; } /* class → 온점(.) */ #active { color: purple; } /...

📌 들어가며 이번 글에서는 Bootstrap의 무료 템플릿을 가져와 내 웹페이지를 꾸며본다. Bootstrap이란? 미리 만들어진 CSS·JS 컴포넌트(네비게이션 바, 버튼, 그리드 등)를 제공하는 프론트엔드 프레임워크. 복잡한 CSS를 직접 짜지 않고도 세련된 UI를 빠르게 만들 수 있다. 1. 템플릿 가져오기 Bootstrap 홈...

📌 들어가며 이번 글에서는 인공지능을 위한 기초수학 중 이산수학(Discrete Math)의 집합·명제·논리를 정리한다. 이산(discrete): 별개의, 개별적인, 분리된. 이런 이산적 수학 구조를 연구하는 학문이 이산수학이며, 인공지능의 기초가 된다. 1. 집합 (Set) 집합: 여러 원소(element)의 모임. 중복된 원...

📌 들어가며 이번 글에서는 수학의 꽃인 함수·수열·관계를 정리한다. 1. 함수 (f: A → B) 함수: 집합 A의 모든 원소에 대해 집합 B의 원소가 하나씩 대응되는 관계. f: A → B(“A에서 B로 가는 함수 f”). A의 각 원소는 한 번만 대응해야 한다(두 갈래 금지). 용어 정의 ...

📌 들어가며 이번 글에서는 세션(session)으로 로그인 폼을 만들고, JSP를 MariaDB와 연동한다. 1. 세션 로그인 흐름 세 개의 JSP로 로그인 상태를 관리한다. loginForm.jsp ──POST──► loginCheck.jsp (검증 → session에 저장) ▲ │ ...

📌 들어가며 이번 글에서는 JSP로 DB 생성 → 테이블 생성 → 폼으로 행 삽입 → 조회 출력의 전체 흐름을 학생 등록 예제로 구현한다. dbcreate.jsp (DB 생성) → createTable.jsp (테이블) → formstudent.jsp (입력 폼) → insertStudent.jsp (INSERT) → formStudentTable...

📌 들어가며 이번 글에서는 JSP의 파라미터 전달, 액션 태그(include·redirect), 그리고 쿠키(Cookie)를 정리한다. 1. 폼 데이터 전달 — getParameter 폼에서 join.jsp로 데이터를 넘긴다. 단일 값은 getParameter, 복수 값(체크박스)은 getParameterValues. 아이디: <%= ...