초코의 풀스택 도전기 11: CSS 프레임워크로 웹 개발 효율성 높이기

스토리텔링 2024. 10. 6. 10:42

도입

CSS 애니메이션을 배운 초코는 웹페이지를 꾸미는 데 드는 시간이 생각보다 너무 길다는 것을 깨달았다. 스타일링 자체는 흥미롭지만, 매번 직접 코드를 작성하는 일이 꽤나 번거로웠다.

그래서 초코는 멘토를 찾아갔다. "멘토님, CSS로 직접 스타일을 작성하는 건 재밌긴 한데, 시간이 너무 오래 걸려요. 더 빠르고 효율적으로 웹페이지를 꾸밀 수 있는 방법이 없을까요?"

멘토는 초코의 고민을 듣고 고개를 끄덕였다. "그럴 때 사용할 수 있는 도구가 바로 CSS 프레임워크야. 프레임워크를 사용하면 일일이 스타일을 작성할 필요 없이 미리 정의된 스타일을 적용할 수 있어. 그중에서도 'Bootstrap'이라는 프레임워크가 많이 쓰이니 한번 배워보는 게 좋겠어."

1. CSS 프레임워크란?

멘토는 CSS 프레임워크의 기본 개념을 설명했다. "CSS 프레임워크는 미리 작성된 CSS 스타일과 컴포넌트들을 제공해서, 개발자가 직접 코드를 작성할 필요 없이 빠르게 웹페이지를 만들 수 있는 도구야. 대표적으로 Bootstrap 같은 프레임워크가 있어. Bootstrap은 그리드 시스템, 버튼, 카드 같은 다양한 요소들을 손쉽게 만들 수 있도록 도와주지."

초코는 프레임워크를 사용하면 많은 시간을 절약할 수 있겠다는 생각에 기대감을 보였다. "그럼 미리 만들어진 스타일을 가져다 쓰면 되는 거군요!"

멘토는 웃으며 말했다. "맞아. 이제 Bootstrap을 사용해볼 준비가 됐으니, 바로 시작해보자."

2. Bootstrap 소개와 사용 방법

멘토는 Bootstrap의 개요와 설치 방법을 설명하며 계속해서 이야기를 이어갔다. "Bootstrap은 전 세계적으로 가장 널리 사용되는 CSS 프레임워크 중 하나야. 설치도 아주 간단하고, 다양한 스타일과 컴포넌트를 미리 제공해주니 정말 유용하지."

이어서 멘토는 초코에게 Bootstrap을 어떻게 설치하는지 설명했다. "Bootstrap을 사용하려면, HTML 파일의 <head> 부분에 아래 코드를 추가하면 돼."

<head>
  <!-- Bootstrap CSS 링크 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

멘토는 코드 설명을 마치며 덧붙였다. "이렇게 하면 Bootstrap에서 제공하는 스타일을 바로 사용할 수 있어. 이제 본격적으로 Bootstrap을 이용해서 웹페이지를 만들어보자."

3. Bootstrap으로 간단한 웹페이지 만들기

멘토는 Bootstrap의 핵심 기능 중 하나인 그리드 시스템을 사용해 레이아웃을 만드는 방법을 시연했다. "Bootstrap에는 그리드 시스템이라는 것이 있어. 12칸으로 나뉜 레이아웃을 쉽게 설정할 수 있지. 각 요소를 이 그리드 안에 배치하면 복잡한 레이아웃도 간단하게 만들 수 있어."

멘토는 간단한 HTML 예시를 보여주며 설명을 이어갔다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 예제</title>
  <!-- Bootstrap CSS 링크 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

  <div class="container">
    <div class="row">
      <div class="col-4">
        <div class="p-3 bg-primary text-white">1번째 열</div>
      </div>
      <div class="col-4">
        <div class="p-3 bg-secondary text-white">2번째 열</div>
      </div>
      <div class="col-4">
        <div class="p-3 bg-success text-white">3번째 열</div>
      </div>
    </div>
  </div>

</body>
</html>

멘토는 화면을 가리키며 설명을 덧붙였다. "여기서는 화면을 세 개의 열로 나눈 예시야. col-4라는 클래스는 각 열이 12칸 중 4칸을 차지한다는 뜻이지. Bootstrap에서는 이렇게 간단하게 레이아웃을 나눌 수 있어."

