2. Bootstrap 으로 내비게이션 바 수정, 레이아웃 적용, grid로 구성 관리

● 내비게이션 바 수정

Conponents에서 내비게이션 바 고르기

https://getbootstrap.com/docs/5.1/components/navbar/

Navbar

 

Bootstrap 웹 사이트의 Doc 탭을 클릭한 후 Components 를 클릭한 후 Navbar 를 선택한다. 

 

  copy 버튼을 누른 후 이전에 미리 만들어 둔 about_me.html 파일을 수정한다. 

 

  그 후 body 태그 안에 붙여넣기 한다. 

 

  빨간색 부분의 네비게이션 부분이 보기 좋게 바뀌어 있다. 뿐만 아니라 모바일 환경에서 크기에 맞게 알아서 알맞게 화면이 구성된다. 

 

 

 

● container로 레이아웃 적용

 

 

  <div class="container"> </div> 를 입력하면 왼쪽에 몰려있던 페이지가 보기좋게 여백이 만들어 진다. 

 

 

 

● grid로 웹 페이지 구성 관리하기 

 

  grid 기능을 이용하면 페이지를 세로로 12칸으로 나누어 관리할 수 있게되어 컴퓨터로, 혹은 핸드폰, 10.2인치 아이패드로 웹페이지를 보았을때 각각의 화면에 알맞게 조정되어 나타날 수 있게된다. 

 

  즉 디바이스가 무엇이냐에 따라 웹페이지의 크기가 자동적으로 재조정되는 반응형 웹(Responsive Web)이라고 볼 수 있다. 

 

 

  container로 레이아웃을 적용한 코드 바로 아래에 <div class="row">, <div class="col-9"> 을 입력하여 9칸 짜리 열을 만든다. 이는 텍스트 위주의 공간을 확보하기 위함이다.

 

 

  사진 부분은 <div class="col-3"> 입력으로 3칸 짜리 열을 만들면 사진이 옮겨지게 된다. 이는 사진만의 공간을 확보하기 위함이다. 그리고 사진 사이즈 조절을 위해 class="image-fluid w-100"을 입력한다. 이로써 사진의 높이가 고정되지 않고 디바이스에 따라 3칸의 열에 맞춰 비율이 달라진다. 

 

 

 

 

●  화면 크기에 따라 구성도 바뀌기 만들기

 

  먼저 앞서 작성한 첫번째 행에 이어서 두 번째 행을 만들고 3개의 길이가 같은 열을 만든다. 따로 열의 크기를 지정하지 않는다면 12칸의 크기를 동일하게 나눠 받아서 각각 4칸의 길이를 차지한다. 

 

 

  <div> 클래스에 bg-info, bg-secondary, bg-warning 을 입력해 배경색을 입혀 열의 크기를 확인하기 쉽게한다. sm은 small 을 뜻하며 bg는 back ground 의 약자이고 info. secondary, warn은 색깔 이름이다. 

 

  부트스트랩으로 글자나 배경색을 쉽게 입히고 싶다면 부트스트랩 공식 홈페이지의 [Documentation → Utility → Color]순으로 들어가면 여러가지 색깔들의 예시가 있으므로 맘에드는 색깔을 고르면 된다. 

 

  위에서 col-sm 의 sm 은 화면 크기가 small 일때 적용되는 기준으로 medium, large등 으로 나뉘어져 있으며 부트스트랩 공식 홈페이지에 자세하게 각 사이즈별 수치가 자세하게 나타나있다. 

 

  이렇게 각 사이즈 마다 비율을 지정할 수도 있다.

 

 

큰 사이즈의 화면으로 출력시 (6:3:3)

작은 사이즈의 화면으로 출력시 (4:4:4)

●  열마다 이미지와 동영상 추가하기 

  html 로 이미지, 동영상을 삽입하는 방법과 bootstrap로 삽입하는 방법이 다른데 여기서는 bootstrap으로 삽입하는 방식을 사용하였다. 

 

● Spacing 으로 간격 벌리기 

 

  bootstrap의 spacing 기능 간격을 조절하는 기능으로 경계선 기준 바깥쪽으로 간격을 두는 마진(margin)과 경계선 안쪽으로 간격을 두는 패딩(padding) 기능이 있다.

 

    mt + 숫자는 위에만 마진을, mb + 숫자는 아래만 마진을, my + 숫자는 위아래 마진을 준다. 

 

  여기서 내비게이션바에 Log In 버튼을 추가하고 그 버튼을 오른쪽으로 정렬해 본다. 일단 ml-auto 는 왼쪽 마진을, mr-auto는 오른쪽으로 마진을 준다.