250131 2교시 수업 정리 – HTML 태그 및 type 속성 이해
아래와 같이 정리하면 가독성이 높아지고, 유지보수가 쉬워집니다. 인스턴스 변수로 바뀔 수 있는 부분을 {{ variable_name }} 형태로 표시했습니다.
정리된 코드
<div class="input-group">
<span class="input-group-text">{{ label_text }}</span>
<input
type="{{ input_type }}"
id="{{ input_id }}"
name="{{ input_name }}"
class="form-control"
placeholder="{{ placeholder_text }}">
</div>설명 및 변경 가능한 부분
{{ label_text }}→ 입력 필드의 라벨 (예: 비밀번호, 사용자명 등){{ input_type }}→text,password,email등{{ input_id }}→ 각 입력 필드의 ID (예: name, password 등){{ input_name }}→ 폼 데이터에서 사용할 name 속성 값{{ placeholder_text }}→ 입력 안내 문구 (예: "비밀번호를 입력해 주세요.")
기본 태그 정리
<h2>{{ title }}</h2>
<p>{{ paragraph }}</p>h2: 제목p: 본문 텍스트
Bootstrap 5 버튼 종류
기본 버튼
<button type="button" class="btn">Basic</button>테두리 스타일 버튼
<button type="button" class="btn btn-outline-primary">Primary</button>크기 조절 버튼
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>아래와 같이 코드의 가독성을 높이고, 필요한 부분에 주석을 추가했습니다.
개선된 코드
<div class="container mt-3">
<h2>회원 가입</h2>
<p>신규 회원이 가입하는 페이지입니다.</p>
<!-- 회원 가입 폼 시작 -->
<form action="/action_page.php">
<!-- 아이디 입력 필드 -->
<div class="input-group mb-3">
<span class="input-group-text">아이디</span>
<input type="text" id="id" name="id" class="form-control" placeholder="아이디를 입력해 주세요.">
</div>
<!-- 성별 선택 -->
<div class="input-group mb-3">
<span class="input-group-text">성별</span>
<div class="form-control d-flex">
<label class="radio-inline me-3">
<input type="radio" name="gender" value="남자"> 남자
</label>
<label class="radio-inline">
<input type="radio" name="gender" value="여자"> 여자
</label>
</div>
</div>
<!-- 결혼 여부 선택 -->
<div class="input-group mb-3">
<span class="input-group-text">결혼 여부</span>
<div class="form-control d-flex">
<label class="radio-inline me-3">
<input type="radio" name="marriage" value="결혼"> 결혼
</label>
<label class="radio-inline me-3">
<input type="radio" name="marriage" value="이혼"> 이혼
</label>
<label class="radio-inline">
<input type="radio" name="marriage" value="미혼"> 미혼
</label>
</div>
</div>
<!-- 가입 및 초기화 버튼 -->
<div class="input-group">
<button type="submit" class="btn btn-primary me-2">가입</button>
<button type="reset" class="btn btn-secondary">초기화</button>
</div>
</form>
<!-- 회원 가입 폼 끝 -->
</div>주요 개선 사항
레이아웃 정리
mb-3클래스를 추가하여 입력 필드 간격을 더 명확하게 구분함.d-flex와me-3클래스를 사용하여 라디오 버튼이 한 줄로 정렬되도록 수정함.
버튼 스타일 개선
me-2클래스를 추가하여 "가입"과 "초기화" 버튼 사이의 간격을 조정.btn-secondary를 사용하여 "초기화" 버튼을 "가입" 버튼과 시각적으로 구분.
주석 추가
- 각 섹션에 설명을 추가하여 코드의 가독성을 높임.
이제 유지보수 및 가독성이 훨씬 좋아졌습니다! 🚀
HTML 태그와 type 종류 및 핵심 정리
1. 태그(Tag)
HTML에서 태그는 웹페이지의 구조를 정의하는 요소입니다. 태그는 <태그명> 형식으로 작성되며, 열리는 태그와 닫히는 태그로 구성됩니다.
기본 태그
<html>: HTML 문서의 루트 요소<head>: 문서의 메타데이터 포함<body>: 화면에 표시되는 콘텐츠 포함
문단 및 텍스트 관련 태그
<h1> ~ <h6>: 제목(Heading)<p>: 문단(Paragraph)<span>: 인라인 요소 그룹화<div>: 블록 요소 그룹화<strong>: 강조(굵게)<em>: 기울임(이탤릭)
링크 및 미디어
<a href="">: 하이퍼링크<img src="">: 이미지 삽입<video>: 비디오 삽입<audio>: 오디오 삽입
목록 관련 태그
<ul>: 순서 없는 목록(Unordered List)<ol>: 순서 있는 목록(Ordered List)<li>: 목록 항목(List Item)
테이블 관련 태그
<table>: 표 생성<tr>: 행(Row)<td>: 셀(Data)<th>: 제목 셀(Header)
폼(Form) 관련 태그
<form>: 사용자 입력을 위한 폼 생성<input>: 사용자가 입력할 수 있는 요소<label>: 입력 요소에 대한 설명<textarea>: 여러 줄 입력<button>: 버튼 생성<select>: 드롭다운 리스트<option>: 선택 옵션
2. type 속성
type 속성은 주로 <input> 태그에서 사용되며 입력값의 유형을 정의합니다.
기본적인 입력 타입
text: 기본 텍스트 입력password: 비밀번호 입력 (입력값 숨김)email: 이메일 주소 형식 입력tel: 전화번호 입력url: URL 입력
숫자 및 선택형 입력
number: 숫자 입력 (최소/최대 설정 가능)range: 슬라이더 형식 숫자 입력checkbox: 다중 선택 가능 체크박스radio: 하나만 선택 가능한 라디오 버튼
날짜 및 시간 입력
date: 날짜 선택time: 시간 선택datetime-local: 날짜+시간 선택
파일 및 버튼 관련
file: 파일 업로드submit: 폼 제출 버튼reset: 입력 초기화 버튼button: 일반 버튼
3. 핵심 요약
- HTML 태그는 문서의 구조를 정의하는 역할을 함.
<input>태그의type속성은 다양한 입력 방식을 제공.- 시멘틱 태그 (
<header>,<footer>,<article>등)를 사용하면 SEO와 접근성이 향상됨. type="text"vstype="password"같은 속성 차이를 이해하고 적절히 사용해야 함.
'복습' 카테고리의 다른 글
| 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(1교시 복습) (0) | 2025.01.31 |