이 코드를 자세히 살펴보면, Bootstrap의 그리드 시스템을 사용해 여러 요소를 화면에 정렬할 수 있어. Bootstrap의 그리드 시스템은 웹페이지 레이아웃을 12개의 칸으로 나누어 각 요소가 그 칸 중 몇 개를 차지할지 지정할 수 있는 방식이야.

container 클래스: 이 클래스는 페이지의 전체적인 그리드 레이아웃의 기본 틀을 만들어줘. 모든 그리드 시스템의 시작점이 되며, 페이지 내부 요소들이 정렬되는 범위를 결정하지. 이 container 요소는 중앙에 정렬되고, 웹페이지의 너비에 맞춰 레이아웃이 조정돼.
row 클래스: row는 그리드 시스템에서 한 줄의 레이아웃을 나타내. 모든 열(col) 요소는 반드시 row 안에 있어야 해. row는 각 열들을 가로로 배치해 주는 역할을 해.
col-4 클래스: 여기서 col-4는 12칸 중 4칸을 차지한다는 뜻이야. Bootstrap은 기본적으로 화면 너비를 12칸으로 나누기 때문에, col-4를 세 번 사용하면 4칸씩 나눠져 화면에 세 개의 열이 표시되지. 즉, 각 열이 화면의 1/3을 차지하는 셈이지. 이를 통해 콘텐츠를 3등분하여 배치할 수 있어.
예를 들어, col-6을 사용하면 해당 요소가 화면의 절반(6칸)을 차지하게 되고, col-12를 사용하면 하나의 요소가 화면 전체를 차지하게 돼.
반응형 레이아웃: Bootstrap의 그리드 시스템은 반응형이기 때문에, 화면 크기에 따라 자동으로 레이아웃이 변경돼. 예를 들어, 큰 화면에서는 3개의 열로 보이지만, 작은 화면에서는 각 열이 쌓여서 세로로 배열될 수 있어. 이러한 반응형 특성 덕분에 다양한 기기에서 웹페이지가 잘 보여.

예시 코드 분석

<div class="container">
  <div class="row">
    <div class="col-4">
      <div class="p-3 bg-primary text-white">1번째 열</div>
    </div>
    <div class="col-4">
      <div class="p-3 bg-secondary text-white">2번째 열</div>
    </div>
    <div class="col-4">
      <div class="p-3 bg-success text-white">3번째 열</div>
    </div>
  </div>
</div>

container: 이 div는 그리드 레이아웃을 설정하는 전체 틀 역할을 해.
row: 한 줄에 세 개의 열(col-4)을 배치했지. 이 줄(row)이 그리드의 하나의 줄이 되는 거야.
col-4: 각 열은 12칸 중 4칸을 차지하고, 세 개의 열이 나란히 배치돼. 따라서 화면이 넓을 때는 세 개의 열이 가로로 나란히 있고, 화면이 좁아지면 각 열이 세로로 쌓일 수 있어.
bg-primary, bg-secondary, bg-success: 각각 파란색, 회색, 초록색 배경을 설정하는 Bootstrap의 클래스야. 이 배경색 덕분에 열들이 시각적으로 구분돼.

이 코드를 통해 우리는 웹페이지에서 여러 개의 콘텐츠를 정렬하고, 유연한 레이아웃을 쉽게 구현할 수 있어. 복잡한 CSS 코드를 직접 작성하지 않아도 그리드 시스템을 활용해 간단하고 일관성 있는 레이아웃을 만들 수 있지.

초코는 눈을 크게 뜨며 감탄했다. "와! 이렇게 쉽게 레이아웃을 나눌 수 있군요. CSS 코드를 따로 작성할 필요 없이 레이아웃이 바로 만들어지다니, 정말 편리해요!"

4. Bootstrap 컴포넌트 사용하기

이어서 멘토는 Bootstrap에서 제공하는 다양한 컴포넌트 중 버튼을 만드는 방법을 설명했다. "Bootstrap에서는 이미 다양한 스타일의 버튼이 준비되어 있어. 직접 디자인할 필요 없이, 클래스 이름만 추가하면 돼."

멘토는 간단한 버튼 예시를 보여주며 설명을 이어갔다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 버튼 예제</title>
  <!-- Bootstrap CSS 링크 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

  <div class="container mt-5">
    <button class="btn btn-primary">기본 버튼</button>
    <button class="btn btn-success">성공 버튼</button>
    <button class="btn btn-danger">위험 버튼</button>
  </div>

