2021-04-21(Wed)

항목	내용
학습 날짜	2021-04-21(수)
학습 시간	09:00~23:00
학습 범위 및 주제	부트스트랩
학습 목표	부트스트랩의 개념을 숙지한다.
동료 학습 방법	-

상세 학습 내용

API 서버는 어떻게 만들지 각이 잘 나오지만, CSS를 적용한 페이지를 만드는데 두려움이 있다. Backbone.js도 이벤트를 처리하고 뷰를 호출하는 javascript 코드를 썼을 뿐, 솔직히 Html과 CSS는 프론트엔드 개발자를 지망하는 동료들에게 의존해왔다.

이 참에 씨맨틱UI를 부트스트랩을 확인하자.

부트스트랩

부트스트랩은 HTML, CSS, Javascript 세트이다. 다양한 UI 컴포넌트를 제공하기 때문에 빠르고, 안정적으로 화면을 구성할 수 있도록 도와준다. 여기서 안정적이라는 말은 무엇일까? 다양한 디바이스의 뷰 포트에 대응하여 반응형 웹 화면이 구성되도록 도와주는 것이다.

12 Grid

한 열을 12칸의 컬럼으로 나눠서 관리한다. 그리고 화면 크기별로 요소가 차지하는 그리드 컬럼을 따로 지정해줄 수 있다.

가령 아래 코드는 화면이 992px 이상일 땐 컬럼 3칸, 768px 이상일 땐 컬럼 4칸, 576px 이상일 땐 6칸 차지하도록 설정한 것이다.

<div class="col-lg-3 col-md-4 col-sm-6" style="background-color: red">
A
</div>

https://getbootstrap.com/docs/5.0/layout/containers/

https://www.youtube.com/watch?v=5ETqQWvwXV4

학습 내용에 대한 개인적인 총평

월, 화요일 강행군으로 체력이 방전된지라 오늘은 하루종일 푹 쉬었다. 쉬면서 면접 기회가 생긴 업체들에 대해 서치를 해보며 도메인과 기술에 대해 고민할 수 있었다.

다음 학습 계획

• 중고나라 면접