잡식[雜食]

부트스트랩 5 독학 2일차 유튜브 강의는 얼마나 도움이 될까?

쏘리다이 2022. 3. 17. 03:11

부트스트랩 5 한글 페이지가 있습니다.  참 다행이다 생각 했습니다.  영포자들은 다들 이해 하실 겁니다.

https://getbootstrap.kr/

 

Bootstrap

세계에서 가장 인기있는 HTML, CSS, JS 라이브러리.

getbootstrap.kr

근데 너무 많은 내용이라 다 보려면 시간이 좀 걸릴거 같습니다.  번역이 잘 되어 있기만을 바랄 뿐입니다.

단순 번역기로 만든 페이지라면 오히려 학습에 방해만 됩니다.

일단 어느 정도 예전 기억들을 되살린 후에 페이지를 보는 것이 좋을 거 같아 유튜브부터 보기로 했습니다.

다행이 1시간, 30분에 마스터 할 수 있다는 영상들이 보입니다.  생초보를 위한 영상은 아닐거라고 생각됩니다.

30분 요약 강좌부터 살펴 보겠습니다.

https://youtu.be/2znzBerWyWU

VSC(visual studio code)를 사용해서 무료 템플릿 사용법을 보여주면서 30분만에 요약 강좌를 진행한다고 합니다.

역시나 CDN을 이용한 기본 템플릿으로 hello world를 먼저 보여줍니다.

처음은 그리드 시스템에 대한 설명을 해 줍니다.  12개의 컬럼이 핵심입니다.  부트스트랩 3과 조금 달라진 부분이 col 클래스만 써도 알아서 12개의 컬럼이 배분되어 보여준다는 점입니다.

일일이 숫자를 넣지 않아도 되니 편해진 부분입니다.

구조는 컨테이너 > 로 > 컬럼 으로 구성이 됩니다.

개인적인 생각으로 이런 구조로 인해서 소스 코드가 더 복잡해 보입니다.  테이블로 코드를 짜던 시절 table > tr > td 쓰게 되면 소스가 복잡해서 div로 변화가 됬는데 결국 div를 쓰면서 이전의 테이블처럼 코드를 작성하고 있습니다.

이점이 제가 가장 싫어한는 부분인데 일단은 그냥 진행 하겠습니다.

xs < sm < md < lg < xl < xxl 로 디바이스별 그리드 설정이 가능합니다.  부트스트랩 3 보다 좀더 세밀하게 설정이 가능해 졌습니다.  결국엔 디바이스를 무시할 수 없는게 당연하기는 하지만 반응형을 단순히 브라우저 크기에 따라 보여지는 화면이 변한다고 생각 하실거 같아 걱정입니다.  한번의 디자인으로 모든 디바이스에서 보여주기 위한거지 눌였다 줄였다가 목적이 아니니 반응형이라는 단어에 너무 집착할 필요는 없다고 생각합니다.

다음은 글자 크기 변화를 설명하고 있습니다.  display라는 새로운 개념을 설명해 줍니다.  그러고 나서는 요런거 이런거가 있다고만 설명하고 넘어 갑니다.

카드라는 새로운 컴포넌트가 추가 되었다고 합니다.  많이 사용하게 될 듯 합니다. 

무료, 유료 템플릿을 받아 사용하라고 합니다.  30분이니 이해하라고 하는데 참 무책임 하다고 생각합니다.

다음은 1시간만에 끝낸다는 강의입니다.  크게 기대는 안 합니다.

https://youtu.be/5ETqQWvwXV4

그나마 30분 요약 보다는 나름 내용이 알찬 강의였습니다.

컴포넌트를 복사해서 보여주는 형식으로 설명은 좋았으나 실무에 어떤식으로 쓰여지는지는 다소 미흡하단 생각이 들었습니다.

시간상 넘어간 컴포넌트에 대한 설명이 없어서 아쉬웠습니다.

결국에 몸빵이 최고인거 같습니다.

예전의 그 힘든 과정을 또 거쳐야 한다는 생각에 벌써부터 머리가 아파 옵니다.

하지만 다른 방법은 없습니다.