</body>
</html>

"여기서 btn, btn-primary, btn-success, btn-danger와 같은 클래스를 사용해서 버튼의 색상과 스타일을 간단하게 바꿀 수 있어."

btn: Bootstrap에서 모든 버튼에 적용되는 기본 클래스야. 이 클래스를 추가하면, 버튼 요소가 Bootstrap 스타일에 맞게 자동으로 적용되면서 기본적인 크기, 여백, 패딩 등이 설정되지. 이로 인해 HTML의 기본 버튼보다 더 깔끔하고 일관된 디자인이 돼.
btn-primary: btn 클래스에 추가로 적용하는 색상 스타일 중 하나로, 파란색 배경을 가진 버튼을 만들어줘. 이 파란색은 Bootstrap에서 기본적으로 '주요(primary)' 작업을 나타내는 색으로 정의돼 있어. 주로 사용자가 클릭해야 하는 중요한 버튼에 사용해.
btn-success: 녹색 배경을 가진 버튼을 만들고 싶을 때 사용하는 클래스야. 보통 '성공(success)'을 나타내는 작업을 표현할 때 사용해. 예를 들어, 저장 버튼이나 제출 버튼에 사용하면 좋아.
btn-danger: 빨간색 배경을 가진 버튼으로, 사용자가 주의해야 할 작업이나 취소, 삭제 같은 작업을 나타낼 때 자주 사용돼. '위험(danger)'을 경고하는 느낌을 주는 스타일이야.

이 클래스들은 Bootstrap에서 미리 정의된 스타일이기 때문에, 직접 CSS를 작성할 필요 없이 간단히 클래스 이름만 추가하면 원하는 스타일을 적용할 수 있어. 덕분에 버튼의 스타일을 매우 빠르게 수정할 수 있지.

초코는 자신이 만든 버튼들을 보고는 감탄했다. "정말 간단하네요! 버튼마다 스타일을 다르게 할 수 있어서 편리해요."

5. Bootstrap의 장점과 단점

멘토는 Bootstrap의 장점뿐만 아니라 단점도 짚어주었다.

"Bootstrap은 시간을 절약하고, 일관성 있는 디자인을 제공한다는 장점이 있어. 몇 가지 CSS 클래스만 사용하면 복잡한 레이아웃과 스타일을 빠르게 구현할 수 있지. 특히, 반응형 디자인을 기본적으로 제공해 다양한 기기에서 잘 보이는 웹페이지를 만들 수 있어."

하지만 멘토는 Bootstrap의 단점도 설명했다. "기본 제공되는 스타일이 다소 단조로울 수 있어. 다른 많은 웹사이트가 같은 스타일을 사용하기 때문에, 커스터마이징을 하지 않으면 비슷한 느낌의 디자인이 될 수 있지. 또한 커스터마이징이 어려울 때가 있어. 특정 요소의 스타일을 변경하려면 Bootstrap의 스타일 위에 추가 CSS를 작성해야 하거나, 기존 스타일을 덮어써야 해."

멘토는 한 가지 더 지적했다. "불필요한 코드들이 많아서, 사용하지 않는 컴포넌트나 스타일들이 웹사이트 성능에 영향을 줄 수 있어. 사용하지 않는 부분은 최대한 제거하거나, 필요한 부분만 직접 사용하는 것이 좋아."

코드 비교 예시:

멘토는 Bootstrap을 사용하는 경우와 직접 CSS를 작성하는 경우를 비교하며 설명을 이어갔다.

1. Bootstrap을 사용하는 경우:

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 버튼 예제</title>
  <!-- Bootstrap CSS 링크 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <button class="btn btn-primary">기본 버튼</button>
    <button class="btn btn-success">성공 버튼</button>
    <button class="btn btn-danger">위험 버튼</button>
  </div>
</body>
</html>

이 코드는 Bootstrap에서 미리 정의된 클래스들(btn, btn-primary, btn-success, btn-danger)을 사용하여 버튼을 쉽게 생성하고 스타일을 적용한 예시야. 몇 줄의 코드만으로 다양한 스타일의 버튼을 빠르게 만들 수 있는 장점이 있지. 하지만 스타일이 정해져 있어서, 더 독창적인 디자인을 원한다면 추가적인 커스터마이징이 필요해.

