day06. Bootstrap 사용하기🤔

CSS Frameworks

• 반응형이며 모바일 웹 프로젝트 개발을 위한 프레이워크
• 미리 정의된 디자인과 HTML, CSS, JS를 제공
• 프론트앤드 웹페이지를 빠르게 제작 가능
• 일부기능만 사용하더라도 전체 라이브러리를 모두 로드해야함
• W3.CSS, bootstrap 등

부트스트랩(bootstrap)

• 현재 CSS 프레임워크 중 점유율이 가장 높음
• 이미 만들어 놓은 스타일을 제공받음
• 유무료 HTML 템플릿을 제공하여 데이터를 넣어 웹페이지 제작 가능
• class attribute에 원하는 스타일 지정

부트스트랩 시작하기

부트스트랩 CDN(Content Delivery Network)에 포함하면 부트스트랩을 직접 다운로드하고 호스팅하지 않아도 사용 가능하다.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>

<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>

부트스트랩 레이아웃에 데이터 추가하기

    <script>
        const dataArr = [
            {"panHeading": "BLACK FRIDAY DEA 1", "panImage":"./images/1.jpg", "panFooter":"Buy 50 mobiles and get a gift car"},
            {"panHeading": "BLACK FRIDAY DEA 2", "panImage":"./images/2.jpg", "panFooter":"Buy 50 mobiles and get a gift car"},
            {"panHeading": "BLACK FRIDAY DEA 3", "panImage":"./images/3.jpg", "panFooter":"Buy 50 mobiles and get a gift car"},
            {"panHeading": "BLACK FRIDAY DEA 4", "panImage":"./images/4.jpg", "panFooter":"Buy 50 mobiles and get a gift car"},
            {"panHeading": "BLACK FRIDAY DEA 5", "panImage":"./images/5.jpg", "panFooter":"Buy 50 mobiles and get a gift car"},
            {"panHeading": "BLACK FRIDAY DEA 6", "panImage":"./images/1.jpg", "panFooter":"Buy 50 mobiles and get a gift car"}
        ];
        const rowTmp = `
            <div class="row">
                <%
                dataArr.forEach(function(item, idx) {
                console.log(idx);
                %>
                <div class="col-sm-4">
                    <div class="panel panel-primary">
                        <div class="panel-heading"><%=item.panHeading %></div>
                        <div class="panel-body"><img src=<%=item.panImage %> class="img-responsive" style="width:100%" alt="Image"></div>
                        <div class="panel-footer"><%=item.panFooter %></div>
                    </div>
                </div>
            <%  
                }); // end of forEach %>
            </div>
            `;
        var compiled = _.template(rowTmp);
        var html = compiled({dataArr:dataArr});
        console.log(html);   
        document.getElementById("middle").innerHTML = html;
    </script>

부트스트랩 레이아웃 템플릿을 사용하여 반복되는 html 부분을 스크립트로 바꾸고 데이터를 수정해보았다.

부트스트랩으로 개인 웹사이트 만들기

부트스트랩 템플릿에서 텍스트, 데이터 등을 수정하여 개인 웹사이트를 쉽게 만들 수 있다.
https://webkit2023.web.app/

후기

전에 여행 일정 동시 계획 웹 사이트 프로젝트를 한 경험이 있다. 이 때 프론트앤드를 담당하여 개발하였는데, 왜 부트스트랩을 사용하지않았을까?😓 디자인적 요소를 많이 고려하지 않고 순수 CSS을 사용하여 구현하였다. 물론 그 덕에 웹퍼블리싱과 관련된 공부는 제대로 되었다. 그렇지만 부트스트랩을 사용했다면 더욱 더 완성도 있는 웹사이트를 만들 수 있었을 것이다. 당시에는 기능 구현에 바빠 디자인적 요소는 신경을 많이 못 썼는데 부트스트랩을 익혔다면 좋았을 것 같다.🤔🥶