1) 학습한 내용

1.Bootstrap을 이용해 웹페이지 만들기 ver.1

(1)header

①코드

배경색을 파랑색으로, 글씨색을 흰색으로, 중앙정렬

②결과

(2)nav

①코드

배경색,글자색을 검은색, sm에서 수직 정렬
active는 클릭된 상태, disabled는 선택 안되게 설정

②결과

화면 폭이 넓을 때

화면 폭이 좁을 때

(3)section(aside)

①코드

mt-5 : margin-top:5를 의미
flex-column : 항상 세로메뉴(nav는 수평메뉴이지만 세로메뉴로 정렬시켜줌)

②결과

(4)section(article)

①코드

②결과

(5)footer

①코드

head에 footer에 쓰일 아이콘 링크 추가

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">

배경색을 검은색, 글자색을 흰색
d-flex : display:flex를 의미
p-4: padding:4를 의미
bi-facebook: facebook모양의 아이콘으로 나타냄

②결과

2) 학습내용 중 어려웠던 점

나만의 웹페이지 만들기 과제를 할때는 부트스트랩 사이트에 있는 코드를 이용해 내용만 수정해서 만들어서 각 코드가 무엇을 의미하는지 이해하기 어려웠다.

3) 해결방법

수업시간에 코드를 직접 작성하면서 웹페이지를 만드니까 각 코드를 이해가 되었다.

4) 학습소감

구조를 나눠서 차근차근 코드를 작성하니 웹페이지를 좀더 쉽게 이해하고 빠르게 작성할 수 있어서 재미있었다.