📆 2022-5-27
-학습내용-
Bootstrap
Bootstrap?
프론트엔드 프레임워크로 웹페이지를 쉽게 디자인&개발 할 수 있게 도와주는 라이브러리.
각종 레이아웃, 버튼, 입력창 등의 디자인과 기능을 CSS와 JavaScript로 만들어 놓은 것이며, 초창기에는 웹 디자이너나 개발자 사이에서 웹 디자인의 혁명이라고 불릴 정도로 폭발적인 반응을 얻었던 프레임워크이다.
why?, how?
코딩의 양을 줄여준다. 즉, 웹페이지 제작 시 가장 많이 사용되는 CSS, JS 파일을 미리 만들어 놓고 다운로드 또는 CDN 방식으로 링크해서 사용하기만 하면된다
<!-- button.html 부트스트랩 사용 -->
<html>
<head>
<link rel="stylesheet" href="<https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css>">
</head>
<body>
<button type="button" class="btn btn-info">BUTTON</button>
</body>
</html>링크하나와 클래스 하나만으로 버튼 관련 css가 모두 사전에 지정되어 있다.
🧡장점:
• 웹 페이지에서 많이 쓰이는 요소를 거의 전부 내장하고 있다.
•C용 디자인뿐 아니라 태블릿이나 스마트폰 같은 모바일용 디자인을 반응형으로 한번에 지원한다.
거기다 화면 해상도 크기에 따라 자동으로 정렬되는 그리드 시스템을 채용하고 있기 때문에 하나의 웹 페이지로 데스크탑, 태블릿, 스마트폰 모든 기기에서 무리없이 보게 만들 수 있다. 즉 반응형 웹을 지원한다는 의미이다.
💔단점:
•사전 정의된 디자인이 있다보니 비슷한 디자인의 페이지가 양산될 수 있다.
•HTML5에 맞춰져 있다 보니 구형 브라우저 지원이 미흡하다
부트스트랩 사용방법
1. CDN 방식으로 링크
2. 다운로드
어떤 방법으로 사용해도 무방하지만, 🍄 CDN 방식은 인터넷에 연결되어 있어야하며, 다운로드 방법은 인터넷 연결과 상관이 없다.
문제사항
디자인의 획일화
해결방안
오픈소스이므로 사용자 임의로 자유롭게 변경
학습소감
신세계다...
ohmanbanja