복습

250131(1교시 복습)

Blue_bull 2025. 1. 31. 10:32

250131 1교시 복습

<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<!-- 부트스트랩은 제이쿼리 자바 스크립트를 토대로 적용하므로 jquery.min.js파일을 bundle.min.js 파일보다 먼저 포함시켜야 합니다. -->
<script type="text/javascript" src="jquery.min.js"></script>

<!-- bootstrap.min.css 파일은 부트 스트랩을 위한 스타일 시트 파일입니다. -->
<link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
    rel="stylesheet">

<!-- bootstrap.bundle.min.js 파일은 부트 스트랩을 위한 자바 스크립트 파일입니다. -->
<script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>


</head>
<body>

    <div class="container mt-3">
        <h2>Stacked form</h2>
        <form action="/action_page.php">
            <div class="input-group">
                <span class="input-group-text">아이디</span> <input type="text" id="id" name="id"
                    class="form-control" placeholder="아이디를 입력해 주세요.">
            </div>
            <div class="mb-3 mt-3">
                <label for="email">Email:</label> <input type="email"
                    class="form-control" id="email" placeholder="Enter email"
                    name="email">
            </div>
            <div class="mb-3">
                <label for="pwd">Password:</label> <input type="password"
                    class="form-control" id="pwd" placeholder="Enter password"
                    name="pswd">
            </div>
            <div class="form-check mb-3">
                <label class="form-check-label"> <input
                    class="form-check-input" type="checkbox" name="remember">
                    Remember me
                </label>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>

1. 코드 개요

이 HTML 파일은 Bootstrap 5를 사용하여 간단한 로그인 폼을 구현한 것이다.
CDN 방식으로 Bootstrap을 가져오며, jQuery도 함께 로드한다.

2. 주요 개념

① HTML 기본 구조

<head> ~ </head>  
<body> ~ </body>
  • <head>: CSS, JS 같은 외부 파일을 불러오고, 메타데이터 설정.
  • <body>: 실제 화면에 보이는 내용 작성.

② 외부 라이브러리 로드

<script type="text/javascript" src="jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  • jQuery: Bootstrap에서 JavaScript 기능을 사용할 때 필요 (예: 모달, 드롭다운).
  • Bootstrap CSS: 스타일 적용.
  • Bootstrap JS: 동적인 기능 추가.

💡 순서 중요!
jQuery → Bootstrap CSS → Bootstrap JS 순으로 불러와야 함.

3. Bootstrap을 이용한 로그인 폼

① container 클래스

<div class="container mt-3">
  • container: Bootstrap의 기본 레이아웃을 적용하는 컨테이너.
  • mt-3: margin-top을 추가하여 여백을 줌.

② input-group을 사용한 아이디 입력

<div class="input-group">
    <span class="input-group-text">아이디</span>
    <input type="text" id="id" name="id" class="form-control" placeholder="아이디를 입력해 주세요.">
</div>
  • input-group: 여러 입력 요소를 하나로 묶음.
  • input-group-text: 입력 필드 왼쪽에 붙는 라벨.
  • form-control: Bootstrap 스타일이 적용된 입력 필드.
  • placeholder: 입력 안내 문구.

③ 일반적인 입력 필드

<div class="mb-3 mt-3">
    <label for="email">Email:</label>
    <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
  • form-control: 입력 필드 스타일 적용.
  • mb-3 mt-3: 위/아래 margin 추가.

④ 비밀번호 입력 필드

<div class="mb-3">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
</div>
  • type="password": 입력한 비밀번호가 가려짐.

⑤ 체크박스 (기억하기 기능)

<div class="form-check mb-3">
    <label class="form-check-label">
        <input class="form-check-input" type="checkbox" name="remember"> Remember me
    </label>
</div>
  • form-check: 체크박스 디자인 적용.

⑥ 제출 버튼

<button type="submit" class="btn btn-primary">Submit</button>
  • btn: 버튼 기본 스타일.
  • btn-primary: 파란색 부트스트랩 스타일 버튼.

4. 중요한 개념 정리

  1. CDN 방식: 외부 서버에서 Bootstrap을 불러옴 (내장 스타일 X).
  2. 반응형 지원: Bootstrap의 container, form-control 같은 클래스를 사용하면 화면 크기에 따라 자동으로 조정됨.
  3. 클래스 선택자 사용: Bootstrap은 대부분 클래스 선택자(.container, .form-control)로 스타일을 적용.
  4. 자동 정렬 기능 (Ctrl + Shift + F): 코드 자동 들여쓰기 정리.

이제 이 구조를 이해하면 W3Schools 같은 곳에서 코드를 가져와 수정하는 것이 훨씬 쉬워질 거야! 🚀

외울 필요는 없어! 대신 패턴을 익히고, 자주 사용하는 구조를 참고하며, 직접 실습해보는 것이 더 효과적이야. 다음 방법을 추천해.

1. 핵심 패턴 익히기

코드 전체를 외울 필요 없이, 반복적으로 쓰이는 패턴만 익히면 돼.

📌 예: 입력 필드 패턴

<div class="mb-3">
    <label for="email">Email:</label>
    <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
  • div.mb-3 → 입력 필드 간 여백 추가
  • label for="id" → 입력 필드와 연결된 라벨
  • input.form-control → Bootstrap 스타일 적용

📌 비밀번호 필드?
👉 위 코드에서 type="password"로 바꾸면 끝! (type="text" → type="password")

2. 공식 문서 + 예제 적극 활용

💡 방법:

  1. 예제가 필요할 때 문서에서 검색
  2. 코드 가져와서 테스트해보기
  3. 필요한 부분만 수정해서 사용

3. 코드 조합 실습하기 (🔥 가장 중요 🔥)

  1. 기본 폼을 직접 만들어보기
  2. 스타일을 추가하면서 변화 확인
  3. 기능을 추가해보기 (버튼, 체크박스, 드롭다운 등)

📌 예제 실습 목표:

  • 입력 필드 추가
  • 버튼 색상 변경 (btn-primary → btn-success)
  • 레이아웃 조정 (container → container-fluid)

4. "필요할 때 검색하고 조합"하는 습관 들이기

💡 모든 코드를 기억할 필요 없어!
대신 구조를 이해하고, 필요한 부분을 빠르게 검색해서 활용하면 돼.

🔹 "아, 부트스트랩에서 버튼 스타일은 btn btn-primary였지?"
👉 기억 안 나면 검색해서 확인 후 적용!

5. 코드 자동 정렬 & 편집기 활용

✅ Ctrl + Shift + F: 코드 자동 들여쓰기 정리
✅ VS Code Emmet 기능 (div.container → Enter 치면 자동 완성)
✅ Live Server 확장 기능: 실시간으로 화면 확인

결론: "기억하는 것보다 자주 보고 활용하는 것"

  1. 자주 쓰는 패턴 익히기 (입력 필드, 버튼, 폼 구조)
  2. W3Schools, 공식 문서에서 필요할 때 검색
  3. 실제 프로젝트에서 조합하며 실습
  4. 자동 완성 기능 & 정렬 기능 적극 활용

이렇게 하면 Bootstrap을 자연스럽게 익히고 활용할 수 있어! 🚀

'복습' 카테고리의 다른 글

250207 복습2  (0) 2025.02.07
250207 1교시 정리  (0) 2025.02.07
250131(4교시 복습)  (0) 2025.01.31
250131(3교시 복습)  (0) 2025.01.31
250131(2교시 복습)  (0) 2025.01.31

'복습'의 다른글

  • 현재글250131(1교시 복습)

관련글

티스토리툴바