[Challenge / day-28] Bootstrap 레이아웃

오늘의 공부범위 : 49강 내용(Part4. ch1. 4강)

 

목차

1. 그리드시스템

2. bootstrap 레이아웃 구현

 

 

#1. 그리드 시스템

 

(1) 컬럼그리드

부트스트랩에서는 교육과정에서 배운 것과 같이 12칼럼(웹페이지 기준)을 사용하여 컬럼그리드를 적용한다. 컬럼그리드를 적용할 때 상하 그리드는 어떻게 적용해야하는지 궁금해서 찾아보았는데... 저번에 가볍게 공부한 것보다 조금 더 제대로 공부할 수 있었다. 개인적으로 도움이 된 순서로 링크를 남겨본다. 제대로 모르고 쓰게되면 개념을 모르는 상태에서 감으로 구성하는 것보다 못한 결과물이 나올 수 있으므로... 적용하려면 최소한의 사용방법과 개념은 제대로 숙지하고 사용해야겠다.

 

https://beautifulcss.com/archives/1368

Beautiful CSS » 컬럼 그리드 : 기본

http://designbase.co.kr/webdesign-4/

#4 웹디자인 그리드 시스템의 모든 것?! - 웹디자인 입문 강좌

https://imweb.me/faq?mode=view&category=28&category2=31&idx=189

아임웹 가이드

 

(2) 구성요소

 

1)컨테이너

  컨테이너(Container)는 웹 페이지에서 콘텐츠를 감싸는 요소 중 하나이다. Bootstrap에서 그리드 시스템을 사용할 때는 컨테이너가 필수적이다. 컨테이너는 콘텐츠를 중앙에 정렬하고 가로로 채워서 레이아웃을 일관되게 유지하는 데 도움이 된다.

 이론상으로는 컨테이너를 중첩해서 사용할 수 있지만, 실제로는 대부분의 레이아웃에서 중첩된 컨테이너가 필요하지 않다. 대신 Row나 Col과 같은 다른 그리드 요소를 중첩해서 사용하면 대부분의 문제를 해결할 수 있다. 이렇게하면 불필요한 마크업을 줄이고 코드를 더 간결하게 유지하여 부트스트랩 본래 사용목적을 달성할 수 있다.

 

2)Row = 행

  Row는 그리드 시스템을 구현하는 데 사용되는 요소 중 하나로, 한 행 안에 몇 개의 열(Column)이 배치될 수 있는지를 결정한다. 즉, Row는 Col을 감싸는 요소이다. Row는 중첩될 수 있으며, 이를 통해 복잡한 레이아웃을 구현할 수 있다. 또한 Bootstrap 5에서는 Row에 대한 gap 속성이 추가되어, 행 간에 일정한 간격을 설정할 수 있다. 이를 통해 레이아웃이 보다 균일하고 일관된 모습으로 나타날 수 있다.

 

3)Col = 열

Col은 그리드 시스템을 구현하는 데 가장 중요한 요소 중 하나이다. 모든 콘텐츠는 Col 요소 내부에 들어가야 하며, span 속성을 사용하여 열의 너비를 지정할 수 있다. 또한 offset 속성을 사용하여 열의 왼쪽 여백을 지정할 수도 있다.

 같은 Row 내에서 Col이 각기 다른 정렬을 가질 때는 align-self-* 속성을 사용하여 개별적으로 정렬할 수 있는데 다음과 같은 선택지가 있다.

• align-self-start
• align-self-center
• align-self-end

 

또한 Row 내의 Col들의 수직 정렬은 align-items-* 속성을 사용하여 설정할 수 있고,

• align-items-start
• align-items-center
• align-items-end

 

수평 정렬은 justify-content-* 속성을 사용하여 설정할 수 있다. justify-content-* 속성은 여러 가지 값을 가질 수 있으며, 이를 통해 Col 간의 간격과 분포를 조정할 수 있다.

• justify-content-start
• justify-content-center
• justify-content-end
• justify-content-around
• justify-content-between
• justify-content-evenly

 

#2 Bootstrap layout 구현

 

Bootstrap 설치방법을 아마 저번에.. 디자인 시간에 설명해주셨던 것 같은데 잘 기억이 나지 않아 다음과 같은 명령어로 설치해봤는데 잘 설치가 되었다..!!

이번에는 따라서 컴포넌트를 만드는 실습은 아니었고, 따라하기 전에 앞서 배운 개념들을 어떻게 코드로 바로 구현할 수 있는지 내장된 것들을 살펴보는 시간이었다. 위에 말한 개념들을 구현해보는거라 다음과 같이 구현 테스트만 해보고 다음 실습에 이어서 해본다고 하셨다.

 

코드를 똑같이 따라 쳐서 노션에 기록해두었다. 

 

블로그 작성한 모습.

 

관련링크

패스트캠퍼스 : http://bit.ly/3Y34pE0

패스트캠퍼스 [직장인 실무교육]

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

#패스트캠퍼스 #패캠챌린지 #수강료0원챌린지 #환급챌린지 #직장인인강 #직장인자기계발 #패캠인강후기 #패스트캠퍼스후기 #오공완 #사이드프로젝트10개기술스택으로구현하는풀스택서버리스프로젝트withReact