1일 차: 부트스트랩 기본 사항

Feynman 기술은 어떤 과목을 가르치는 것이 당신을 더 잘하게 만든다고 말합니다. 이것이 제가 여기서 하려고 하는 것입니다. 이 게시물에서 실수를 본 경우 저를 수정할 수 있습니다.

부트스트랩으로 스타일링!

부트스트랩은 사람들이 CSS를 작성할 수 있도록 도와주는 CSS 프레임워크입니다.

시작하려면 필요한 스타일시트를 가져와서 마법을 부려야 합니다 ✨.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>

그런 다음 부트스트랩 반응형 디자인의 영향을 받고자 하는 모든 항목은 컨테이너 유체 클래스를 사용하여 div에 중첩되어야 합니다.

<div class="container-fluid">
 <!-- Put the affected elements here! -->
</div>

완료? 그러면 설정이 완료되었습니다!

요소 스타일 지정 방법

요소의 스타일을 지정하려면 요소에 특정 클래스를 지정합니다. 예를 들어 텍스트를 중앙에 배치하려면 다음을 수행하십시오.

<p class="text-center">LOL</p>

그게 다야! 추가 스타일시트 없이 클래스만 🎉! 이러한 클래스는 미리 결정되어 있으므로 인터넷에서 검색할 수 있습니다.

이러한 클래스는 다음과 같이 결합할 수 있습니다.

<button class="btn btn-default">
 I am a button
</button>

(곧 버튼에 대해 이야기하겠습니다 👀)

이미지가 화면 크기에 반응하도록 만드는 img-responsive와 같은 수많은 다른 클래스가 있습니다.

버튼

버튼은... 버튼으로 간주되려면 특정 클래스btn가 필요합니다. 기본 스타일도 있습니다(위의 예 참조).

그 외에 블록 요소처럼 작동하게 하는 btn-block도 있습니다.

<button class="btn btn-default btn-block">
 I'm blocked
</button>

그것들은 가로로 늘어나며 그 뒤에 있는 다른 요소는 버튼 아래로 이동합니다.

또한 기본 스타일 외에 다른 스타일도 있습니다. btn-primary , btn-info , btn-danger 등

Bootstrap의 색상 관리

버튼에는 기본, 정보, 위험 색상 등이 있습니다.
그러나 이것은 버튼에만 국한되지 않습니다. 텍스트에도 이 색상 사양과 링크가 있습니다.

IMO, 이것은 개발자가 계속 색상을 밀어서 유니콘 fugly 사이트를 형성하는 너무 무지개 같은 스타일의 문제를 피합니다. 다음에 사이트를 구축할 때 확실히 도움이 될 것입니다.

그리드 시스템 🔥

기본적으로 Bootstrap은 컨테이너 내부에 보이지 않는 그리드를 적용합니다. 유연한 행이 있는 12열 그리드입니다.

같은 행에 요소를 배치하는 것은 다음과 같습니다.

<div class="row">
  <!-- 1st element -->
  <!-- 2nd element -->
</div>

열이 있는 요소의 너비를 지정하려면 다음 구문을 사용합니다.

<div class="col-x-y">
  !<-- Element to be resized -->
</div>

여기서 x는 화면 크기(md, xs 등)이고 y는 열 수입니다.

후기

오늘은 여기까지입니다. 실제 배우는 것보다 이 글을 쓰는 게 더 힘든 것 같았어요🤣. 아무튼 내일 봐요!

Github에서 저를 팔로우하세요!
또한 !