달력

52024  이전 다음

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

부트스트랩?

karma( 업 )/Web 2019. 10. 21. 14:01

'웹알못'으로 웹은 생각보다 배울게 많다는 것을 알았다. 하긴 용어부터 낯서니 할말 다했지....

Front-end / back-end 는 물론이고 리액트, 디장고, 부트스트랩 등등 모르는 용어가 너무 많다.

새로운 분야로 들어갈 때 용어정리만 해도 반은 먹고 들어가고 어디가서 전문가인척 대화도 할 수 있다고 생각한다. ㅋ~

 

back-end는 python의 Flask와 DJango로 퉁치고 있는데 front-end가 뭔지 살펴보다 부트스크랩을 사용해 봤다.

front-end는 결국 HTML / CSS / Java Script 등으로 이루어 져 있다고 생각했는데 부트스트랩이 뭐지? 프레임워크인가?

 

부트스트랩는 한마디로 '웹사이트 개발시의 프레임워크' 로 정의할 수 있다. 그렇다 순수하게 front-end단의 웹사이트/웹페이지 개발에 필요한 프레임워크가 부트스트랩이다. 즉 부트스트랩은 HTML/CSS/Java Sctrip의 개발을 편하고 쉽게 할 수 있도록 라이브러리를 모아놓은 프레임워크이다. 

 

그럼 어떻게 사용하나? 부트스트랩은 웹사이트 개발시에 가장 많이 사용하는 HTML/CSS/JS를 미리 만들어 놓았고 사용자는 다운로드 또는 CDN 방식으로 링크해서 그냥 사용하면 된다.

 

예를 들어 버튼을 하나 만들고 CSS를 적용한다고 생각해보자. 일일이 개발자가 HTML의 모든 태그, class, id에 CSS를 만들어 주면 상당한 코딩을 해야 할 것이다. ( 물론 나같은 사람은 코딩양보다는 디자인이 쾅이라 부트스트랩을 사용할 것이다. )

 

부트스트랩을 사용한다면 아래와 같이 링크만 걸어주면 된다.

 

코드에서 보듯이 부트스트랩 CSS를 링크로 걸어주고 CSS를 적용할 클스만 추가하면 된다. 버튼의 class 에 부트스트랩을 적용해 주었다. 이제 버튼은 부트스트랩의 디자인이 적용되어 이쁘게 표현될 것이다.

 

사용자는  어떤 클래스인지 확인 후 해당 태그에 클래스만 추가하면 되는 것이다. 

 

아~~~ 부트스트랩까지 공부할 줄이야 ㅋ~~~~

 

 

 

Posted by 생짜
|