[CSS] 부트스트랩 (Bootstrap 예쁜 CSS 가져오기)

[CSS] 부트스트랩 (Bootstrap 예쁜 CSS 가져오기)

부트스트랩이란 예쁜 CSS를 미리 모아둔 사이이다. 여기서 완성된 CSS를 가져다 쓸 수 있어 구현이 더욱 편리하다.

아래 링크 첨부..

https://getbootstrap.com/docs/5.1/getting-started/introduction/

사이트에 들어가서 Components 탭에 들어가보면 요로케 버튼 디자인부터 InputBox디자인까지 다양하게 있다.

사용방법은 간단하다.

부트스트랩 예쁜 CSS 가져오기

해드부분에 위와 같은 링크들을 입력해놓고 부트스트랩 사이트에서 원하는 스타일을 복사해서 사용하면 된다.

예를 들어 버튼을 만들어보자, 사이트에 접속하여 원하는 스타일의 버튼에 해당하는 코드를 복사한다.

코드블럭의 우측상단에 Copy를 누르면 한꺼번에 복사가되고 특정 버튼만 사용하고 싶으면 해당하는 코드만 드래그하여 복사하면 된다. 우선 전체복사하여 예제를 살펴보자

완성한 코드는 다음과 같다. 코드를 복사하여 바디부분에 넣은 뒤 사용 목적에 맞게 버튼의 이름만 변경하여 사용하면 된다.

부트스트랩 예쁜 CSS 가져오기 1번 버튼 2번 버튼 3번 버튼 4번 버튼 5번 버튼 6번 버튼 7번 버튼 8번 버튼

이렇게 버튼 모양이 그대로 적용되는 것을 볼 수 있다. 버튼의 크기나 기타 다른것을 조금 변경하고 싶다면 해당 버튼에 새 속성을 주면 된다.

부트스트랩 예쁜 CSS 가져오기 .btn1 { font-size: 50px; } 변경한 버튼

btn1이라는 새 속성을 부여하여 버튼의 사이즈를 변경했다.

이런 식으로 이미 만들어진 예쁜 CSS들을 가져와 쉽게 디자인을 할 수 있다.

from http://diddl.tistory.com/7 by ccl(A) rewrite - 2021-10-03 20:01:56