캡스톤 디자인 결과보고서

캡스톤 디자인 번호	2021-09
캡스톤 디자인 분야	웹 프로그래밍
캡스톤 디자인 지도교수	노기섭 교수님
캡스톤 디자인 작품명	(국문) 웹소설들의 플랫폼의 정보를 한 눈에 볼 수 있는 사이트 (플랫포밍)
	(영문) Platforming
프로젝트 책임자	팀 명		플랫포밍
	학 과		인공지능소프트웨어
	성 명		이광오			학 번
	휴대폰					E-mail
프로젝트 세부현황	번 호	세부역할			성 명		전 공		학 번
	1	객체 탐지 및 분석			이광오		인공지능소프트웨어
	2
	3
프로젝트 수행기간	2020년 3월 16일부터 2020년 06월 14일 까지(15주)
2020도 캡스톤 디자인 프로젝트를 성실히 수행하여 이에 결과보고서를 제출합니다. 2020 . 06. 10. 과제책임자 이광오 서명 컴퓨터정보공학과 담당교수 귀하

1. 요약서

캡스톤디자인 번호	2021-09
캡스톤디자인 명	플랫포밍
캡스톤디자인 책임자	이광오

○ 캡스톤디자인 목표

웹 소설의 경우 저작권, 독점계약 등으로 소설 각각의 정보나 평가를 접하기는 어렵다. 또한 결제방식 또한 각 플랫폼마다 다르므로 사용자는 이에 새로운 작품을 만나기가 상당히 힘들다. 그렇기 때문에 사용자에게 간단하게 각 소설의 정보를 취득할 수 있도록 하는 사이트를 만들 것이다

○ 캡스톤디자인 내용

웹 소설 커뮤니티가 아닌 정보 제공을 위한 웹페이지로 크롤링을 통해 각 사이트의 실시간 인기순위와 역대 최다 조회수의 작품 등을 사이트별로 기재한다. 카카오페이지, 조아라, 문피아, 노블피아 등 각종 플랫폼에 대한 정보를 정리함과 더불어 각 작품별 회차당 평가를 통해 작가와 독자가 어느 시점이 작품에 문제가 되었는지 알 수 있다.

○ 캡스톤디자인 개발에 따른 기대성과

현재 웹 소설 플랫폼을 정리한 사이트나 어플은 존재하지 않는다. 사용자의 경우에는 자신의 입맛에 맞는 작품을 찾기에 수월해질 것이고, 작가의 경우에도 자신의 작품의 색이 어떤 플랫폼에 어울리는지를 판단하여 연재를 준비하기에 용이할 것이다.

캡스톤디자인 계획서

캡스톤디자인 명 : 플랫포밍

캡스톤디자인 책임자 : 인공지능소프트웨어학과 / 이광오

1. 캡스톤 디자인의 필요성

웹 소설은 최근 들어 드라마, 영화 등 다양한 영상매체에 노출이 되며 인식이 높아져 가고 있다. 하지만 예전 소설방, 만화방 같이 한 곳에서 종류에 상관없이 빌려보던 때와 달리 웹 소설은 한 작품은 기본적으로 한 플랫폼에 한정되어 있는 편이다. 이 것은 플랫폼과 작가간의 독점계약과 플랫폼 간의 성향차이로 인해 발생한 문제로 이 문제를 해결할 방법을 제안할 수는 없지만 이 문제를 완화할 방법으로 이 웹 사이트, 플랫포밍을 만들고자 한다. 처음 웹 소설을 찾아보려 진입하는 사용자에게 다양한 정보와 플랫폼의 특징을 보일 수 있으며, 각각 플랫폼의 대표되는 소설들을 찾기에도 용이할 것이다.

2. 캡스톤 디자인의 목표 및 내용

가. 캡스톤 디자인 목표

요즘 게임 커뮤니티 웹사이트의 경우 이용자가 후기를 남기는 것이 보편적으로 가장 큰 게임의 척도가 되곤 한다. 웹 소설의 경우도 마찬가지라고 생각하기 때문에 유사하게 해당 댓글이나 커뮤니티의 리뷰들 중 추천 수, 공감 수가 가장 높은 리뷰들을 포함해 해당 웹 소설을 소개하고자 한다. 또한 위에서 계속 말했던 대로 각 플랫폼 별 실시간 순위, 작품들을 열거할 뿐만 아니라 각 소설의 회차당 평가분석은 작가와 독자 모두에게 작품에 대한 정보에서 가장 중요하게 작용될 요소이기에 작품에 대한 정보를 정립하는데에 큰 도움이 될 것 이다.

나. 캡스톤 디자인 내용

가장 크게 정보를 표기할 메인페이지를 중심으로 J쿼리를 이용해 각 플랫폼별 페이지를 별도의 페이지 이동 없이 사용자가 접근할 수 있게한다. 또한 메인페이지의 랭킹을 통해서나 검색을 통해 해당 소설의 상세 페이지에 접근 가능하게 하여 편의성을 높인다.

그리고 소설 상세 페이지 내에 작가, 조회수, 별점과 같은 세부사항외에도 회차별 내용을 기재한다. 회차별 내용 안에는 그래프를 통해 해당 댓글의 평가가 긍정적인지 부정적인지 감성분석을 통해 확인할 수 있도록 한다.

그 외에 검색기능과 태그별 검색기능을 통해 다른 작품에 대한 접근도 용이하게한다.

3. 캡스톤 디자인의 추진전략 및 체계

프로젝트를 스토리 보드 방식을 기반으로 기획/설계한다.

2. 톰캣 로컬호스트로  서버를 구축한 후 Oracle DB를 사용해 전체적인 베이스를 구성한다.

3. HTML JavaScript CSS를 이용해 각 페이지를 구성한다.

4. JavaScript를 이용해 각 플랫폼을 크롤링(벤치마킹)하여 각 페이지에 정보를 더한다.

5. 작품이 완성되면 담당 교수님께 보여주고 피드백을 받아서 추가적인 수정 및 보완 또는 문제점들을 적절하게 조치한다.

6. 작품이 완성되면 사이트를 AWS로 구축하여 몇몇 유저들의 피드백을 통해 최종적으로 검토를 마친다.

4. 캡스톤 디자인 개발의 기대효과 및 활용방안

기존의 웹 소설 플랫폼들은 단일 작품만을 표기하였으며, 각 플랫폼 별 랭킹은 존재하였으나 종합적인 순위는 보기 힘들었다. 그렇기 때문에 이 모든 정보를 통합적으로 한 웹 사이트에서 확인이 가능하며, 플랫폼별 성향까지도 확인할 수 있으므로 사용자에게 보다 손쉬운 접근이 가능하게 한다.

또한 사용자뿐만이 아닌 작가입장에서도 해당 플랫폼의 인기 순위를 체크함으로써 자신의 작품의 색과 맞는 플랫폼이 어디인지 확인할 수 있다.

웹 소설은 목적성이 뚜렷한 순수문학에 비해 장르문학으로 저평가되어 메이저한 장르로 취급받지 못했으나, 개개인이 시대적인 뜻이나 의도보다는 여가시간을 즐기는 것에 초점이 맞춰진 최근에는 꽤나 큰 파급력을 지니게 되었다. 하지만 그들만의 리그라는 말이 나올 정도로 작품 하나하나에 접근하기 어려웠던 것과 다르게 이 웹 사이트 하나로 간편하고 부담없이 작품의 정보를 열람하고 원하는 작품을 찾을 수 있을 것이라 생각한다.

5. 작업분할 구조도(WBS, Work Breakdown Structure)

가. 플랫포밍 작업분할 구조도

6. 참여인력

가. 인력 편성표

						캡스톤디자인 책임자
						( 이광오 )
	UI 디자인						서버 구축						DB작성
이광오						이광오						이광오
디자인 UI소스코드 작성						AWS E2서버와 연동						Oracle DB 설정

나. 참여 인력 현황

번호	분 야	학 번	성 명	참여율(%)
1	UI 디자인		이광오	100%
2	서버 구축		이광오	100%
3	DB작성		이광오	100%

다. 캡스톤디자인 책임자 및 참여인원의 상세 정보

1) 인적사항
	성 명		이광오
	학 번					생년월일
	주 소
	연 락 처		핸드폰				e-mail
	공학 인증		참여				미참여
2) 학적 사항
연도	학적변동 사항
2014-02-15	중동 고등학교 졸업
2014-03-03	청주대학교 문헌정보학과 입학
2015-02-23	청주대학교 컴퓨터정보공학과 전과
3) 현장실습, 인턴쉽, 어학연수, 교육연수 현황
연도(부터∼까지)		연수 명			연수기관
4) 자격증 현황
자격증 명		발행기관			취득년도

7. 소요장비 및 재료

