[230323] 코딩 컨벤션 | Bootstrap

윤지수·2023년 3월 23일
0
post-thumbnail

📌 코딩 컨벤션

💡 온보딩 과정에서 회사 컨벤션 숙지하고 코드를 짜야 한다

💡 유지보수에 아주 용이한 컨벤션

<!-- header -->
<!-- //header -->

💡 TODO : 깃헙으로 협업할 때 사용하면 편리하다
(VSCODE TODO 하이라이트 익스텐션도 있음)

{# TODO(john.doe): revisit centering #}
<!-- TODO: remove optional tags -->

구글 코딩 컨벤션
https://github.com/google/styleguide

🅱 Bootstrap

https://github.com/yoonmallang22/Bootstrap

💡 내가 개발하는 것 아님! 템플릿을 구매해서(보통 그리드만) 수정하는 것!!
한땀한땀 코딩하려면 Tailwind 사용해야 한다

부트스트랩(웹 프레임워크)은 큰 모니터 화면으로 보던지 휴대폰처럼 작은 화면으로 보던지 상관 없이 사용자의 시점에 맞춰 최적화 되어 화면을 구성한다. 부트스트랩은 반응형 사이트를 구축하기에 최적화되어 있다.

💡 Grid는 외우고 있자! 나머지는 찾아보면서 사용하면 된다

<div class="container-fluid">
	<div class="row">
		<div class="col-md-4 col-sm-12">hello</div>
		<div class="col-md-4 col-sm-6">hello</div>
		<div class="col-md-4 col-sm-6">hello</div>
	</div>
</div>

12개로 나누어져 있다

양옆 여백 없애주기
class="container-fluid"

breakpoint 설정하기
sm (≥576px)
md (≥768px)

빈 공간 만들어주기
class="offset-md-3"

💡 모달은 코드 가장 아래 적어준다
💡 모달 아래 HTML은 모두 살아있기 때문에 경고는 모달로 보여주지 않는다(완전 차단해버려야 한다)


부트스트랩 완전 신세계였다..✨ 재밌음!!
반응형이 엄청나게 편리하고.. 다 만들어준다.. ㅋㅋㅋ👍
부트스트랩은 잘하는 것보다는 코드를 얼마나 빠르게 짤 수 있는지를 알 수 있는 스택이라고 하는데 페이지를 직접 만들어보면서 느낄 수 있을 것 같다
심심할 때(심심할 틈이 없지만ㅠ) 페이지 만들어봐야겠다ㅎㅎ

0개의 댓글