HTML CSS

취업사이트 만들기) 준비작업

조충희 2025. 6. 9. 18:04

시안을 바탕으로 html css sql 문서를 작성하는 연습프로젝트

 

시안

회원가입, 로그인, 이력서작성, 목록검색 기능이 있는 웹페이지의 형태다.

 

⭐깃허브 작업

 

1.레파지토리 생성

2.로컬에 깃클론, css img 폴더생성, 커밋, 푸시

3.원격지에 dev 브랜치 생성

4.콜라보레이트(팀원초대)

 

⭐ html과 css 역할분담

 

1안과 2안은 기능이 겹치며 기능의 단순성을 고려해 팀장 1명이 담당

3,4안을 각 1인이 담당했음

5안은 복잡성을 고려해 최고경력자 1인이 담당했음

 

⭐ mysql 작업

 

5안의 시안을 참고해 table 설계

column명은

id, idphoto, name, email, phone, address, fieldwork, skill, experience 등이 있다.

id는 자동, idphoto는 추후 html단에서 파일경로와 id를 조합해 자동생성되도록 설계하기로 한다.

name~address는 직접 입력

fieldwork와 skill, experience는 사용자의 선택사항을 묶어 문자열로 처리한다.

 

⭐ 샘플데이터

 

챗지피티에게 부탁해 위 설계에 따른 15개 샘플데이터를 만들도록 했다.

INSERT INTO resume (idphoto, name, email, birth, phone, address, fieldwork, skill, experience) VALUES
('img/photo001.jpg', '김지훈', 'kimjh1@example.com', '1990-05-14', '010-1234-5678', '서울특별시', '프론트 엔드 서버 백엔드', 'JavaScript HTML MySQL', '경력'),
('img/photo002.jpg', '이수민', 'leesm2@example.com', '1992-08-23', '010-9876-5432', '부산광역시', NULL, 'Java HTML CSS', '신입'),
('img/photo003.jpg', '박서준', 'parksj3@example.com', '1988-01-30', '010-5555-7777', '대구광역시', '웹 풀스택 프론트 엔드', 'JavaScript Vue.js HTML', '경력'),
('img/photo004.jpg', '최윤아', 'choiyn4@example.com', '1995-07-11', '010-2222-3333', '인천광역시', '서버 백엔드 안드로이드', 'Java Spring MySQL', '경력'),
('img/photo005.jpg', '정우성', 'jungws5@example.com', '1985-09-19', '010-4444-6666', '광주광역시', NULL, 'React JavaScript HTML', '신입'),
('img/photo006.jpg', '한예슬', 'hanls6@example.com', '1991-03-22', '010-6666-1111', '대전광역시', '프론트 엔드', 'React JavaScript MySQL', '경력'),
('img/photo007.jpg', '신동엽', 'shindye7@example.com', '1989-06-06', '010-1234-9999', '울산광역시', '서버 백엔드', 'Spring Java MySQL', '경력'),
('img/photo008.jpg', '김하늘', 'kimhn8@example.com', '1994-02-17', '010-8888-0000', '세종특별자치시', '웹 풀스택', 'Vue.js HTML JavaScript', '경력'),
('img/photo009.jpg', '이승기', 'leesg9@example.com', '1990-11-01', '010-2222-1111', '경기도', '서버 백엔드 프론트 엔드', 'SQL JavaScript Oracle', '경력'),
('img/photo010.jpg', '윤아름', 'yoonar10@example.com', '1993-10-05', '010-7777-8888', '강원도', '크로스 플랫폼 앱 안드로이드', 'JavaScript React MySQL', '경력'),
('img/photo011.jpg', '정소민', 'jungsomin11@example.com', '1997-05-22', '010-1111-3333', '전라남도', NULL, 'HTML CSS JavaScript', '신입'),
('img/photo012.jpg', '도경수', 'doky12@example.com', '1989-01-12', '010-7777-1111', '충청북도', 'IOS 프론트 엔드', 'Java React JSP', '경력'),
('img/photo013.jpg', '박보영', 'parkby13@example.com', '1990-02-14', '010-3333-7777', '경상북도', '프론트 엔드 안드로이드', 'JavaScript Vue.js MySQL', '경력'),
('img/photo014.jpg', '이제훈', 'leejh14@example.com', '1987-07-07', '010-1212-3434', '경상남도', '서버 백엔드', 'Java Spring Oracle', '경력'),
('img/photo015.jpg', '문채원', 'mooncw15@example.com', '1986-09-09', '010-5656-7878', '제주특별자치도', '웹 풀스택', 'JavaScript JSP jQuery', '경력');

 

 

 

 

다음 로그인/ 회원가입 페이지 만들기

https://notion6780.tistory.com/111

 

마이페이지 작업

https://notion6780.tistory.com/112

 

취업사이트 만들기) 마이페이지 작성

https://notion6780.tistory.com/110 https://notion6780.tistory.com/111 1.취업사이트 설계2.로그인페이지 작성이 끝났다. 이번에는 회원을 위한 마이페이지를 작성해봤다. header> div class="inner"> div class="head__container"

notion6780.tistory.com

 

 

 

첨부파일은

1.프로젝트 프레젠테이션을 담은 pdf

2.백업자료

 

이력서플랫폼.pdf
3.04MB
co_project_recruit_platform.zip
0.46MB