14강(게시판 메인 페이지 만들기)

네비게이션만 있던 메인 페이지 꾸미기. 부트스트랩에서 제공하는 점보트론 이용하기.

 

메인 페이지 하단 부분에 메인 페이지를 표시해주는 컨테이너 추가

 

 

 

요렇게 화면이 나온다. 폰트가 예쁘지 않으니 좀 꾸며보자고 한다.

 

 

Webapp에 있는 css폴더 - new - Other 들어가주자.

 

 

 

Css라고 검색 후 CSS File을 선택하고 custom이라는 이름으로 CSS 파일 생성

 

나눔 고딕체와 한나체를 불러오는 코드 작성

 

 

main 페이지에 방금 만든 css 파일을 참조하는 코드를 작성, 그리고 액션 페이지 빼고 다른 모든 파일에 이 참조 코드를 추가해주자.

 

 

이제 이미지를 삽입해보자

 

webapp에 images라는 폴더를 만들어주고 몇 개의 사진을 넣어주자.

 

 

사진첩 같은 기능을 하는 carousel 이라는 코드를 추가해주자. 그러면 이미지를 출력해주면서 동적으로 화면을 바꿔준다.

 

 

강의와는 조금 다른게 myCarousel 앞에 #을 붙여줘야 404에러가 생기지 않는다.

 

완성!