IT world

[FrontEnd] 24.02.19 Bootstrap 과 Tailwind 본문

모두의 연구소(오름캠프)/AI 모델 활용 백엔드 개발 과정

[FrontEnd] 24.02.19 Bootstrap 과 Tailwind

엄킹 2024. 2. 19. 16:43

한 주의 chatGPT를 활용한 개인 프로젝트 기간이 끝나고 Django 강의를 시작하기 앞서 웹 개발을 더욱 쉽고 빠르게 할 수 있는 두가지 방법을 배웠다.

 

1. 부트스트랩(Bootstrap)

부트스트랩이란 프론트엔드 개발을 빠르고 쉽게 할 수 있는 프레임 워크로 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 JavaScript로 만들어 놓은 것이다. 사용자의 시점에 맞춰 최적화 되어 화면을 구성하고 반응형 사이트를 구축하기에 최적화 되어있다.

 

버튼, 이미지, 목록 뿐 아니라 메뉴바, 알림 메시지 등 웹 페이지에서 많이 쓰이는 요소를 전부 내장하고 있기 때문에 개발자 입맛에 따라 재사용 할 수 있다. 따라서 대부분 모든 웹페이지를 미리 지정된 CSS와 JavaScript의 활용으로 빠르게 만들 수 있는 것이다.

 

부트스트랩 사용 시 아래 코드를 호출하여 사용한다.

 // 헤더에 포함
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

 // 바디에 포함
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

 

예시 코드를 통해 해당 결과를 출력했다. 총 12개의 컬럼을 3칸의 공간을 하나로 4개의 컬럼을 출력했다.

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .col-md-3 {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-3">hello</div>
            <div class="col-md-3">hello</div>
            <div class="col-md-3">hello</div>
            <div class="col-md-3">hello</div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

2. Tailwind

Tailwind란 많은 유틸리티 클래스로 이루어진 CSS 프레임워크이다. 추가적인 CSS 코드 작성 없이 단순히 HTML 요소의 class 속성에 설정해주는 것만으로도 스타일링이 가능하다. 말 그대로 CSS문서로 가지 않고 오직 HTML 문서내에서 웹 사이트 구축이 가능하게 만드는 것이고, 쉽고 빠르게 웹 사이트 구축이 가능하다. 

 

Tailwind는 오직 HTML 문서만 보면 되고 클래스 이름을 고민할 필요가 없고, 협업에 있어서도 해당 부분은 문제가 없으며 유지보수에 용이하다는 점에서 만족도가 높다.

 

Tailwind 사용 시 아래 코드를 호출하여 사용한다.

    <script src="https://cdn.tailwindcss.com"></script>

 

Tailwind를 사용하여 간단한 블로그 예시를 만들어 봤다. 해당 예시를 수정해서 더 정교하고 직관적인 사이트를 만들어볼 예정이다.

<!doctype html> 
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
    <div class="m-6 flex justify-between items-center">
        <div class="text-2xl font-bold">JEJU CODING</div>
        <div class="flex gap-8">
            <div>About</div>
            <div>Blog</div>
            <div>Contact</div>
        </div>
    </div>
    <div class="m-20 grid grid-cols-3 gap-4">        
        <div class="space-y-4"> 
            <div>
                <img class="rounded-xl" src="a.jpg" alt="">
            </div>
            <div class="mt-3 bg-blue-300 rounded p-1.5 inline-block font-bold text-white">category</div>
            <div class="font-bold text-xl">title</div>
            <div>description</div>
        </div>

        <div class="space-y-4"> 
            <div>
                <img class="rounded-xl" src="a.jpg" alt="">
            </div>
            <div class="mt-3 bg-blue-300 rounded p-1.5 inline-block font-bold text-white">category</div>
            <div class="font-bold text-xl">title</div>
            <div>description</div>
        </div>
        <!-- 하단에 원하는 만큼 추가.. -->
    </div>
</body>
</html>

[결과]

저작자표시 비영리 변경금지

'모두의 연구소(오름캠프) > AI 모델 활용 백엔드 개발 과정' 카테고리의 다른 글

[Django] 24.02.21 Django 실습  (0) 2024.02.21
[Django] 24.02.20 Django에 대해서  (0) 2024.02.20
[JavaScript] 24.02.05 JavaScript에 대해서(2)  (0) 2024.02.05
[JavaScript] 24.02.02 JavaScript에 대해서  (0) 2024.02.02
[CSS] 24.01.31 Position, Flex  (0) 2024.01.31
'모두의 연구소(오름캠프)/AI 모델 활용 백엔드 개발 과정' Related Articles more
Comments