11. bootstrap5으로 메인 페이지 만들기

오늘은 지금까지 배웠던 것들로 페이지를 만들어 볼 생각이다.

커뮤니티를 만들려고 했는데, 뭔가 채워 넣을게 많은 조리사 자격증 사이트로 정했다.

 

사진들은 무료 이미지사이트에서 다운받아 사용하였다.

솔직히 사진이 있으니까 뭔가 그럴듯해보이지만,  사실 별로 한건 없다.

header

navbar와 드롭박스를 가져와서 사용하였다.

각 태그를 누르면 페이지에 연결되게 만들어야 하는데,

js를 모르니 페이지 만드는게 노가다라서 여기까지만 했다.

section

섹션은 리스트로된 글 목록, 카드로된 이미지를 row, col을 이용해 반응형으로 만들어 놓았다.

글목록과 카드 둘다 col-12 col-md-6 col-lg-4 기준으로 만들었다.

footer

예제로 제공되는 footer를 가져와 넣어주기만 했다.

기타 페이지

기존 만들었던 게시판 그대로 넣어주었다.

한식조리 기능사 페이지엔 시험 종목들을 만들 생각이었다.

끝으로

페이지를 여러개 만들때 똑같은 틀을 계속 적어줘야했는데, 꽤 귀찮았다.

이정도면 충분한 것 같으니 이제 js를 배울때가 된 것 같다.