2. 직접 CSS를 작성하는 경우:

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>직접 CSS로 스타일링한 버튼 예제</title>
  <style>
    .btn {
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
    }
    .btn-primary {
      background-color: blue;
      color: white;
    }
    .btn-success {
      background-color: green;
      color: white;
    }
    .btn-danger {
      background-color: red;
      color: white;
    }
  </style>
</head>
<body>
  <div>
    <button class="btn btn-primary">기본 버튼</button>
    <button class="btn btn-success">성공 버튼</button>
    <button class="btn btn-danger">위험 버튼</button>
  </div>
</body>
</html>

이 코드는 각 버튼에 대해 직접 CSS 스타일을 작성한 예시야. 더 많은 유연성을 가지고 자신만의 스타일을 적용할 수 있지만, 버튼의 기본적인 스타일(예: 여백, 패딩 등)까지 모두 작성해야 하기 때문에 시간이 오래 걸릴 수 있어. 또한, 반응형 기능을 적용하려면 추가적으로 CSS 미디어 쿼리를 작성해야 하는 불편함이 있어.

Bootstrap의 효율성 vs 직접 CSS 작성의 유연성

멘토는 결론을 짓듯 설명을 마무리했다. "Bootstrap을 사용하면 빠르게 스타일을 적용할 수 있지만, 너무 의존하면 웹페이지가 단조롭게 보일 수 있어. 직접 CSS를 작성하면 더 세밀한 커스터마이징이 가능하지만, 시간과 노력이 많이 소요되지. 각 프로젝트의 목적과 스타일에 맞춰 선택하는 것이 중요해."

초코는 멘토의 설명을 듣고 고개를 끄덕였다. "그렇군요. Bootstrap과 직접 스타일링의 장단점을 잘 알고 적절히 사용해야겠어요. 그래도 기본 스타일을 쉽게 적용할 수 있다는 건 정말 큰 장점인 것 같아요."

결론

결국, 초코는 CSS 프레임워크인 Bootstrap을 배워 웹페이지를 보다 빠르고 효율적으로 디자인할 수 있게 되었다. "이제는 CSS 코드를 일일이 작성하지 않아도 미리 만들어진 스타일을 가져다 쓸 수 있겠어요!" 멘토는 만족스러운 표정으로 초코를 바라보며 말했다. "맞아, Bootstrap 같은 CSS 프레임워크는 시간을 절약하고 웹 개발을 쉽게 만들어주는 훌륭한 도구야. 앞으로 더 복잡한 웹사이트를 만들 때도 유용하게 쓸 수 있을 거야."

'스토리텔링' 카테고리의 다른 글

초코의 풀스택 도전기 13: 웹 접근성을 고려한 CSS 적용 방법 (0)	2024.10.08
초코의 풀스택 도전기 12: 웹 성능 최적화와 CSS 파일 최적화 방법 (0)	2024.10.07
초코의 풀스택 도전기 10: CSS 애니메이션으로 웹페이지에 생동감 더하기 (2)	2024.10.05
초코의 풀스택 도전기 9: CSS Grid로 복잡한 레이아웃을 쉽게 만들기 (0)	2024.10.04
초코의 풀스택 도전기 8: CSS 박스 모델과 레이아웃의 이해 (0)	2024.10.03

ABOUT ME

EduTech Hub EduTech Hub

도입

1. CSS 프레임워크란?

2. Bootstrap 소개와 사용 방법

3. Bootstrap으로 간단한 웹페이지 만들기

예시 코드 분석

4. Bootstrap 컴포넌트 사용하기

5. Bootstrap의 장점과 단점

코드 비교 예시:

Bootstrap의 효율성 vs 직접 CSS 작성의 유연성

결론

'스토리텔링' 카테고리의 다른 글

티스토리툴바

ABOUT ME

도입

1. CSS 프레임워크란?

2. Bootstrap 소개와 사용 방법

3. Bootstrap으로 간단한 웹페이지 만들기

예시 코드 분석

4. Bootstrap 컴포넌트 사용하기

5. Bootstrap의 장점과 단점

코드 비교 예시:

Bootstrap의 효율성 vs 직접 CSS 작성의 유연성

결론

'스토리텔링' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바