장비 및 재료 명	규격	수량	용 도	비 고
개인 노트북	H/W	1	종합 작업
Chrome	S/W	1	정보 및 자료 검색
한컴오피스 한글 2010	S/W	1	문서 작성
Microsoft Power Point	S/W	1	PPT 제작 및 이미지 제작
스마트폰	H/W	1	팀원 간 연락 및 자료 공유
Gmail	S/W	1	자료 공유 및 메일 전송
Zoom	S/W	1	회의 진행 및 공동 개발
Eclipse	S/W	1	JAVA 소스 코드 개발

8. 캡스톤디자인 추진일정 계획

세부 추진 내 용				추 진 일 정 (주)
				1	2	3	4	5	6	7	8	9	10	11	12	13	14	15
시스템 구상 및 설계
슈퍼 스마트 아이	소스코딩	DB	DB구상
			DB구현
			DB점검
		UI	UI설정
			UI구현
	서버	E2설정	E2설정
			파일이동
		서버연동	E2로 전환
			점검
서버 연동 및 보완
주별 진도(%)				10	15	25	30	40	60	65	75	80	81	85	90	92	95	100

9. 필요 기자재

캡스톤 디자인 결과보고서(結果報告書)

1. UI ∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙	13
1.1. 사용자화면 ∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙	13
1.2. 메인페이지 ∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙	14
1.2.1. 플랫폼별 랭킹∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙	14
1.3. 소설별 상세 페이지 ∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙	15
1.3.1. 페이지 내 정보 ∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙	15
1.3.2. 회차별 분석 정보∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙	16
1.4. 검색페이지∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙	17
1.4.1. 페이지 내 기능∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙	17
1.5. 검색 상세 페이지 ∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙	18
1.5.1. 페이지 내 정보∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙	18
2. 소스코드 ∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙	19
2.1. 선행 소스코드∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙	19
2.1.1. 전체적 스타일 관련 소스코드∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙	19
2.1.2. 태그별 설정 소스코드∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙	24
2.1.3. JS∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙	27
2.2. 페이지별 소스코드∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙	28
2.2.1. 메인 페이지∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙	28
2.2.2. 소설 상세 페이지∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙	50
2.2.3. 검색 페이지∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙	55
2.2.4. 검색 상세 페이지∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙	60
2. 마무리 ∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙	63
2.1. 향후 추진 계획 ∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙	63
2.2. 정리 ∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙	63

목  차

1. UI

1.1. 사용자 화면

본 프로젝트의 시스템은 사용자의 편의성과 확인에 중점을 둔 만큼 가장 크게 신경쓴 부분이 UI이다.

노벨피아의 디자인을 벤치마킹했으며 작품과 랭크가 가장 조명되어야 하는 만큼 자극적이지 않은 블랙&화이트 조합을 사용했다.

1.2. 메인페이지

1.2.1. 플랫폼별 랭킹

J쿼리를 통해 페이지의 이동없이 유저가 위의 박스를 클릭함으로서 원하는 플랫폼의 랭킹을 확인할 수있게 하였으며 전체블럭의 경우 조회수를 기반으로 가장 인기가 많은 순으로 정렬하였다.

1.3. 소설 별 상세페이지

1.3.1. 페이지 내 정보

작가, 일러스트, 조회수, 태그 등 다양한 정보를 포함시켰다.

1.3.2. 회차별 분석 정보

각 회차별 평가를 댓글의 감성분석을 통해 확인할 수 있게하였다.

1.4. 검색페이지

1.4.1. 페이지 내 기능

상단의 검색바를 통해 검색하거나 원하는 태그를 클릭해 검색을 진행할 수 있다.

1.5. 검색 상세 페이지

1.5.1. 페이지 내 정보

제목, 일러스트와 작가와 같은 간단한 소설에 대한 정보와 태그가 정리되어있다.

2. 소스코드

2.1. 선행 소스코드

1.6.1. 전체적 스타일 관련 소스코드

style.css

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

/* Common */

.wrap {width:100%; line-height: 1.6;}

.cont_size {width:100%; max-width:1200px; margin:0 auto;}

