[1강] 동빈나 JSP Ajax 실시간 익명 채팅 사이트 개발하기 (프로젝트 소개 및 화면 디자인)

https://youtu.be/_eC_lbmoizg?list=PLRx0vPvlEmdAVcSdYgqjJ64A7ggHhorU_

 

Dynamic WebProject로 Anonymous(프로젝트명) 프로젝트를 생성합니다. web.xml 도 같이 생성되어야 합니다.(Next 두번, checkbox 체크)

https://blog.naver.com/ndb796/221020960319

 

트위터 부트스트랩(Twitter Bootstrap) CSS 프레임워크 다운로드

JSP 게시판 만들기 등 제 강좌에서 사용된 부트스트랩 프레임워크 파일입니다.

blog.naver.com

해당 블로그( 혹은 bootstrap 사이트)에서 파일을 다운받은 뒤 압축을 풉니다.

그 후 압축파일에 있는 css,fonts,js 폴더를 WebContent 로 복사붙여넣기 합니다.

css 파일 안에 custom.css 를 생성합니다.

https://www.bootdey.com/snippets/view/Chat-box#css

 

Bootstrap snippet. Chat box

Bootstrap snippets. Chat box using HTML, Javascript, jQuery, and CSS by Dey Dey

www.bootdey.com

해당 사이트의 css 코드를 긁어서 custom.css 에 복사 붙여넣기 합니다.

그 후 WebContent 파일에 images 폴더를 생성하여 icon 파일을 붙여넣기합니다.(본인이 원하는 이미지)

그 후 index.jsp 에 다음과 같이 작성합니다.

부트스트랩 class 가 적용된 div 영역을 단순히 나누는 것 뿐이므로 코드를 첨부합니다.

css도 googleapis 를 받아서 폰트를 바꾸었으므로 css도 첨부합니다.

custom.css

0.00MB

index.jsp.txt

0.00MB

후 해당 화면을 실행시키면 다음과 같이 나오지만, 저는 bootstrap이 적용이 안되었네요

Console에는 오류가 없느넫..