부트스트랩-2일차

학습한 내용

오늘은 지난 주에 했던 부트스트랩을 활용하여 웹 페이지를 만들어 보았다.
지난 주와 다르게 단순히 예시를 보고 복사하는 것이 아닌, 각 class의 의미를 파악하고 활용해보는 시간을 가졌다.
실습 1.
먼저 헤더 영역이다.

class에서 bg-primary는 배경 색, 하안색 글씨, 중앙 정렬, p(패딩)을 준 모습이다.

다음으로 nav영역
nav영역은 따로 navbar라는 class와 함께 ul과 li, a에도 nav관련 class가 들어간다.
그리고 a태그 안 active클래스는 활성화, disabled는 비활성화를 의미한다.
mt-5는 margin-top을 의미한다.
p태그에서 클래스를 줘서 폰트사이즈 등을 변경할 수 있다.

다음으로 section영역 안 aside 첫 번째 영역이다.
aside를 두 영역으로 나누어 설정한다.
기본 grid는 12칸으로 각 aside영역을 4, 8칸으로 나누어 설정한다.
d-sm-none class는 sm사이즈 이상에서는 안 보이도록 설정하는 클래스이다.

나머지 aside영역도 동일하게 설정해 준다.

footer영역까지 설정한 후 웹 페이지를 보면 다음과 같다.

화면 사이즈가 줄어들게 되면 다음처럼 바뀌고, 설정한 hr도 나타는 것을 확인할 수 있다.

실습2.
다른 형태의 사이트를 만들어 본다.
먼저 헤더영역안 nav영역

fixed-top class를 사용하여 상단에 고정시켜 준다.
그리고 navbar-toggler를 활용하여 화면이 줄어들었을 때 햄버거 메뉴가 생겨나도록 만들어준다.

위 사진 처럼 display속성도 class로 설정할 수 있다.
첫 번째 section

두 번재 section

세 번째 section

네 번째 section

d-none d-sm-block 는 sm사이즈에서는 안 보이게 설정한 class인데, 이렇게 어느 사이즈에서 보이고 안 보이게 설정할 때는 같이 사용한다고 한다.

다섯 번째 section

a 태그를 버튼으로 활용할 시, 기능은 버튼 역할이다 라는 것을 인식시켜주기 위해 role="button" 추가하기.

마지막으로 footer영역을 작성

완성된 페이지 모습

sm 사이즈에서 section 4,5는 안 보이도록 설정한 것을 확인해 본다.

section3에서 바로 footer로 넘어가는 것을 확인 가능하다.

학습한 내용 중 어려웠던 점 또는 해결못한 것들

해결방법 작성

학습 소감

부트스트랩을 활용하여 웹 페이지를 만들어 보았는데, 지난주 까지만 해도 페이지 하나만드는데 시간이 엄청 오래 걸렸다. 하지만, 부트스트랩을 사용하니 더욱 간편하고, 빠르게 만들 수 있었다. 아직까지는 자주쓰는 class들만 알고 있어서 기능이 한정적이지만 더 알게 된다면 다양한 페이지를 만들 수 있을 것 같다. 그리고 지금까지는 css를 따로 만들지 않고 90%이상을 부트스트랩을 사용하였기에, 나중에 여러 css가 들어오고 한다면 머리가 더 아파질 것 같다.