.plat_header {margin-bottom: 1em; padding: 1em 0; box-shadow: 0px 2px 5px #ccc;}

.plat_header_cont {display: flex; justify-content: space-between; align-items: center;}

.plat_header_logo {font-family: 'Gugi', cursive; font-size:36px;}

.plat_header_search > i {font-size: 26px;}

@media screen and (max-width: 1200px) {

.cont_size {padding: 0 10px; box-sizing: border-box;}

}

/* index */

.plat_main {min-height: 600px;}

.plat_main_tab {}

.plat_main_tab_list {display: flex; margin-bottom: 3em;}

.plat_main_tab_list > li {width:25%; padding: 15px 0; border:1px solid #ccc; border-bottom:1px solid #000; text-align: center;}

.plat_main_tab_list > li.active {font-weight:900; border:1px solid #000; border-bottom:none;}

.plat_main_tab_list > li > a {display: block;}

.plat_main_tab_cont {}

.tab_common {display: none;}

.tab_common:first-of-type {display: block;}

.tab_common .tab_cont_list {display: flex; align-items: center;}

.tab_common .tab_cont_list > li {width: calc((100% - 75px) / 6); margin-right:15px; margin-bottom: 1em;}

.tab_common .tab_cont_list > li:nth-of-type(6n) {margin-right:0px;}

.tab_cont_list_pic {position: relative;}

.tab_cont_list_pic > .img {width: 100%; border-radius: 0 30px 0 0; box-shadow: 0px 0px 10px #ccc;}

.tab_cont_list_pic > .num {position: absolute; top: 0; left: 0; width:30px; height:30px; color:#fff; background: rgba(0,0,0,0.6); font-weight: 600; text-align: center; line-height: 30px;}

.tab_cont_list_pic > .info {display: flex; justify-content: space-between; position: absolute; bottom:15px; width:100%; padding: 0 10px; color:#fff; font-size:12px; box-sizing: border-box;}

.tab_cont_list_pic > .info .like {}

.tab_cont_list_pic > .info .like i {font-size: 9px;}

.tab_cont_list_pic > .info .ep {}

.tab_cont_list_txt {}

.tab_cont_list_txt > .tit {overflow: hidden; display: inline-block; width: 100%; white-space: nowrap; text-overflow: ellipsis; white-space: normal; line-height: 1.3em; font-weight: 600; font-size: 13px; text-align: left; letter-spacing: -2px; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}

.tab_cont_list_txt > .name {color:#555; font-size: 13px;}

.tab_cont_list_txt > .btn_area {}

.tab_cont_list_txt > .btn_area > span {display:inline-block; padding: 0 5px; color:#fff; font-size:13px; border-radius: 5px;}

.tab_cont_list_txt > .btn_area > span:last-of-type {margin-right:0px;}

.tab_cont_list_txt > .btn_area > span.plus {background: #5232DD;}

.tab_cont_list_txt > .btn_area > span.up {background: #EA4A4A;}

.tab_cont_list_txt > .btn_area > span.only {background: #0D60D1;}

.tab_cont_list_txt > .btn_area > span.free {background: #166D95;}

@media screen and (max-width: 768px) {

.cont_size {padding: 0 10px; box-sizing: border-box;}

.tab_common .tab_cont_list {flex-wrap: wrap;}

.tab_common .tab_cont_list > li {width: calc((100% - 45px) / 3);}

.tab_common .tab_cont_list > li:nth-of-type(6n) {margin-right:15px;}

.tab_common .tab_cont_list > li:nth-of-type(3n) {margin-right:0;}

}

@media screen and (max-width: 500px) {

.tab_common .tab_cont_list {flex-wrap: wrap;}

.tab_common .tab_cont_list > li {width: calc((100% - 15px) / 2);}

.tab_common .tab_cont_list > li:nth-of-type(3n) {margin-right:15px;}

.tab_common .tab_cont_list > li:nth-of-type(2n) {margin-right:0;}

}

/* detail */

.detail_main {}

.detail_main_top {display: flex; justify-content: space-between; margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(0,0,0,0.1);}

.detail_main_top_pic {width: 160px;}

.detail_main_top_pic > .img {width:100%; border-radius: 0 30px 30px 0; box-shadow: 0px 0px 5px #333;}

.detail_main_top_pic > .link {display: block; width:100%; margin-top: 5px; padding: 5px 0; color: #fff; background: #000; font-size: 14px; text-align: center;}

.detail_main_top_info {width: calc(100% - 200px);}

.detail_main_top_info > .info_sbj {margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid rgba(0,0,0,0.1);}

.detail_main_top_info > .info_sbj > .tit {color: #333; font-weight: 600; font-size: 30px;}

.detail_main_top_info > .info_sbj > .name {color: #666;}

.detail_main_top_info > .info_sbj > .name > .f_emph01 {color: #007bff; font-weight: 600;}

.detail_main_top_info > .info_data {display: inline-block; margin-bottom: 20px; padding: 5px 15px; background: #F0F0F0; border-radius: 10px;}

.detail_main_top_info > .info_data p {display: inline-block; margin: 0 5px; font-size: 14px;}

.detail_main_top_info > .info_body {margin-bottom: 20px; font-size: 14px;}

.detail_main_top_info > .info_tag {font-size: 14px;}

.detail_main_top_info > .info_tag > .tag {display: inline-block; margin-right: 5px; margin-bottom: 5px; padding: 3px 10px; color:#5032DF; border:2px solid #5032DF; border-radius: 25px;}

.detail_main_top_info > .info_tag > .tag:hover {border: 2px solid #FF9A00;}

.detail_main_top_info > .info_tag > .tag:last-of-type {margin-right: 0;}

.detail_main_cont {}

.detail_main_cont_tit {margin-bottom: 1em; font-weight: 600; font-size: 30px;}

.detail_main_cont_list {padding: 0 10px; background: #FEFFE5; border-top: 2px solid #000;}

.detail_main_cont_list > li {margin: 10px; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.1); box-sizing: border-box;}

.detail_main_cont_list > li > .tit {display: flex; justify-content: space-between; align-items: center; padding-left: 10px; border-left: 5px solid #EEEEEE; cursor: pointer;}

.detail_main_cont_list > li > .tit.active i {transform:rotate(180deg);}

.detail_main_cont_list > li > .info {display: none; padding: 10px 20px; box-sizing: border-box;}

.detail_main_cont_list > li > .info .info_cover {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; font-size: 14px;}

.detail_main_cont_list > li > .info .info_cover .info_tit {width: 100px; font-weight: 600; font-size:18px;}

.detail_main_cont_list > li > .info .info_cover .info_graph {display: flex; justify-content: space-between; align-items: center; width: calc(100% - 100px);}

.detail_main_cont_list > li > .info .info_cover .info_graph_good {width: 100px; color: blue;}

.detail_main_cont_list > li > .info .info_cover .info_graph_ratio {display: flex; width:calc(100% - 200px); height: 30px; background: #fff;}

.detail_main_cont_list > li > .info .info_cover .info_graph_ratio .good {background: #4343c1;}

.detail_main_cont_list > li > .info .info_cover .info_graph_ratio .bad {background: #de5252;}

.detail_main_cont_list > li > .info .info_cover .info_graph_bad {width: 100px; color: red; text-align: right;}

@media screen and (max-width: 500px) {

.cont_size {padding: 0 10px; box-sizing: border-box;}

.detail_main_top {padding: 1em; background: #EAE9EF; box-sizing: border-box;}

.detail_main_top_pic {width: 100px;}

.detail_main_top_info {width: calc(100% - 120px);}

.detail_main_top_info > .info_sbj > .tit {font-size: 20px;}

.detail_main_top_info > .info_sbj > .name {font-size: 14px;}

.detail_main_top_info > .info_data {background: #fff;}

.detail_main_cont_list > li > .info .info_cover .info_tit {width: 100%; margin-bottom: 10px; font-size: 16px; text-align: center;}

.detail_main_cont_list > li > .info .info_cover .info_graph {width: 100%;}

}

/* search */

.search_main {}

.search_top {margin-bottom: 2em;}

.search_top_input {width: 100%; margin-bottom: 5px; padding: 5px 10px; font-size: 18px; border: none; border-bottom: 1px solid #000; box-sizing: border-box;}

.search_top_input::placeholder {font-weight:600; color:#555;}

.search_top_check {padding: 0 10px; font-size: 12px; box-sizing: border-box;}

.search_top_check input {vertical-align: bottom;}

.search_top_check input[type=number] {width:35px;}

.search_tag {display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 2em;}

.search_tag_sec {width: 49%;}

.search_tag_tit {width: 100%; margin-bottom: 10px; color: #555; font-size: 20px;}

.search_tag_box {}

.search_tag .tag {display: inline-block; margin-bottom: 5px; padding: 3px 10px; color: #333; font-size: 12px; border: 2px solid #333; border-radius: 25px;}

.search_tag .tag:hover {border: 2px solid #FF9A00;}

@media screen and (max-width: 500px) {

.search_tag_sec {width:100%; margin-bottom:2em;}

}

/* search2 */

.search2_main {}

.search2_top {margin-bottom: 2em;}

.search2_top_input {width: 100%; margin-bottom: 5px; padding: 5px 10px; font-size: 18px; border: none; border-bottom: 1px solid #000; box-sizing: border-box;}

.search2_top_input::placeholder {font-weight:600; color:#555;}

.search2_top_check {margin-bottom: 2em; padding: 0 10px; font-size: 12px; box-sizing: border-box;}

.search2_top_check input {vertical-align: bottom;}

.search2_top_check input[type=number] {width:35px;}

.search2_top_result {}

.search2_cont {}

.search2_cont_tit {margin-bottom: 15px; padding-bottom: 15px; color:#333; border-bottom: 2px solid #000;}

.search2_cont_list {}

.search2_cont_list > li {margin-bottom: 15px; padding-bottom: 15px; border-bottom:1px solid rgba(0,0,0,0.2);}

.search2_cont_list > li > .link {display: flex; justify-content: space-between; align-items: flex-start;}

.search2_cont_list > li > .link .img {position: relative; width: 100px;}

.search2_cont_list > li > .link .img .book {width: 100%; border-radius: 0 25px 25px 0; box-shadow: 0px 0px 5px #333;}

.search2_cont_list > li > .link .img .up {position: absolute; top: -8px; right: -10px;}

.search2_cont_list > li > .link .info {width: calc(100% - 130px);}

.search2_cont_list > li > .link .info_tit {margin-bottom: 15px; color:#333; font-weight: 600; font-size:20px;}

.search2_cont_list > li > .link .info_txt {margin-bottom: 15px; color:#555; font-weight: 600; font-size: 13px; word-break: keep-all;}

.search2_cont_list > li > .link .info_data {display: flex;}

.search2_cont_list > li > .link .info_data p {margin-right: 15px; margin-bottom: 15px; font-size: 14px;}

.search2_cont_list > li > .link .info_data p:last-of-type {margin-right: 0;}

.search2_cont_list > li > .link .info_tag {}

.search2_cont_list > li > .link .info_tag .tag {display: inline-block; margin-right: 5px; margin-bottom: 5px; padding: 3px 10px; color:#5032DF; border:2px solid #5032DF; border-radius: 25px;}

.search2_cont_list > li > .link .info_tag .tag:hover {color:#000; border:2px solid #FF9A00;}

.search2_main .f_emph01 {color: #5032df; font-weight: 600;}

.search2_main .f_emph02 {color: #aaa; font-size: 11px;}

.search2_main .f_emph03 {color: #d23a3a; font-size: 12px;}

@media screen and (max-width: 500px) {

.search2_cont_list > li > .link .info .f_emph02 {display:block;}

}

/* footer */

.footer {margin-top: 3em; padding: 2em 0; background: #000;}

.footer_cont {display: flex; justify-content: space-between;}

.footer_info {}

.footer_logo {color:#888; font-family: 'Gugi', cursive; font-size:36px;}

.footer_txt {color: #9e9e9e;}

.footer_link {color: #9e9e9e;}

.footer_link > a {}

.footer_link > a:hover {font-weight: 600;}

.footer_sns {}

.footer_sns > a {}

.footer_sns > a > img {width:40px; transition: all 0.3s;}

.footer_sns > a:hover > img {transform: scale(1.1);}

@media screen and (max-width: 500px) {

.footer_cont {flex-direction: column-reverse;}

.footer_info {text-align: center;}

.footer_sns {display: flex; justify-content: center; margin-bottom: 15px;}

.footer_sns > a {margin: 0 5px;}

}

전반적으로 스타일을 가볍게 하기위해 모든 블록과 나눠지는 부분을 스타일별로 정리하였다.

1.6.2. 태그별 설정 소스코드

reset.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53	html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } body { line-height:1; max-width:1920px; /* max-size limit */ margin:0 auto; font-size:16px; /* for rem size */ } html { font-size: 62.5%; /* for rem size */ } article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; } li{list-style:none;} nav ul { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; text-decoration:none; color: inherit; } /* change colours to suit your needs */ ins { background-color:#ff9; color:#000; text-decoration:none; } /* change colours to suit your needs */ mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; } table { border-collapse:collapse; border-spacing:0; } /* change border colour to suit your needs */ hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; } input, select { vertical-align:middle; font-family:inherit; } /* box-sizing */ header, footer, section *, *:before, *:after{box-sizing:border-box;} /* address */ address {font-style: normal;} button {cursor:pointer; font-family:inherit;} /* button focus outline none */ button:focus { -webkit-tap-highlight-color: transparent; outline: none; -ms-touch-action: manipulation; touch-action: manipulation; } /* clear */ .clearfix:after {content:""; display:block; clear:both;}

body, header와 같은 같은 태그들을 미리 정리해 ui에 일관성을 주었다.

1.6.3 JS 소스코드

common.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25	$(function(){ // index : 상단 탭 $(".plat_main_tab_list li").click(function(){ var idx_tab = $(this).index(); $(this).parents('.plat_main_tab').find('.plat_main_tab_cont > .tab_common').hide().eq(idx_tab).show(); $(this).siblings().removeClass('active'); $(this).addClass('active'); }); // detail : 리스트 슬라이드 $('.detail_main_cont_list > li').on('click',function(){ var $curr_menu_scd = $(this).children('.info'); if($curr_menu_scd.is(":visible")){ $('.detail_main_cont_list > li > .info').slideUp('fast'); $curr_menu_scd.siblings('.tit').removeClass('active'); }else{ $('.detail_main_cont_list > li > .info').slideUp('fast'); $('.detail_main_cont_list > li > .tit').removeClass('active'); $curr_menu_scd.slideDown('fast'); $curr_menu_scd.siblings('.tit').addClass('active'); } }); // detail : 태그 링크 이동 $('.detail_main_top_info > .info_tag > .tag').attr('href','search2.html'); // search : 태그 링크 이동 $('.search_tag .tag').attr('href','search2.html'); });

메인페이지의 페이지이동없는 확인, 상세페이지의 감성분석, 태그별 설정에 제이쿼리를 사용하였다.

2.2. 페이지별 소스 코드

2.2.1. 메인 페이지

index.html

001

002

003

004

005

006

007

008

009

010

011

012

013

014

015

016

017

018

019

020

021

022

023

024

025

026

027

028

029

030

031

032

033

034

035

036

037

038

039

040

041

042

043

044

045

046

047

048

049

050

051

052

053

054

055

056

057

058

059

060

061

062

063

064

065

066

067

068

069

070

071

072

073

074

075

076

077

078

079

080

081

082

083

084

085

086

087

088

089

090

091

092

093

094

095

096

097

098

099

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213214

215

216

217

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="./css/reset.css">

<link rel="stylesheet" href="./css/style.css">

<link rel="preconnect" href="https://fonts.gstatic.com">

<link href="https://fonts.googleapis.com/css2?family=Gugi&display=swap" rel="stylesheet">

<script src="https://kit.fontawesome.com/9606889040.js" crossorigin="anonymous"></script>

<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>

<script type="text/javascript" src="js/common.js"></script>

<title>플랫포밍</title>

</head>

<body>

<div class="wrap">

<header class="plat_header">

<div class="plat_header_cont cont_size">

<h1 class="plat_header_logo"><a href="#">플랫포밍</a></h1>

<a href="search.html" class="plat_header_search"><i class="fas fa-search"></i></a>

</div>

</header>

<main class="plat_main cont_size">

<div class="plat_main_tab">

<ul class="plat_main_tab_list">

<li class="active"><a href="#n">전체</a></li>

<li><a href="#n">조아라</a></li>

<li><a href="#n">문피아</a></li>

<li><a href="#n">카카오페이지</a></li>

</ul>

<div class="plat_main_tab_cont">

<div class="tab_common">

<ul class="tab_cont_list">

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/img01.thumb" alt="img" class="img">

<p class="num">1</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 5.4K</span>

<span class="ep">EP.71</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">미친년은 아니먀</p>

<p class="name">점마구고가</p>

<p class="btn_area">

<span class="plus">연재중</span>

<span class="up">유료</span>

<span class="only">독점</span>

</p>

</div>

</a>

</li>

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/img02.thumb" alt="img" class="img">

<p class="num">2</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 5.2K</span>

<span class="ep">EP.28</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">판타지 세상에서 작가로 살아가는 법</p>

<p class="name">두부두부</p>

<p class="btn_area">

<span class="plus">연재중</span>

<span class="up">유료</span>

<span class="only">독점</span>

</p>

</div>

</a>

</li>

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/img03.thumb" alt="img" class="img">

<p class="num">3</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 5.1K</span>

<span class="ep">EP.91</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">[원신] 약관 동의는 신중히</p>

<p class="name">알콜중독</p>

<p class="btn_area">

<span class="free">자유</span>

<span class="up">유료</span>

</p>

</div>

</a>

</li>

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/img04.thumb" alt="img" class="img">

<p class="num">4</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 4.2K</span>

<span class="ep">EP.124</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">대마법사였던것은 다시 대마법사를 꿈꾼다</p>

<p class="name">day2day</p>

<p class="btn_area">

<span class="plus">연재중</span>

<span class="up">유료</span>

<span class="only">독점</span>

</p>

</div>

</a>

</li>

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/noimg.png" alt="img" class="img">

<p class="num">5</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 4.0K</span>

<span class="ep">EP.24</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">로맨스 판타지의 악당이 되었습니다 </p>

<p class="name">G식이</p>

<p class="btn_area">

<span class="free">자유</span>

<span class="up">유료</span>

<span class="only">독점</span>

</p>

</div>

</a>

</li>

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/img05.thumb" alt="img" class="img">

<p class="num">6</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 2.6K</span>

<span class="ep">EP.69</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">내가 만든 설녀가 되었다</p>

<p class="name">야시장</p>

<p class="btn_area">

<span class="plus">연재중</span>

<span class="up">유료</span>

<span class="only">독점</span>

</p>

</div>

</a>

</li>

</ul>

<ul class="tab_cont_list">

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/img01.thumb" alt="img" class="img">

<p class="num">7</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 5.4K</span>

<span class="ep">EP.71</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">미친년은 아니먀</p>

<p class="name">점마구고가</p>

<p class="btn_area">

<span class="plus">연재중</span>

<span class="up">유료</span>

<span class="only">독점</span>

</p>

</div>

</a>

</li>

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/img02.thumb" alt="img" class="img">

<p class="num">8</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 5.2K</span>

<span class="ep">EP.28</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">판타지 세상에서 작가로 살아가는 법</p>

<p class="name">두부두부</p>

<p class="btn_area">

<span class="plus">연재중</span>

<span class="up">유료</span>

<span class="only">독점</span>

</p>

</div>

</a>

</li>

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/img03.thumb" alt="img" class="img">

<p class="num">9</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 5.1K</span>

<span class="ep">EP.91</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">[원신] 약관 동의는 신중히</p>

<p class="name">알콜중독</p>

<p class="btn_area">

<span class="free">자유</span>

<span class="up">유료</span>

</p>

</div>

</a>

</li>

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/img04.thumb" alt="img" class="img">

<p class="num">10</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 4.2K</span>

<span class="ep">EP.124</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">대마법사였던것은 다시 대마법사를 꿈꾼다</p>

<p class="name">day2day</p>

<p class="btn_area">

<span class="plus">연재중</span>

<span class="up">유료</span>

<span class="only">독점</span>

</p>

</div>

</a>

</li>

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/noimg.png" alt="img" class="img">

<p class="num">11</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 4.0K</span>

<span class="ep">EP.24</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">로맨스 판타지의 악당이 되었습니다 </p>

<p class="name">G식이</p>

<p class="btn_area">

<span class="free">자유</span>

<span class="up">유료</span>

<span class="only">독점</span>

</p>

</div>

</a>

</li>

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/img05.thumb" alt="img" class="img">

<p class="num">12</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 2.6K</span>

<span class="ep">EP.69</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">내가 만든 설녀가 되었다</p>

<p class="name">야시장</p>

<p class="btn_area">

<span class="plus">연재중</span>

<span class="up">유료</span>

<span class="only">독점</span>

</p>

</div>

</a>

</li>

</ul>

<ul class="tab_cont_list">

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/img01.thumb" alt="img" class="img">

<p class="num">13</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 5.4K</span>

<span class="ep">EP.71</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">미친년은 아니먀</p>

<p class="name">점마구고가</p>

<p class="btn_area">

<span class="plus">연재중</span>

<span class="up">유료</span>

<span class="only">독점</span>

</p>

</div>

</a>

</li>

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/img02.thumb" alt="img" class="img">

<p class="num">14</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 5.2K</span>

<span class="ep">EP.28</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">판타지 세상에서 작가로 살아가는 법</p>

<p class="name">두부두부</p>

<p class="btn_area">

<span class="plus">연재중</span>

<span class="up">유료</span>

<span class="only">독점</span>

</p>

</div>

</a>

</li>

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/img03.thumb" alt="img" class="img">

<p class="num">15</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 5.1K</span>

<span class="ep">EP.91</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">[원신] 약관 동의는 신중히</p>

<p class="name">알콜중독</p>

<p class="btn_area">

<span class="free">자유</span>

<span class="up">유료</span>

</p>

</div>

</a>

</li>

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/img04.thumb" alt="img" class="img">

<p class="num">16</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 4.2K</span>

<span class="ep">EP.124</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">대마법사였던것은 다시 대마법사를 꿈꾼다</p>

<p class="name">day2day</p>

<p class="btn_area">

<span class="plus">연재중</span>

<span class="up">유료</span>

<span class="only">독점</span>

</p>

</div>

</a>

</li>

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/noimg.png" alt="img" class="img">

<p class="num">17</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 4.0K</span>

<span class="ep">EP.24</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">로맨스 판타지의 악당이 되었습니다 </p>

<p class="name">G식이</p>

<p class="btn_area">

<span class="free">자유</span>

<span class="up">유료</span>

<span class="only">독점</span>

</p>

</div>

</a>

</li>

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/img05.thumb" alt="img" class="img">

<p class="num">18</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 2.6K</span>

<span class="ep">EP.69</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">내가 만든 설녀가 되었다</p>

<p class="name">야시장</p>

<p class="btn_area">

<span class="plus">연재중</span>

<span class="up">유료</span>

<span class="only">독점</span>

</p>

</div>

</a>

</li>

</ul>

<ul class="tab_cont_list">

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/img01.thumb" alt="img" class="img">

<p class="num">1</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 5.4K</span>

<span class="ep">EP.71</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">미친년은 아니먀</p>

<p class="name">점마구고가</p>

<p class="btn_area">

<span class="plus">연재중</span>

<span class="up">유료</span>

<span class="only">독점</span>

</p>

</div>

</a>

</li>

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/img02.thumb" alt="img" class="img">

<p class="num">2</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 5.2K</span>

<span class="ep">EP.28</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">판타지 세상에서 작가로 살아가는 법</p>

<p class="name">두부두부</p>

<p class="btn_area">

<span class="plus">연재중</span>

<span class="up">유료</span>

<span class="only">독점</span>

</p>

</div>

</a>

</li>

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/img03.thumb" alt="img" class="img">

<p class="num">3</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 5.1K</span>

<span class="ep">EP.91</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">[원신] 약관 동의는 신중히</p>

<p class="name">알콜중독</p>

<p class="btn_area">

<span class="free">자유</span>

<span class="up">유료</span>

</p>

</div>

</a>

</li>

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/img04.thumb" alt="img" class="img">

<p class="num">4</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 4.2K</span>

<span class="ep">EP.124</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">대마법사였던것은 다시 대마법사를 꿈꾼다</p>

<p class="name">day2day</p>

<p class="btn_area">

<span class="plus">연재중</span>

<span class="up">유료</span>

<span class="only">독점</span>

</p>

</div>

</a>

</li>

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/noimg.png" alt="img" class="img">

<p class="num">5</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 4.0K</span>

<span class="ep">EP.24</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">로맨스 판타지의 악당이 되었습니다 </p>

<p class="name">G식이</p>

<p class="btn_area">

<span class="free">자유</span>

<span class="up">유료</span>

<span class="only">독점</span>

</p>

</div>

</a>

</li>

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/img05.thumb" alt="img" class="img">

<p class="num">6</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 2.6K</span>

<span class="ep">EP.69</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">내가 만든 설녀가 되었다</p>

<p class="name">야시장</p>

<p class="btn_area">

<span class="plus">연재중</span>

<span class="up">유료</span>

<span class="only">독점</span>

</p>

</div>

</a>

</li>

</ul>

<ul class="tab_cont_list">

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/img01.thumb" alt="img" class="img">

<p class="num">1</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 5.4K</span>

<span class="ep">EP.71</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">미친년은 아니먀</p>

<p class="name">점마구고가</p>

<p class="btn_area">

<span class="plus">연재중</span>

<span class="up">유료</span>

<span class="only">독점</span>

</p>

</div>

</a>

</li>

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/img02.thumb" alt="img" class="img">

<p class="num">2</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 5.2K</span>

<span class="ep">EP.28</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">판타지 세상에서 작가로 살아가는 법</p>

<p class="name">두부두부</p>

<p class="btn_area">

<span class="plus">연재중</span>

<span class="up">유료</span>

<span class="only">독점</span>

</p>

</div>

</a>

</li>

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/img03.thumb" alt="img" class="img">

<p class="num">3</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 5.1K</span>

<span class="ep">EP.91</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">[원신] 약관 동의는 신중히</p>

<p class="name">알콜중독</p>

<p class="btn_area">

<span class="free">자유</span>

<span class="up">유료</span>

</p>

</div>

</a>

</li>

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/img04.thumb" alt="img" class="img">

<p class="num">4</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 4.2K</span>

<span class="ep">EP.124</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">대마법사였던것은 다시 대마법사를 꿈꾼다</p>

<p class="name">day2day</p>

<p class="btn_area">

<span class="plus">연재중</span>

<span class="up">유료</span>

<span class="only">독점</span>

</p>

</div>

</a>

</li>

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/noimg.png" alt="img" class="img">

<p class="num">5</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 4.0K</span>

<span class="ep">EP.24</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">로맨스 판타지의 악당이 되었습니다 </p>

<p class="name">G식이</p>

<p class="btn_area">

<span class="free">자유</span>

<span class="up">유료</span>

<span class="only">독점</span>

</p>

</div>

</a>

</li>

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/img05.thumb" alt="img" class="img">

<p class="num">6</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 2.6K</span>

<span class="ep">EP.69</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">내가 만든 설녀가 되었다</p>

<p class="name">야시장</p>

<p class="btn_area">

<span class="plus">연재중</span>

<span class="up">유료</span>

<span class="only">독점</span>

</p>

</div>

</a>

</li>

</ul>

<ul class="tab_cont_list">

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/img01.thumb" alt="img" class="img">

<p class="num">1</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 5.4K</span>

<span class="ep">EP.71</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">미친년은 아니먀</p>

<p class="name">점마구고가</p>

<p class="btn_area">

<span class="plus">연재중</span>

<span class="up">유료</span>

<span class="only">독점</span>

</p>

</div>

</a>

</li>

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/img02.thumb" alt="img" class="img">

<p class="num">2</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 5.2K</span>

<span class="ep">EP.28</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">판타지 세상에서 작가로 살아가는 법</p>

<p class="name">두부두부</p>

<p class="btn_area">

<span class="plus">연재중</span>

<span class="up">유료</span>

<span class="only">독점</span>

</p>

</div>

</a>

</li>

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/img03.thumb" alt="img" class="img">

<p class="num">3</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 5.1K</span>

<span class="ep">EP.91</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">[원신] 약관 동의는 신중히</p>

<p class="name">알콜중독</p>

<p class="btn_area">

<span class="free">자유</span>

<span class="up">유료</span>

</p>

</div>

</a>

</li>

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/img04.thumb" alt="img" class="img">

<p class="num">4</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 4.2K</span>

<span class="ep">EP.124</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">대마법사였던것은 다시 대마법사를 꿈꾼다</p>

<p class="name">day2day</p>

<p class="btn_area">

<span class="plus">연재중</span>

<span class="up">유료</span>

<span class="only">독점</span>

</p>

</div>

</a>

</li>

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/noimg.png" alt="img" class="img">

<p class="num">5</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 4.0K</span>

<span class="ep">EP.24</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">로맨스 판타지의 악당이 되었습니다 </p>

<p class="name">G식이</p>

<p class="btn_area">

<span class="free">자유</span>

<span class="up">유료</span>

<span class="only">독점</span>

</p>

</div>

</a>

</li>

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/img05.thumb" alt="img" class="img">

<p class="num">6</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 2.6K</span>

<span class="ep">EP.69</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">내가 만든 설녀가 되었다</p>

<p class="name">야시장</p>

<p class="btn_area">

<span class="plus">연재중</span>

<span class="up">유료</span>

<span class="only">독점</span>

</p>

</div>

</a>

</li>

</ul>

</div>

<div class="tab_common">

<ul class="tab_cont_list">

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/img01.thumb" alt="img" class="img">

<p class="num">1</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 5.4K</span>

<span class="ep">EP.71</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">미친년은 아니먀</p>

<p class="name">점마구고가</p>

<p class="btn_area">

<span class="plus">연재중</span>

<span class="up">유료</span>

<span class="only">독점</span>

</p>

</div>

</a>

</li>

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/img02.thumb" alt="img" class="img">

<p class="num">2</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 5.2K</span>

<span class="ep">EP.28</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">판타지 세상에서 작가로 살아가는 법</p>

<p class="name">두부두부</p>

<p class="btn_area">

<span class="plus">연재중</span>

<span class="up">유료</span>

<span class="only">독점</span>

</p>

</div>

</a>

</li>

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/img04.thumb" alt="img" class="img">

<p class="num">3</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 4.2K</span>

<span class="ep">EP.124</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">대마법사였던것은 다시 대마법사를 꿈꾼다</p>

<p class="name">day2day</p>

<p class="btn_area">

<span class="plus">연재중</span>

<span class="up">유료</span>

<span class="only">독점</span>

</p>

</div>

</a>

</li>

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/img05.thumb" alt="img" class="img">

<p class="num">4</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 2.6K</span>

<span class="ep">EP.69</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">내가 만든 설녀가 되었다</p>

<p class="name">야시장</p>

<p class="btn_area">

<span class="plus">연재중</span>

<span class="up">유료</span>

<span class="only">독점</span>

</p>

</div>

</a>

</li>

</ul>

</div>

<div class="tab_common">

<ul class="tab_cont_list">

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/img01.thumb" alt="img" class="img">

<p class="num">1</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 5.4K</span>

<span class="ep">EP.71</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">미친년은 아니먀</p>

<p class="name">점마구고가</p>

<p class="btn_area">

<span class="plus">연재중</span>

<span class="up">유료</span>

<span class="only">독점</span>

</p>

</div>

</a>

</li>

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/img02.thumb" alt="img" class="img">

<p class="num">2</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 5.2K</span>

<span class="ep">EP.28</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">판타지 세상에서 작가로 살아가는 법</p>

<p class="name">두부두부</p>

<p class="btn_area">

<span class="plus">연재중</span>

<span class="up">유료</span>

<span class="only">독점</span>

</p>

</div>

</a>

</li>

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/img04.thumb" alt="img" class="img">

<p class="num">3</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 4.2K</span>

<span class="ep">EP.124</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">대마법사였던것은 다시 대마법사를 꿈꾼다</p>

<p class="name">day2day</p>

<p class="btn_area">

<span class="plus">연재중</span>

<span class="up">유료</span>

<span class="only">독점</span>

</p>

</div>

</a>

</li>

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/noimg.png" alt="img" class="img">

<p class="num">4</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 4.0K</span>

<span class="ep">EP.24</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">로맨스 판타지의 악당이 되었습니다 </p>

<p class="name">G식이</p>

<p class="btn_area">

<span class="free">자유</span>

<span class="up">유료</span>

<span class="only">독점</span>

</p>

</div>

</a>

</li>

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/img05.thumb" alt="img" class="img">

<p class="num">5</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 2.6K</span>

<span class="ep">EP.69</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">내가 만든 설녀가 되었다</p>

<p class="name">야시장</p>

<p class="btn_area">

<span class="plus">연재중</span>

<span class="up">유료</span>

<span class="only">독점</span>

</p>

</div>

</a>

</li>

</ul>

</div>

<div class="tab_common">

<ul class="tab_cont_list">

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/img03.thumb" alt="img" class="img">

<p class="num">1</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 5.1K</span>

<span class="ep">EP.91</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">[원신] 약관 동의는 신중히</p>

<p class="name">알콜중독</p>

<p class="btn_area">

<span class="free">자유</span>

<span class="up">유료</span>

</p>

</div>

</a>

</li>

<li>

<a href="detail.html" target="_self">

<div class="tab_cont_list_pic">

<img src="img/noimg.png" alt="img" class="img">

<p class="num">2</p>

<p class="info">

<span class="like"><i class="fas fa-star"></i> 4.0K</span>

<span class="ep">EP.24</span>

</p>

</div>

<div class="tab_cont_list_txt">

<p class="tit">로맨스 판타지의 악당이 되었습니다 </p>

<p class="name">G식이</p>

<p class="btn_area">

<span class="free">자유</span>

<span class="up">유료</span>

<span class="only">독점</span>

</p>

</div>

</a>

</li>

</ul>

</div>

</div>

</div>

</main>

<footer class="footer">

<div class="footer_cont cont_size">

<div class="footer_info">

<h2 class="footer_logo">플랫포밍</h2>

<p class="footer_txt">

Copyright &copy; 플랫포밍 All Rights Reserved.

</p>

<div class="footer_link">

<a href="#">이용약관</a> | <a href="#">개인정보취급방침</a>

</div>

</div>

<div class="footer_sns">

<a href="#"><img src="img/instagram.png" alt="icon"></a>

<a href="#"><img src="img/youtube.png" alt="icon"></a>

<a href="#"><img src="img/facebook.png" alt="icon"></a>

<a href="#"><img src="img/twitter.png" alt="icon"></a>

</div>

</div>

</footer>

</div>

</body>

</html>

아직 db와의 연동이 되어있지않아 자바스크립트가 아닌 개개인적인 정보로 입력되어있다.

2.2.2. 상세페이지

detail.html
001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017 018 019 020 021 022 023 024 025 026 027 028 029 030 031 032 033 034 035 036 037 038 039 040 041 042 043 044 045 046 047 048 049 050 051 052 053 054 055 056 057 058 059 060 061 062 063 064 065 066 067 068 069 070 071 072 073 074 075 076 077 078 079 080 081 082 083 084 085 086 087 088 089 090 091 092 093 094 095 096 097 098 099 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175	<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Gugi&display=swap" rel="stylesheet"> <script src="https://kit.fontawesome.com/9606889040.js" crossorigin="anonymous"></script> <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="js/common.js"></script> <title>플랫포밍</title> </head> <body> <div class="wrap"> <header class="plat_header"> <div class="plat_header_cont cont_size"> <h1 class="plat_header_logo"><a href="index.html">플랫포밍</a></h1> <a href="search.html" class="plat_header_search"><i class="fas fa-search"></i></a> </div> </header> <main class="detail_main cont_size"> <div class="detail_main_top"> <div class="detail_main_top_pic"> <img src="img/img02.thumb" alt="img" class="img"> </div> <div class="detail_main_top_info"> <div class="info_sbj"> <p class="tit">판타지 세상에서 작가로 살아가는 법</p> <p class="name">작가 <span class="f_emph01">두부두부</span></p> </div> <div class="info_data"> <p><i class="fas fa-user"></i> 471,729명</p> <p><i class="fas fa-book-open"></i> 29회차</p> <p><i class="far fa-thumbs-up"></i> 38,989회</p> </div> <p class="info_body"> 판타지 세상에 환생했다. 여기 읽을만한 소설이 하나같이 수능 영어 문제 같다. 그래서 전직을 살려 취미로 삼을 겸 내가 직접 판타지 소설을 쓰기 시작했다. 그런데 내가 쓴 소설의 파급력이 이상하다. 그것도 엄청. </p> <div class="info_tag"> 태그 : <a href="#" class="tag">#판타지</a><a href="#" class="tag">#라이트노벨</a><a href="#" class="tag">#하렘</a><a href="#" class="tag">#착각</a><a href="#" class="tag">#아카데미</a> </div> </div> </div> <div class="detail_main_cont"> <p class="detail_main_cont_tit">회차리스트</p> <ul class="detail_main_cont_list"> <li> <p class="tit"><span>1화</span><i class="fas fa-sort-down"></i></p> <div class="info"> <div class="info_cover"> <p class="info_tit">댓글평가</p> <div class="info_graph"> <p class="info_graph_good">긍정적 <span>70%</span></p> <p class="info_graph_ratio"><span class="good" style="width:70%;"></span><span class="bad" style="width:30%;"></span></p> <p class="info_graph_bad">부정적 <span>30%</span></p> </div> </div> </div> </li> <li> <p class="tit"><span>2화</span><i class="fas fa-sort-down"></i></p> <div class="info"> <div class="info_cover"> <p class="info_tit">댓글평가</p> <div class="info_graph"> <p class="info_graph_good">긍정적 <span>50%</span></p> <p class="info_graph_ratio"><span class="good" style="width:50%;"></span><span class="bad" style="width:50%;"></span></p> <p class="info_graph_bad">부정적 <span>50%</span></p> </div> </div> </div> </li> <li> <p class="tit"><span>3화</span><i class="fas fa-sort-down"></i></p> <div class="info"> <div class="info_cover"> <p class="info_tit">댓글평가</p> <div class="info_graph"> <p class="info_graph_good">긍정적 <span>90%</span></p> <p class="info_graph_ratio"><span class="good" style="width:90%;"></span><span class="bad" style="width:10%;"></span></p> <p class="info_graph_bad">부정적 <span>10%</span></p> </div> </div> </div> </li> <li> <p class="tit"><span>4화</span><i class="fas fa-sort-down"></i></p> <div class="info"> <div class="info_cover"> <p class="info_tit">댓글평가</p> <div class="info_graph"> <p class="info_graph_good">긍정적 <span>70%</span></p> <p class="info_graph_ratio"><span class="good" style="width:70%;"></span><span class="bad" style="width:30%;"></span></p> <p class="info_graph_bad">부정적 <span>30%</span></p> </div> </div> </div> </li> <li> <p class="tit"><span>5화</span><i class="fas fa-sort-down"></i></p> <div class="info"> <div class="info_cover"> <p class="info_tit">댓글평가</p> <div class="info_graph"> <p class="info_graph_good">긍정적 <span>80%</span></p> <p class="info_graph_ratio"><span class="good" style="width:80%;"></span><span class="bad" style="width:20%;"></span></p> <p class="info_graph_bad">부정적 <span>20%</span></p> </div> </div> </div> </li> <li> <p class="tit"><span>6화</span><i class="fas fa-sort-down"></i></p> <div class="info"> <div class="info_cover"> <p class="info_tit">댓글평가</p> <div class="info_graph"> <p class="info_graph_good">긍정적 <span>75%</span></p> <p class="info_graph_ratio"><span class="good" style="width:75%;"></span><span class="bad" style="width:25%;"></span></p> <p class="info_graph_bad">부정적 <span>25%</span></p> </div> </div> </div> </li> <li> <p class="tit"><span>7화</span><i class="fas fa-sort-down"></i></p> <div class="info"> <div class="info_cover"> <p class="info_tit">댓글평가</p> <div class="info_graph"> <p class="info_graph_good">긍정적 <span>80%</span></p> <p class="info_graph_ratio"><span class="good" style="width:80%;"></span><span class="bad" style="width:20%;"></span></p> <p class="info_graph_bad">부정적 <span>20%</span></p> </div> </div> </div> </li> <li> <p class="tit"><span>8화</span><i class="fas fa-sort-down"></i></p> <div class="info"> <div class="info_cover"> <p class="info_tit">댓글평가</p> <div class="info_graph"> <p class="info_graph_good">긍정적 <span>95%</span></p> <p class="info_graph_ratio"><span class="good" style="width:95%;"></span><span class="bad" style="width:5%;"></span></p> <p class="info_graph_bad">부정적 <span>5%</span></p> </div> </div> </div> </li> </ul> </div> </main> <footer class="footer"> <div class="footer_cont cont_size"> <div class="footer_info"> <h2 class="footer_logo">플랫포밍</h2> <p class="footer_txt"> Copyright &copy; 플랫포밍 All Rights Reserved. </p> <div class="footer_link"> <a href="#">이용약관</a> | <a href="#">개인정보취급방침</a> </div> </div> <div class="footer_sns"> <a href="#"><img src="img/instagram.png" alt="icon"></a> <a href="#"><img src="img/youtube.png" alt="icon"></a> <a href="#"><img src="img/facebook.png" alt="icon"></a> <a href="#"><img src="img/twitter.png" alt="icon"></a> </div> </div> </footer> </div> </body> </html>

2.2.3. 검색 페이지

search.html
001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017 018 019 020 021 022 023 024 025 026 027 028 029 030 031 032 033 034 035 036 037 038 039 040 041 042 043 044 045 046 047 048 049 050 051 052 053 054 055 056 057 058 059 060 061 062 063 064 065 066 067 068 069 070 071 072 073 074 075 076 077 078 079 080 081 082 083 084 085 086 087 088 089 090 091 092 093 094 095 096 097 098 099 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164	<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Gugi&display=swap" rel="stylesheet"> <script src="https://kit.fontawesome.com/9606889040.js" crossorigin="anonymous"></script> <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="js/common.js"></script> <title>플랫포밍</title> </head> <body> <div class="wrap"> <header class="plat_header"> <div class="plat_header_cont cont_size"> <h1 class="plat_header_logo"><a href="index.html">플랫포밍</a></h1> <a href="search.html" class="plat_header_search"><i class="fas fa-search"></i></a> </div> </header> <main class="search_main cont_size"> <div class="search_top"> <input type="text" placeholder="소설제목, 태그, 작가를 검색해주세요." class="search_top_input"> <p class="search_top_check"> 차단검색 제외<input type="checkbox"> 최소 <input type="number">화 이산 연중 제외<input type="checkbox"> </p> </div> <div class="search_tag"> <div class="search_tag_sec"> <h2 class="search_tag_tit"><i class="far fa-bookmark"></i> 추천 해시태그</h2> <div class="search_tag_box"> <a href="#" class="tag">#판타지</a> <a href="#" class="tag">#라이트노벨</a> <a href="#" class="tag">#전생</a> <a href="#" class="tag">#코메디</a> <a href="#" class="tag">#현대</a> <a href="#" class="tag">#중세</a> <a href="#" class="tag">#하렘</a> <a href="#" class="tag">#개그</a> <a href="#" class="tag">#드라마</a> <a href="#" class="tag">#일상</a> <a href="#" class="tag">#로맨스</a> <a href="#" class="tag">#SF</a> <a href="#" class="tag">#스포츠</a> <a href="#" class="tag">#무협</a> <a href="#" class="tag">#BL</a> </div> </div> <div class="search_tag_sec"> <h2 class="search_tag_tit"><i class="far fa-star"></i> 추천 해시태그</h2> <div class="search_tag_box"> <a href="#" class="tag">#TS</a> <a href="#" class="tag">#패러디</a> <a href="#" class="tag">#남성향</a> <a href="#" class="tag">#아카데미</a> <a href="#" class="tag">#먼치킨</a> <a href="#" class="tag">#이세계</a> <a href="#" class="tag">#얀데레</a> <a href="#" class="tag">#순애</a> <a href="#" class="tag">#떡타지</a> <a href="#" class="tag">#조교</a> <a href="#" class="tag">#빙의</a> <a href="#" class="tag">#남녀역전</a> <a href="#" class="tag">#게임</a> <a href="#" class="tag">#공모전</a> <a href="#" class="tag">#백합</a> </div> </div> </div> <div class="search_tag"> <h2 class="search_tag_tit"># 장르 해시태그</h2> <div class="search_tag_box"> <a href="#" class="tag">#판타지</a> <a href="#" class="tag">#라이트노벨</a> <a href="#" class="tag">#전생</a> <a href="#" class="tag">#코메디</a> <a href="#" class="tag">#현대</a> <a href="#" class="tag">#중세</a> <a href="#" class="tag">#하렘</a> <a href="#" class="tag">#개그</a> <a href="#" class="tag">#드라마</a> <a href="#" class="tag">#일상</a> <a href="#" class="tag">#로맨스</a> <a href="#" class="tag">#SF</a> <a href="#" class="tag">#스포츠</a> <a href="#" class="tag">#무협</a> <a href="#" class="tag">#BL</a> <a href="#" class="tag">#TS</a> <a href="#" class="tag">#패러디</a> <a href="#" class="tag">#남성향</a> <a href="#" class="tag">#아카데미</a> <a href="#" class="tag">#먼치킨</a> <a href="#" class="tag">#이세계</a> <a href="#" class="tag">#얀데레</a> <a href="#" class="tag">#순애</a> <a href="#" class="tag">#떡타지</a> <a href="#" class="tag">#조교</a> <a href="#" class="tag">#빙의</a> <a href="#" class="tag">#남녀역전</a> <a href="#" class="tag">#게임</a> <a href="#" class="tag">#공모전</a> <a href="#" class="tag">#백합</a> </div> </div> <div class="search_tag"> <h2 class="search_tag_tit"># 인물 해시태그</h2> <div class="search_tag_box"> <a href="#" class="tag">#판타지</a> <a href="#" class="tag">#라이트노벨</a> <a href="#" class="tag">#전생</a> <a href="#" class="tag">#코메디</a> <a href="#" class="tag">#현대</a> <a href="#" class="tag">#중세</a> <a href="#" class="tag">#하렘</a> <a href="#" class="tag">#개그</a> <a href="#" class="tag">#드라마</a> <a href="#" class="tag">#일상</a> <a href="#" class="tag">#로맨스</a> <a href="#" class="tag">#SF</a> <a href="#" class="tag">#스포츠</a> <a href="#" class="tag">#무협</a> <a href="#" class="tag">#BL</a> <a href="#" class="tag">#TS</a> <a href="#" class="tag">#패러디</a> <a href="#" class="tag">#남성향</a> <a href="#" class="tag">#아카데미</a> <a href="#" class="tag">#먼치킨</a> <a href="#" class="tag">#이세계</a> <a href="#" class="tag">#얀데레</a> <a href="#" class="tag">#순애</a> <a href="#" class="tag">#떡타지</a> <a href="#" class="tag">#조교</a> <a href="#" class="tag">#빙의</a> <a href="#" class="tag">#남녀역전</a> <a href="#" class="tag">#게임</a> <a href="#" class="tag">#공모전</a> <a href="#" class="tag">#백합</a> </div> </div> <div class="search_tag"> <h2 class="search_tag_tit"># 소재 해시태그</h2> <div class="search_tag_box"> <a href="#" class="tag">#판타지</a> <a href="#" class="tag">#라이트노벨</a> <a href="#" class="tag">#전생</a> <a href="#" class="tag">#코메디</a> <a href="#" class="tag">#현대</a> <a href="#" class="tag">#중세</a> <a href="#" class="tag">#하렘</a> <a href="#" class="tag">#개그</a> <a href="#" class="tag">#드라마</a> <a href="#" class="tag">#일상</a> <a href="#" class="tag">#로맨스</a> <a href="#" class="tag">#SF</a> <a href="#" class="tag">#스포츠</a> <a href="#" class="tag">#무협</a> <a href="#" class="tag">#BL</a> <a href="#" class="tag">#TS</a> <a href="#" class="tag">#패러디</a> <a href="#" class="tag">#남성향</a> <a href="#" class="tag">#아카데미</a> <a href="#" class="tag">#먼치킨</a> <a href="#" class="tag">#이세계</a> <a href="#" class="tag">#얀데레</a> <a href="#" class="tag">#순애</a> <a href="#" class="tag">#떡타지</a> <a href="#" class="tag">#조교</a> <a href="#" class="tag">#빙의</a> <a href="#" class="tag">#남녀역전</a> <a href="#" class="tag">#게임</a> <a href="#" class="tag">#공모전</a> <a href="#" class="tag">#백합</a> </div> </div> </main> <footer class="footer"> <div class="footer_cont cont_size"> <div class="footer_info"> <h2 class="footer_logo">플랫포밍</h2> <p class="footer_txt"> Copyright &copy; 플랫포밍 All Rights Reserved. </p> <div class="footer_link"> <a href="#">이용약관</a> | <a href="#">개인정보취급방침</a> </div> </div> <div class="footer_sns"> <a href="#"><img src="img/instagram.png" alt="icon"></a> <a href="#"><img src="img/youtube.png" alt="icon"></a> <a href="#"><img src="img/facebook.png" alt="icon"></a> <a href="#"><img src="img/twitter.png" alt="icon"></a> </div> </div> </footer> </div> </body> </html>

2.2.4. 검색 상세 페이지

search2.html
001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017 018 019 020 021 022 023 024 025 026 027 028 029 030 031 032 033 034 035 036 037 038 039 040 041 042 043 044 045 046 047 048 049 050 051 052 053 054 055 056 057 058 059 060 061 062 063 064 065 066 067 068 069 070 071 072 073 074 075 076 077 078 079 080 081 082 083 084 085 086 087 088 089 090 091 099	<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Gugi&display=swap" rel="stylesheet"> <script src="https://kit.fontawesome.com/9606889040.js" crossorigin="anonymous"></script> <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="js/common.js"></script> <title>플랫포밍</title> </head> <body> <div class="wrap"> <header class="plat_header"> <div class="plat_header_cont cont_size"> <h1 class="plat_header_logo"><a href="index.html">플랫포밍</a></h1> <a href="search.html" class="plat_header_search"><i class="fas fa-search"></i></a> </div> </header> <main class="search2_main cont_size"> <div class="search2_top"> <input type="text" placeholder="판타지" class="search2_top_input"> <p class="search2_top_check"> 차단검색 제외<input type="checkbox"> 최소 <input type="number">화 이산 연중 제외<input type="checkbox"> </p> <p class="search2_top_result"> <span class="f_emph01">판타지</span> 해시태그 검색 결과 입니다.<br> <span class="f_emph02">띄여쓰기시 중첩 해시태그 검색(AND)을 제공합니다.</span> </p> </div> <div class="search2_cont"> <h2 class="search2_cont_tit"><i class="far fa-sticky-note"></i> 총 2개 작품 <span class="f_emph03">(1개 작품 제외)</span></h2> <ul class="search2_cont_list"> <li> <a href="detail.html" class="link"> <div class="img"> <img src="img/img02.thumb" alt="img" class="book"> <img src="img/up.png" alt="img" class="up"> </div> <div class="info"> <p class="info_tit">판타지 세상에서 작가로 살아가는 법 <span class="f_emph02">두부두부</span></p> <p class="info_txt"> 판타지 세상에 환생했다. 여기 읽을만한 소설이 하나같이 수능 영어 문제 같다. 그래서 전직을 살려 취미로 삼을 겸 내가 직접 판타지 소설을 쓰기 시작했다. 그런데 내가 쓴 소설의 파급력이 이상하다. 그것도 엄청. </p> <div class="info_data"> <p><i class="fas fa-user"></i> 476.2K명</p> <p><i class="fas fa-book-open"></i> 29회차</p> <p><i class="far fa-thumbs-up"></i> 39.2K회</p> </div> <div class="info_tag"> <p class="tag">#판타지</p><p class="tag">#라이트노벨</p><p class="tag">#하렘</p><p class="tag">#착각</p><p class="tag">#아카데미</p> </div> </div> </a> </li> <li> <a href="detail.html" class="link"> <div class="img"> <img src="img/noimg.png" alt="img" class="img"> <img src="img/up.png" alt="img" class="up"> </div> <div class="info"> <p class="info_tit">로맨스 판타지의 악당이 되었습니다 <span class="f_emph02">G식이</span></p> <p class="info_txt"> 로맨스 판타지 속 초반 악역에 빙의 해버렸다. 여주에게 파혼 당하고 몰락하는 그런 경험치몹 A로 말이다. 그런데 어째선지 그녀가 나를 놓아주지 않는다. </p> <div class="info_data"> <p><i class="fas fa-user"></i> 346.6K명</p> <p><i class="fas fa-book-open"></i> 25회차</p> <p><i class="far fa-thumbs-up"></i> 34.7K회</p> </div> <div class="info_tag"> <p class="tag">#판타지</p><p class="tag">#순애</p><p class="tag">#빙의</p><p class="tag">#아카데미</p><p class="tag">#회귀</p> </div> </div> </a> </li> </ul> </div> </main> <footer class="footer"> <div class="footer_cont cont_size"> <div class="footer_info"> <h2 class="footer_logo">플랫포밍</h2> <p class="footer_txt"> Copyright &copy; 플랫포밍 All Rights Reserved. </p> <div class="footer_link"> <a href="#">이용약관</a> | <a href="#">개인정보취급방침</a> </div> </div> <div class="footer_sns"> <a href="#"><img src="img/instagram.png" alt="icon"></a> <a href="#"><img src="img/youtube.png" alt="icon"></a> <a href="#"><img src="img/facebook.png" alt="icon"></a> <a href="#"><img src="img/twitter.png" alt="icon"></a></div>

3. 마무리

3.1. 향후 추진 계획

향후 추진계획으로는 1학기 발표에서는 DB와 서버연동이 제대로 마무리되지 못했습니다.

현재 html 파일로 제작된 것들을 자바스크립트 파일로 변환하고 DB와 연동시켜 사용자가 페이지를 눌렀을 때 해당 접근번호에 맞는 정보를 DB에서 뿌려주는 방식으로 변경할 예정입니다.

현재 서버 쪽에서 문제가 발생하는 것은 조금 더 노력해 고쳐보려합니다. 또한 감성분석에 대한 댓글평가가 너무 일반적이다, 확인해도 큰 가치가 없는 것 같다는 느낌이 들어 아예 페이지 하단에 회차별 그래프가 아닌 전체적인 그래프를 그려 회차별로 상승곡선인지, 하향곡선인지를 판단할 수 있게 하려합니다.

3.3. 정리

어째서 프로젝트를 ‘팀’으로 하는지 느꼈습니다. 개개인의 생각이나 실력에 상관없이 시간이란 절대적인 가치를 지닌 자원은 한도가 있었습니다. 혼자서 진행한 서버, UI구축, DB에 대한 부분이 만일 팀원이 있어 이 것을 세 명이서 나눴다면 조금 더 완성도 있고 보기 좋은 사이트가 되었으리라고 생각합니다.

하지만 혼자서 진행하며 얻은 부분도 적지 않다고 생각합니다. 자신이 에러에 대한 대처가 많이 미숙하다는 점과 서버에 대한 공부, DB에 대한 공부, UI에 대한 공부를 전반적으로 할 수 있었습니다. 그 중에서 UI에 대한 부분에서 큰 흥미를 느끼고 가장 깊게 파고든 것 같습니다. 프론트  개발에 대한 정보도 찾아보게 되었습니다.

여러모로 부족한 부분도 많고, 팀 프로젝트를 혼자 진행하겠다고 말하며 그리 좋지 않은 결과를 내보인 점에는 교수님께 죄송하지만 나름대로 뜻깊고 배움이 있는 프로젝트였습니다. 팀의 가치에 대해 다시 생각해보게 되었고, 여러모로 배움과 즐거움이 있었습니다.