33. html css, bootstrap5로 만들어 보고 비교하기

왼쪽 HTML + CSS, 오른쪽 bootstrap5

책으로 공부했던 실습 예제를 부트스트랩을 이용해 최대한 비슷하게 웹페이지를 만들어봤다.

글씨 크기나 마진 같은 걸 클래스 속성값으로 지정해 주니 원하는 크기로 설정하기 쉽지 않았지만

최대한 부트스크랩 프레임워크를 사용할 생각으로 css는 자제했다.

 

html+css, bootstrap5 작성 후기

기존 html + css로 작성한 파일은 총 296줄이 나왔고

bootstrap5 경우 109줄로 비슷한 결과물을 만들 수 있었다.

특히 bootstrap5에서 편했던 점이 row, col 형태의 그리드 시스템이었다.

클래스 속성값만으로 간단하게 박스를 정렬하는 반응형 웹을 만들 수 있었다.

 

html+css, bootstrap5에 대한 내 생각

지금은 처음이라 오래 걸렸지만 더 익숙해진다면 제작하는 시간도 엄청나게 단축될 것 같았다.

과연 더 빠르고, 안정성 높은 프레임워크가 있는데 굳이 돌아가는 건 좋은 생각이 아니라 본다.

더 좋은 게 있으면 공부해서 내 것으로 만드는 게 중요하다고 생각된다.

 

앞으로 계획

bootstrap5는 공부 자료를 정리해서 카테고리를 따로 만들어야 할 것 같다.

나중에 찾아보기도 좋고, 다른 사람들도 쉽게 배웠으면 좋겠다