본문 바로가기

전체 글206

[3-3] 일반게시판서비스 작성요청(파일업로드) ㅁ 첨부파일 업로드  ㅁ 일반게시글 목록페이지    - 로그인 상태면 '등록하기' 버튼이 보인다.'등록하기' 버튼을 누르면 일반게시글 작성페이지로 간다.     ㅁ 일반게시글작성 페이지를 토대로 boardWrite.jsp를 만든다.  %@ page import="java.util.List" %>%@ page import="com.br.web.board.model.vo.Category" %>%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%> %  ListCategory> list = (ListCategory>)request.getAttribute("list");%> DOCTYPE html>html>h.. 2024. 9. 11.
[3-2] 일반게시판서비스 목록조회요청(페이징처리) ㅁ 일반게시판서비스- 일반게시판서비스_목록조회요청(페이징처리) - 일반게시판서비스_작성요청(파일업로드) - 일반게시판서비스_수정요청       ㅁ src/main/webapp/views/board에 boardList.jsp를 만든다. - "일반게시판목록페이지.html"의 body 태그 안의 구문들을 복붙하고, header와 footer를 include한다. - 페이징바를 부트스트랩에서 긁어왔는데, 매번 다르게 동적으로 제작해야 한다.- 이 페이지(일반게시글목록페이지)에 올 때 게시글 데이터와 페이징 바 제작을 위한 데이터가 필요하다.   - 헤더의 메뉴바에서 '일반게시판' 클릭시 /list.bo라는 url mapping값을 가지는 서블릿을 호출한다.- 이때 딱히 몇번 페이지를 요청하겠다고 데이터를 넘기지.. 2024. 9. 11.
[3-1] 일반게시판서비스 기본세팅 ㅁ 일반게시판서비스- 일반게시판서비스_목록조회요청(페이징처리)- 일반게시판서비스_작성요청(파일업로드) - 일반게시판서비스_수정요청      ㅁ 현재 일반게시판서비스 화면 구현 현황     - src/main/webapp/views/board 폴더에 일반게시판 목록, 상세, 수정, 작성페이지와 사진게시판 목록, 상세, 작성페이지들이 있다. 이건 받았다.      - "일반게시판목록페이지.html"이다.- 공지사항 목록페이지와 비슷해보이지만 공지사항 목록페이지에는 페이징처리를 하지 않았다.NOTICE 테이블의 전체 데이터를 싹 다 조회해왔었다.- 만약 NOTICE 테이블에 데이터가 1000개 있다면 공지사항 목록페이지에 1000개의 게시글이 다 보여질 것이다.다수의 데이터가 있을 수 있기 때문에 게시판 형태.. 2024. 9. 11.
[2-5] 공지사항서비스 삭제요청 ㅁ 공지사항서비스- 공지사항서비스_목록조회요청- 공지사항서비스_작성요청- 공지사항서비스_수정요청- 공지사항서비스_삭제요청     ㅁ 공지사항 목록페이지  %@ page import="java.util.List" %>%@ page import="com.br.web.notice.model.vo.Notice" %>%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%> %  ListNotice> list = (ListNotice>)request.getAttribute("list");%> DOCTYPE html>html>head>meta charset="UTF-8">title>Insert title hereti.. 2024. 9. 11.
[2-4] 공지사항서비스 수정요청 ㅁ 공지사항서비스- 공지사항서비스_목록조회요청- 공지사항서비스_작성요청- 공지사항서비스_수정요청- 공지사항서비스_삭제요청     ㅁ 공지사항 수정페이지   - 공지사항 상세페이지는 만들지 않고, 하단에 바로 보여지게끔 구성했다. (부트스트랩 collapse를 이용해서 제목행을 클릭하면 내용행이 보여지게)- 대신 loginUser != null && loginUser.getUserId().equals(n.getNoticeWriter()) 이런 조건으로로그인 되어있고, 로그인한 유저아이디가 글 작성자 아이디와 같으면'수정하기', '삭제하기' 버튼이 보여지게끔 noticeList.jsp를 구성했었다.     - '수정하기', '삭제하기' 버튼에 접근하려면 이미 조건문이 걸려있어서 updateNotice, de.. 2024. 9. 10.
[2-3] 공지사항서비스 작성요청 ㅁ 공지사항서비스- 공지사항서비스_목록조회요청- 공지사항서비스_작성요청- 공지사항서비스_수정요청- 공지사항서비스_삭제요청     ㅁ 공지사항 목록 페이지에서 '등록하기' 버튼을 누르면 공지사항 작성 페이지로 이동한다.      - 아래는 /webApp/src/main/webapp/views/notice/noticeList.jsp다. %@ page import="java.util.List" %>%@ page import="com.br.web.notice.model.vo.Notice" %>%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%> %  ListNotice> list = (ListNotice>).. 2024. 9. 10.
[2-2] 공지사항서비스 목록조회요청 ㅁ 공지사항서비스- 공지사항서비스_목록조회요청- 공지사항서비스_작성요청- 공지사항서비스_수정요청- 공지사항서비스_삭제요청     ㅁ header.jsp - header.jsp에 있는 공지사항이라는 메뉴 클릭시 공지사항 목록 페이지가 뜨게끔 한다.  %@ page import="com.br.web.member.model.vo.Member" %>%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%>    link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">script src="h.. 2024. 9. 10.
[2-1] 공지사항서비스 기본세팅 ㅁ 공지사항서비스- 공지사항서비스_목록조회요청 - 공지사항서비스_작성요청 - 공지사항서비스_수정요청- 공지사항서비스_삭제요청     ㅁ 개발은 화면설계, 화면구현 후 각 화면별로 어떤 쿼리가 실행될지 예상해서 쿼리도 미리 작성할 수 있어야 한다.- 이게 제일 좋은 방식이다. 쿼리를 먼저 작성해두면 이 페이지에서 요청을 보낼 때 어떤 데이터가 필요한지 알 수 있다.   ㅁ 패키지, 클래스, xml 파일을 만든다.     ㅁ 공지사항 서비스에서는 작성, 수정, 삭제, 조회 기능을 넣는다. 그에 맞는 쿼리를 먼저 작성해본다.  - 아래는 /webApp/src/main/java/db/mappers/notice-mapper.xml이다. - notice-mapper.xml 문서의 유형을 프로퍼티스 유형으로 해야 한.. 2024. 9. 10.
깃에서 프로젝트 내려받고 '추가설정' ㅁ 깃에서 '05_jspServlet-workspace'를 zip으로 내려받았다.- import하고 초기설정들을 했지만 빨간 x가 뜨고 메인페이지는 보여지지만 다른 페이지들은 '서블릿'을 찾을 수 없다고 뜸. (404 에러)   ㅁ 깃에 없는거 (1) src/main/webapp/assets에 image 폴더만 있다. + ojdbc6.jar- css, js, lib 폴더가 없다. css, js, lib 폴더를 만든다. (근데 다 비어있다.)- src/main/webapp/assets/lib 폴더가 아닌 src/main/webapp/WEB-INF/lib 폴더에 ojdbc6.jar을 c:\dev에서 복붙해온다. (2) driver.properties 파일은 환경설정 파일이라 깃에 없다.- src/main/j.. 2024. 9. 10.
[1-6] 회원서비스 비번변경요청, 회원탈퇴요청 ㅁ 회원서비스- 회원서비스 개발 세팅         - 회원서비스_로그인          - 회원서비스_로그아웃          - 회원서비스_회원가입페이지로이동  - 회원서비스_회원가입요청 - 회원서비스_마이페이지요청- 회원서비스_정보변경요청   - 회원서비스_비번변경요청- 회원서비스_회원탈퇴요청     ㅁ /webApp/src/main/webapp/views/member의 myInfo.jsp를 킨다.    - 아래는 myInfo.jsp다. %@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%>DOCTYPE html>html>head>meta charset="UTF-8">title>Insert tit.. 2024. 9. 9.
티스토리 '붙여넣기 및 이미지 업로드 중입니다' 오류 [티스토리] '붙여넣기 및 이미지 업로드 중입니다' 오류 해결해서 원래 글로 복원하기출처: https://life-with-coding.tistory.com/300 [코딩젤리:티스토리] - f12로 개발자 도구 켜서 "mce-modal-block"이라는 div 블럭을 찾아서 우클릭 - delete element하기- '붙여넣기 및 이미지 업로드 중입니다'는 "mceu_34"라는 div 블럭을 찾아서  우클릭 - delete element하기 - "mceu_34"라는 div 블럭은 못찾긴 했지만 그래도 다른 창에서 로그인하고 작성할 수 있다. 2024. 9. 9.
[1-5] 회원서비스 마이페이지요청, 정보변경요청 ㅁ 회원서비스- 회원서비스 개발 세팅         - 회원서비스_로그인          - 회원서비스_로그아웃          - 회원서비스_회원가입페이지로이동  - 회원서비스_회원가입요청   - 회원서비스_마이페이지요청- 회원서비스_정보변경요청- 회원서비스_비번변경요청- 회원서비스_회원탈퇴요청    ㅁ header.jsp에서 마이페이지로 이동 요청한다.  %@ page import="com.br.web.member.model.vo.Member" %>%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%>    link rel="stylesheet" href="https://cdn.jsdelivr.ne.. 2024. 9. 9.
[1-4] 회원서비스 회원가입 페이지로 이동, 회원가입 요청 ㅁ 회원서비스- 회원서비스 개발 세팅         - 회원서비스_로그인          - 회원서비스_로그아웃           - 회원서비스_회원가입페이지로이동  - 회원서비스_회원가입요청- 회원서비스_마이페이지요청- 회원서비스_정보변경요청- 회원서비스_비번변경요청- 회원서비스_회원탈퇴요청     ㅁ 회원가입페이지로 이동  - 아래는 header.jsp다. %@ page import="com.br.web.member.model.vo.Member" %>%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%>    link rel="stylesheet" href="https://cdn.jsdelivr.n.. 2024. 9. 8.
작업 현황 공유용 스프레드시트 ㅁ 프로젝트 진행할 때 팀원들이 각각 기능을 구현할텐데, 이때 서로 어떤 url로 요청시 어떤 흐름으로 진행되는지를 공유하는 것이 좋다.   - 구글 스프레드시트로 동시 작업이 가능하다.- 어떤 서비스의 어떤 기능에 있어서 어떤 url로 요청하면 되는지, 요청방식은 뭔지, 요청시 전달값은 뭐고실행쿼리는 어떤 종류고 성공일 때랑 실패일 때 각각 forward하는지 redirect하는지,어떤 응답페이지가 보여지는지를 서로 공유해야 한다.- 그래야 url mapping값 같은 게 겹치지 않고,내가 요청 처리 후 응답할 페이지가 다른 사람이 이미 구현해놨다면 그 응답페이지를 url 재요청할 수도 있다.     - 로그아웃 링크는 a 태그여서 get방식이고, 요청시 전달값이나 실행할 쿼리도 없었다. 2024. 9. 8.
[1-3] 회원서비스 로그인, 로그아웃 ㅁ 회원서비스- 회원서비스 개발 세팅          - 회원서비스_로그인            - 회원서비스_로그아웃           - 회원서비스_회원가입페이지로이동 - 회원서비스_회원가입요청- 회원서비스_마이페이지요청- 회원서비스_정보변경요청- 회원서비스_비번변경요청- 회원서비스_회원탈퇴요청    ㅁ http://localhost:8888/web/- 메인페이지를 들어가본다.- 그런데 404 에러 뜸. 보니까 프로젝트 세팅에서는 context root가 web으로 변경되어 있는데,이클립스 하단 Servers에서 서버 더블클릭하고 module 탭에서 보면 root가 webApp으로 되어 있음.그래서 http://localhost:8888/webApp을 입력해야 들어가진다.  - edit 눌러서 /web.. 2024. 9. 7.
[1-2] 회원서비스 개발 세팅 (이어서) ㅁ 회원서비스- 회원서비스 개발 세팅          - 회원서비스_로그인- 회원서비스_로그아웃- 회원서비스_회원가입페이지로이동 - 회원서비스_회원가입요청- 회원서비스_마이페이지요청- 회원서비스_정보변경요청- 회원서비스_비번변경요청- 회원서비스_회원탈퇴요청   ㅁ 패키지, 클래스 생성- 소스폴더인 src/main/java에 패키지를 만든다.- 이 때 세번째 까지는 com.br.web으로 시작한다. 패키지 첫번째 레벨, 두번째 레벨은 주로 도메인의 역순이다라는 가정 하에 작성했고,세번째 레벨에 주로 어플리케이션명을 따서 쓴다.- 지금 web이라 한 이유는 나중에 스프링 프로젝트를 개발하게 되면context path로 한 게 세번째 레벨로 잡히게 되어 있다.- 네번째 레벨부터 쪼개진다.   - 위의 4개는 .. 2024. 9. 7.
피드백 (p.79) 피드백1. 기업 건강검진 연계기업 목록을 관리자가 추가/삭제하는 기능 - 추가하겠습니다. (p.79) 피드백2. 예약관리 상세페이지 - 상세페이지 없이, 예약 관리 페이지에서 예약체크사항이 보여지게 추가하겠습니다. (p.80) 피드백3. 관리자의 예약 추가 - 전화로 예약 받으면 관리자가 추가하는 기능입니다.  - 건강검진 예약은 회원이어야만 가능하도록 하겠습니다. 그래서 고객 ID는 필수로 받겠습니다. - 예약 체크사항은 병원 방문시 수기로 입력받겠습니다. (p.83) 피드백4. 진료과 - 진료과는 4개 고정이며, 따로 추가하거나 삭제하지 않습니다. (p.85) 피드백5. 의료진 계정 - 의료진 계정은 관리자가 만들어서 줍니다. - 관리자가 의료진 계정 추가시, 의료진 ID와 비밀번호 입력.. 2024. 9. 7.
DB 설계 ㅁ 회원 테이블 - 아이디, 이름, 주민등록번호, 주소, 핸드폰번호, 회원가입일 - 회원번호 ㅁ 의료진 테이블 - 사번, 이름, 주민등록번호, 진료과, 면허번호, 전화번호, 주소, 입사년도 ㅁ 진료 예약 내역 테이블 - 진료과, 의료진, 날짜, 예약시간(오전/오후), 이름, 핸드폰번호 ㅁ 건강검진 예약 내역 테이블 - 날짜, 예약시간(오전/오후), 예약번호, 회원번호, 이름, 핸드폰번호, 검진유형(일반 건강검진(개인), 기업 건강검진(특수) ㅁ 관리자 테이블 - 데이터 하나 - 아이디, 비밀번호, 관리자번호 ㅁ q&a 답변 테이블 - q&a 게시글 번호, 제목, 글쓴이, 작성시간,  - 답변 내용  ㅁ 공지사항 테이블 - 번호, 제목, 글쓴이, 날짜, 조회수, 내용  = 이름, 핸드폰번호등은 이미 회원 .. 2024. 9. 5.
서블릿, JSP 세팅 ㅁ https://moca7.tistory.com/229 2024. 9. 2.
[1-1] 웹 어플리케이션 제작 * 2024-08-29- DB설계 및 DB구축- 프로젝트 생성 및 index 페이지 띄우기- 회원서비스 개발 세팅  ㅁ DB 구축 까지 끝났으면 이제 웹 어플리케이션 제작을 하면 된다. 웹 사이트 제작을 하기 위해 새로 이클립스로 프로젝트를 생성한다.  ㅁ 새 프로젝트 생성 & 설정- 패키지 익스플로러 - 우클릭 - new - dynamic web project -프로젝트이름 webApp - 그 아래 dynamic web module version이 4.0이어야함 - next -default output folder는 build\classes가 아니라 src/main/webapp/WEB-INF/classes - next -context root가 webApp인데 web으로 바꿈 - 그 아래 generat.. 2024. 9. 2.
DB설계 및 구축 (+ 엑셀로 DB에 한번에 넣기) ㅁ DB도 구축을 해야 한다.- 이 사이트에 필요한 데이터들 보관할 DB를 구축해야 한다.- 화면 구현한 것들을 하나씩 열어보면서 DB 설계를 진행한다.이런 데이터들이 화면에 보여진다는 것은 이런 데이터들을 보관하는 컬럼이 필요하다는 소리다.  ㅁ https://www.erdcloud.com/- DB 설계는 이 사이트에서 진행하면 된다. 설치 없이 웹 상에서 바로 가능.- 팀으로 다같이 동시 작업도 가능하다. 팀을 생성하고 초대하면 된다. - 그냥 클릭클릭 해서 배치하면 된다. - 그리고 라이브러리가 있어서 다른사람의 작업물들을 볼 수 있다. - 여기는 dbms 상관없이 설계하는 곳이라 오라클 아니고 mysql이나 마리아db 쓰면 오라클 컬럼명과는 좀 다를 수 있다.- erd는 Entity-Relatio.. 2024. 9. 2.
vscode 설정 ㅁ 프론트엔드 (dash vs underbar)- 이렇게 클래스명이나 아이디명 쓸 때 여러 단어를 dash로 연결했다.원래 권장 사항은 dash인데 회사에서는 언더바(_)를 많이 쓴다.- 차이점은 dash로 작성하면 "notice-list"에서 notice를 더블클릭하면 dash 기준 이전단어만(notice) 선택됨.언더바로 작성하면 전체가 선택된다.- 내가 더블클릭했을 때 전체가 다 선택되었으면 좋겠으면 언더바로 쓰면 되고 아니면 dash를 쓰면 된다. 선택이다.  ㅁ vscode 사용법- form 요소 길이가 너무 긴데 다 드래그하기 힘들다. 그러면 왼쪽 숫자 옆에 아래쪽 화살표 누르면 접힌다.28 다음 80줄이됨. 그럼 20줄의 과 80줄의 지우면 한번에 지워진다. 2024. 9. 2.
화면구현 - 웹사이트 개발 화면 구현 (BootStrap) ㅁ 부트스트랩을 이용해서 웹 사이트 화면을 구현한다  ㅁ 다운로드 폴더에 그냥 04_front-workspace 깃에서 받았음.- vscode로 04_front-workspace 폴더 열기- 그리고 거기에 webapp 폴더 만들기- webapp 폴더 안에 "메인페이지.html" 만듦. - webapp 폴더 안에 views 폴더 만듦. (세부 페이지들을 여기에 둘 예정)- webapp 폴더 안에 assets 폴더 만듦.- assets 폴더 안에 image 폴더 만듦. (image 파일 여기에 둘 예정)  - 화면 구현할 때는 파일명 식별이 가능하게끔 한글로 작성한다.- 회원 가입 페이지, 마이페이지, 공지사항 페이지, 게시판 페이지 등등 각각의 세부 페이지들은 보통 webapp 폴더 안에 views라는 폴.. 2024. 8. 28.
[Servlet + JSP] 서블릿과 JSP 결합 ㅁ 서블릿과 JSP를 결합시켜서 사용자가 요청할 수 있는 페이지를 제작한다.- 요청은 서블릿이 처리하고, 처리된 결과를 JSP 페이지를 통해 사용자에게 응답하여 표현한다.   - 아래는 02_jsp 프로젝트의 index.html이다. DOCTYPE html>html>head>meta charset="UTF-8">title>Insert title heretitle>head>body>    h2>JSPh2>        a href="/jsp/a_scripting_elements/main.jsp">1. Scripting Elementsa> br>    a href="/jsp/b_page_directive/main.jsp">2. Page Directivea> br>    a href="/jsp/c_includ.. 2024. 8. 28.
[JSP] JSP ㅁ 이제 JSP 한다. 그리고 나중에 JSP와 서블릿을 결합한다.- JSP와 서블릿을 결합해서 JDBC 붙여서 본격적인 웹사이트 제작을 한다.  ㅁ 새 동적 웹 프로젝트 생성- 모든 창을 닫고 '02_jsp'라는 동적 웹 프로젝트를 만든다. - 이클립스 패키지 익스픞폴러 빈 공간 우클릭 nex - 다이나믹 웹 프로젝트 - 프로젝트명 '02_jsp' - Dynamic web module version 4.0 맞는지 확인하고 next - src/main/webapp/WEB-INF/classes로 default output folder 바꾸고 next - contextroot를 jsp로 바꾸고 아래 'Generate web xml deployment descriptor' 체크하고 피니시.   ㅁ webapp .. 2024. 8. 27.
[Servlet] 서블릿(2) ㅁ 앞으로의 활용 과정- request 객체에서 데이터를 뽑고 난 이후에, 이 뽑은 데이터를 DB에 기록한다고 하면.- data를 service를 호출하면서 넘기고, service에서는 dao로 넘기고, dao에서 insert문 때려서 그 결과를 돌려받는다.(jdbc과정)- 성공적으로 다 되었다면 응답페이지를 제작해서 돌려줘야 한다.요청에 대한 결과 페이지를 사용자에게 보여줘야한다.    ㅁ 응답페이지  - 아래처럼 index.html을 작성한다. DOCTYPE html>html>head>meta charset="UTF-8">title>Insert title heretitle>head>body>        h1>Servleth1>        a href="./a_lifecycle/main.html">.. 2024. 8. 27.
[Servlet] 서블릿(1) - 프로젝트 세팅(만들기) ★ 프로젝트를 처음부터 만드는 경우가 아니고 깃에서 내려받은 프로젝트에 대한 세팅은"CTRL + F"로 "프로젝트 세팅 확인"을 찾으세요. ★     [프로젝트 만들기]  ㅁ dynamic web project 생성- package Explorer - 빈 곳 우클릭 -  dynamic web project를 만든다.- 이제는 일반적인 자바 프로젝트는 안 된다.dynamic web project라는 웹 어플리케이션을 개발할 수 있는 프로젝트를 생성한다. - 이제부터는 프로젝트 생성도 신중하게 해야 한다. 무작정 만들면 안된다. 작성하는 이름 하나하나가 굉장히 중요하다.      - 프로젝트 명으로 "01_servlet" 입력한다.- 바로 엔터치지 마시고 프로젝트를 처음에 잘못 만들면 나중에 뒤늦게 변경할 .. 2024. 8. 26.
[Servlet] 초기세팅 (워크스페이스, 서버) ★ "CTRL + F"로 '워크스페이스 세팅', '서버 세팅' 찾으세요. ★    ㅁ 자바스크립트로 정적인 화면에 동적인 효과를 줄 수 있었다.- 그렇게 구현한 화면에 사용자가 실제 요청을 보냈을 때 요청을 처리하고 응답해주는 것은 백단이다.- 백단이 자바, 오라클, jdbc이다. - 즉 이때까지 배웠던 화면 구현이랑 자바, 오라클 등 다 합쳐서 하나의 어플리케이션(하나의 프로젝트)를 만들 것이다.  ㅁ 프로젝트(어플리케이션)을 개발한 후에는 서버라는 공간에 배포를 해야 우리가 만든 어플리케이션을 다른 사용자들이 이용할 수 있다.- 그래서 서버 구축을 진행한다.- 세팅이 많다. 반복적으로 해봐야 한다. 회사가면 안 알려준다. 세팅 처음부터 끝까지 할 수 있어야 한다.     ㅁ 깃허브에 원격 저장소를 만.. 2024. 8. 26.
UML 개요, 요구사항 개념 ㅁ 웹상으로 바로 하려면 https://app.diagrams.net/    [01 UML 개요][02 StartUML5 설치][03 요구사항 개념]    [01 UML 개요]  ㅁ 유스케이스, 클래스, 시퀀스 다이어그램- 이 외에도 더 많은 다이어그램이 존재하지만, 실무에서는 이렇게 3가지 정도를 주로 사용한다.- 실무에서 어떤 프로젝트냐에 따라서 세 개 중에 두 개의 다이어그램을 사용하는 경우도 있고,PM(프로젝트 팀장)의 성향에 따라서 아예 생략하는 경우도 많다.  ㅁ 학생들이 모델링 관련된 수업을 들으면서 항상 힘들어하거나 어려워하는 부분이 내가 만든 결과물이 정답인가? 틀렸나? 맞다 아니다를 생각하는 것이다.- 모델링이란 정답이 없다. 모델링은 각자 생각하는 바에 따라 다르게 표현된다. 다만 권.. 2024. 8. 25.
[부트스트랩] ㅁ 빠르게 화면을 예쁘게 작업을 하고싶다면 무료 템플릿 사용.- 보통 이런 것들은 부트스트랩이라는 걸로 작업이 되어 있다.  ㅁ 부투스트랩은 jQuery와는 상관없고 html, css와 관련 있다.  ㅁ https://www.w3schools.com/ - 부트스트랩도 다양한 업체에서 제공하는데 조금씩 다르다.- w3schools가 깔끔하다.- 상단의 Bootstrap 메뉴 - B4 클릭- 최신버전이 무조건 좋은게 아니다. B5(Bootstrap 5) 버전은 아예 jQuery를 못 쓴다.- 버전에 대한 차이는 버전 아래에 쓰여 있다. B4는 IE 9 이하는 지원 안한다.  - 특정 요소에 클래스만 넣으면 알아서 스타일이 반영된다.   ㅁ 굳이 파일 다운받을 필요는 없고 cdn 방식으로 사용한다.  - cs.. 2024. 8. 22.