부트스트랩 - 로그인 데모

개요

안녕하세요, 야심 찬 웹 개발자 여러분! 오늘 우리는 부트스트랩을 사용하여 아름답고 기능적인 로그인 페이지를 만드는 흥미로운 여정을 시작할 것입니다. 여러분의 친절한 이웃 컴퓨터 선생님이자 저는 이 과정을 단계별로 안내해 드리겠습니다. 코드를 한 줄도 적어본 적이 없으신 분도 걱정하지 마세요 - 우리는 매우 기본적인 것부터 시작하여 점진적으로 올라갈 것입니다. 이 튜토리얼의 끝을 맺을 때, 당신은 자랑스러운 전문적인 외관을 가진 로그인 페이지를 가지게 될 것입니다!

Bootstrap-Sign In Demo

부트스트랩이란?

코드에 들어가기 전에 부트스트랩에 대해 이야기해 보겠습니다. 집을 짓는 것을 상상해 보세요. 모든 벽돌을 처음부터 만들 수도 있고, 사전 제작된 자재를 사용하여 과정을 빠르게할 수도 있습니다. 부트스트랩은 웹 개발에서 그러한 사전 제작된 자재와 같은东西입니다. 무료이며 오픈 소스인 CSS 프레임워크로, 반응형 및 모바일 우선의 웹사이트를 빠르고 쉽게 만들어 줍니다.

프로젝트 설정

단계 1: HTML 파일 생성

가장 먼저, 우리는 HTML 파일을 생성해야 합니다. 좋아하는 텍스트 편집기를 열고 (저는 개인적으로 Visual Studio Code를 좋아하지만, 초보자 számára는 Notepad가 충분합니다), 새 파일을 만들어 index.html이라고 이름지어 줍니다. 이 파일이 우리 로그인 페이지의 기반입니다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Sign In Demo</title>
</head>
<body>

</body>
</html>

이것이 우리의 기본 HTML 구조입니다. 이를 우리 웹페이지의 뼈대라고 생각할 수 있습니다. <head> 부분은 우리 페이지에 대한 정보를 넣는 곳이고, <body>는 모든 가시적 콘텐츠가 들어가는 곳입니다.

단계 2: 부트스트랩 포함

이제 우리의 뼈대에 근육을 추가해 줄 차례입니다. 부트스트랩을 포함하려면 HTML의 <head> 부분에 몇 가지 링크를 추가합니다:

<head>
<!-- ... 이전 코드 ... -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>

이 줄들은 우리의 웹페이지를 슈퍼 헴어 코스튬으로 만들어 줍니다. 부트스트랩 CSS와 JavaScript 파일에 링크하여 부트스트랩의 사전 제작된 컴포넌트와 스타일에 접근할 수 있게 됩니다.

로그인 폼 생성

단계 1: 기본 폼 구조

로고인 폼을 만들기 시작해 보겠습니다. <body> 태그 내에 다음 코드를 추가합니다:

<body>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<form>
<h2 class="mb-3">Sign In</h2>
<!-- 폼 필드가 여기 들어갑니다 -->
</form>
</div>
</div>
</div>
</body>

이를 설명해 보겠습니다:

container: 이 부트스트랩 클래스는 반응형 고정 폭 컨테이너를 생성합니다.
mt-5: 상단에 마진을 추가하여 모든 것을 약간 아래로 밀어줍니다.
row와 col-md-6: 이는 중앙에 정렬된 열을 만들고, 중형 화면 및 그 이상에서 반을 차지합니다.

단계 2: 폼 필드 추가

이제 폼 필드를 추가해 보겠습니다. 폼 내의 주석을 다음과 같이 변경합니다:

<div class="mb-3">
<label for="email" class="form-label">Email address</label>
<input type="email" class="form-control" id="email" required>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password" required>
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="remember">
<label class="form-check-label" for="remember">Remember me</label>
</div>
<button type="submit" class="btn btn-primary">Sign In</button>

각 부분의 기능은 다음과 같습니다:

mb-3: 각 div에 하단 마진을 추가하여 간격을 둡니다.
form-label: 입력 필드의 레이블을 스타일 지정합니다.
form-control: 입력 필드를 아름답고 일관된 모양으로 만듭니다.
form-check와 form-check-input: 체크박스를 스타일 지정합니다.
btn btn-primary: 예쁜 파란색 버튼을 생성합니다.

스타일 추가

로고인 페이지를 더욱 아름답게 하기 위해 커스텀 CSS를 추가해 보겠습니다. <head> 부분에 다음을 추가합니다:

<style>
body {
background-color: #f8f9fa;
}
.container {
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h2 {
color: #007bff;
}
</style>

이 CSS는 우리의 페이지에 다음과 같은 효과를 줍니다:

body: 페이지에 연한 회색 배경을 추가합니다.
container: 폼에 하얀 배경, 여백, 둥근 모서리 및 약간의 그림자를 추가합니다.
h2: 제목을 파란색으로 만듭니다.

반응형 디자인 추가

부트스트랩의 좋은 점 중 하나는 기본적으로 반응형이라는 점입니다. 이는 우리의 로그인 페이지가 데스크톱과 모바일 기기 모두에서 잘 보일 것을 의미합니다. 하지만 한 가지 더 튠을 추가하여 완벽하게 만들어 보겠습니다:

<div class="col-md-6 col-sm-8 col-10">

폼 컨테이너의 col-md-6을 이 줄로 변경합니다. 이제 작은 기기에서 폼은 8칸을 차지하고, 초소형 기기에서는 10칸을 차지하여 항상 쉽게 읽고 사용할 수 있습니다.

결론

이제 그것이 다입니다! 부트스트랩을 사용하여 아름답고 반응형 로그인 페이지를 만들었습니다. 여기 우리가 사용한 주요 부트스트랩 클래스를 요약한 표가 있습니다:

클래스	목적
container	반응형 고정 폭 컨테이너 생성
row	수평 컬럼 그룹 생성
col-*	다양한 화면 크기에 따른 컬럼 폭 정의
form-control	폼 입력 스타일 지정
form-label	폼 레이블 스타일 지정
form-check	체크박스 및 라디오 버튼 스타일 지정
btn	버튼 생성
btn-primary	주요 색상으로 버튼 스타일 지정
mt-*	상단 마진 추가
mb-*	하단 마진 추가

기억해 두세요, 웹 개발은 실습과 창의성이 중요합니다. 다양한 색상, 레이아웃, 부트스트랩 컴포넌트를 실험해 보지 마세요. 누가 알랴, 당신의 다음 프로젝트가 인터넷에서 큰 인기를 끌 수 있을지도 모릅니다!

행복하게 코딩하세요, 미래의 웹 마법사 여러분!

Credits: Image by storyset