Cooper's devlog

1-2. HTML 개발 본문

Programming/Spring-boot

1-2. HTML 개발

cooper_dev 2020. 7. 7. 16:13

1. 강의 링크(박재성님)

1-2. HTML 개발

 

https://www.youtube.com/watch?v=GoKcGcS3bj0

 


2. 학습 내용

 

-html 개발

1. bootstrap start html 추가

2. bootstarp css 라이브러리 추가

3. jquery javascript 라이브러리 추가

4. index.html → navgation bar 추가 

5. 회원가입 페이지 개발

 

 

 


3. 과정

 

(1) bootstrap test하기

https://getbootstrap.com/docs/3.3/getting-started/ (bootstrap 3.3.7 docs)

 

Getting started · Bootstrap

Bootstrap is downloadable in two forms, within which you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations. jQuery required Please note that all JavaScript plugins require j

getbootstrap.com

 

  1. Basic template 부분 copy
  2. index.html에 복사 및 확인
  3. bootstrap 및 css 파일 제대로 networking 여부 확인 (개발자 도구(F12) → network 확인)

제대로 못불러 오는 것으 확인할 수 있다.


(2)maven repository에 가서 bootstrap(3.3.7-1)와 jquery(3.1.0) 연동하기

[bootstrap 3.3.7-1]

 

[jquery3.1.0]


(3)해당 빨간색 문구를 pom.xml에 dependency를 추가한다.

 

 

pom.xml dependency 화면

 

 


(4)경로 변경(resources) 하위 폴더부터 명명하도록한다.

 

-해당 밑줄 친 경로대로 적는다. 

-해당 밑줄 친 경로대로 적는다.

 


(5) html 꾸미기

1. navbar에 있는 내용 가지고 오기

https://getbootstrap.com/docs/3.3/components/#navbar

2. Forms 내용 가지고 오기

https://getbootstrap.com/docs/3.3/css/#forms


 

Comments