# TIL - 2026.07.28
📌 오늘 학습한 주제
- HTML/CSS 및 JS 파일 연동 (
<link>,<script>) - 버튼 이벤트 핸들러 구현 (
onclick="handler()") - Bootstrap 5 CDN 연동 및 반응형 폼 UI 작성
💡 오늘 배운 것 — 나만의 언어로
오늘은 HTML, CSS, JavaScript를 사용해 기본적인 웹페이지 요소를 구성하고, 외부 라이브러리인 Bootstrap 5를 연동하여 깔끔한 반응형 로그인 폼을 구현했다.
기본적인 클릭 이벤트 처리 방식을 배우며, 버튼 요소에 onclick 속성을 부여해 JavaScript 함수가 트리거되는 흐름을 익혔다. 이벤트 핸들러 함수 내부에서 alert() 함수를 통해 클릭 반응을 확인해보았다.
또한, UI 디자인 및 레이아웃을 효율적으로 작성하기 위해 Bootstrap 5 CDN을 도입했다. container, mb-3, form-control, btn-primary 등 미리 정의된 Bootstrap 클래스를 사용함으로써 복잡한 CSS 작성 없이도 가독성이 높고 깔끔한 회원가입/로그인 폼 레이아웃을 쉽게 구축할 수 있음을 알게 되었다.
💻 오늘 핵심 코드 1 — Vanilla JS 이벤트 핸들러 구현
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="../css/greeting.css" rel="stylesheet">
<script src="../js/greeting.js"></script>
</head>
<body>
<center>섭섭이와 함께하는 즐거운 Front-End(html, css, script)</center>
<button type="button" onclick="handler()" class="btn">Signup</button>
<script>
function handler() {
alert(">>>click");
}
</script>
</body>
</html>✨ 이해한 점
<link>및<script src="">태그를 이용해 상위 디렉터리(../)에 위치한 외부 CSS 및 JS 파일을 HTML 문서에 연결하는 법을 배웠다.<button>요소에type="button"과onclick="handler()"를 설정하여 버튼을 누르면 자바스크립트의handler()함수가 호출되도록 처리했다.- 함수 내부의
alert(">>>click")을 통해 브라우저 상에 알림창이 정상적으로 동작하는 것을 확인했다.
💻 오늘 핵심 코드 2 — Bootstrap 5 기반 Form 작성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Form Example</title>
<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>
</head>
<body>
<div class="container mt-5">
<form action="/server-destination" method="POST">
<div class="mb-3 mt-3">
<label for="email" class="form-label">Email address:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email" required>
</div>
<div class="mb-3">
<label for="pwd" class="form-label">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
</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>
</body>
</html>✨ 이해한 점
- Bootstrap CDN 연동:
<head>태그 안에 Bootstrap 5의 CSS와 JS CDN 링크를 포함시켜 별도의 로컬 라이브러리 설치 없이 바로 스타일을 적용할 수 있다. container&mt-5: 중앙 정렬 레이아웃과 상단 여백(Margin-Top)을 편리하게 부여한다.form-control:<input>태그에 세련된 테두리와 Focus 스타일을 자동으로 적용해준다.btn btn-primary: 클릭 동작을 유도하는 주 스타일(파란색) 버튼을 쉽게 생성한다.
🔍 문제와 해결
- 막힌 부분: 직접 CSS를 작성할 때는 여백 및 반응형 레이아웃 조절 시 코드가 길어지고 일일이 속성을 부여해야 하는 번거로움이 있었다.
- 해결 방법: Bootstrap에서 제공하는
mb-3,form-control등 검증된 유틸리티 클래스를 사용하여 깔끔한 웹 폼 디자인을 효율적으로 완성했다.
🎯 다음에 할 일
- 오늘 작성한 HTML/CSS 및 Bootstrap 기본 클래스 종류 복습하기
- Bootstrap Grid 시스템(
row,col)을 활용해 다양한 레이아웃 구성해보기
성장중