프로필 수정
분류: 서식
회사·사용자명·이메일·이름·성·주소 등 입력 항목이 많은 프로필 수정 화면을 격자로 배치하는 예제입니다. row row-cards 아래에 col-md-*/col-sm-* 조합으로 항목마다 너비를 다르게 지정해, 넓은 화면에서는 여러 항목이 한 줄에 나란히 놓이고 좁은 화면에서는 자동으로 줄바꿈되도록 구성했습니다. 회사명처럼 값을 바꿀 수 없는 항목은 disabled 속성으로 비활성화했습니다.
소스
<div class="card overflow-auto">
<div class="card-body">
<h3 class="card-title">프로필 수정</h3>
<div class="row row-cards">
<div class="col-md-5">
<div class="mb-3">
<label class="form-label">회사</label>
<input type="text" class="form-control" disabled="" placeholder="회사" value="Creative Code Inc.">
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="mb-3">
<label class="form-label">사용자명</label>
<input type="text" class="form-control" placeholder="사용자명" value="michael23">
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="mb-3">
<label class="form-label">이메일 주소</label>
<input type="email" class="form-control" placeholder="이메일">
</div>
</div>
<div class="col-sm-6 col-md-6">
<div class="mb-3">
<label class="form-label">이름</label>
<input type="text" class="form-control" placeholder="이름" value="길동">
</div>
</div>
<div class="col-sm-6 col-md-6">
<div class="mb-3">
<label class="form-label">성</label>
<input type="text" class="form-control" placeholder="성" value="홍">
</div>
</div>
<div class="col-md-12">
<div class="mb-3">
<label class="form-label">주소</label>
<input type="text" class="form-control" placeholder="집 주소" value="서울 특별시, 대한민국">
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="mb-3">
<label class="form-label">도시</label>
<input type="text" class="form-control" placeholder="도시" value="서울">
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="mb-3">
<label class="form-label">우편번호</label>
<input type="test" class="form-control" placeholder="우편번호">
</div>
</div>
<div class="col-md-5">
<div class="mb-3">
<label class="form-label">국가</label>
<select class="form-control form-select">
<option>대한민국</option>
<option>일본</option>
<option>미국</option>
</select>
</div>
</div>
<div class="col-md-12">
<div class="mb-3 mb-0">
<label class="form-label">자기소개</label>
<textarea rows="5" class="form-control" placeholder="여기에 자기소개를 입력할 수 있습니다.">이곳에 자기소개를 입력 하세요. 예시 문장입니다.</textarea>
</div>
</div>
</div>
</div>
<div class="card-footer text-end">
<button type="submit" class="btn btn-primary">프로필 업데이트</button>
</div>
</div>
사용된 주요 클래스
| 클래스 | 역할 |
|---|---|
card-title | 카드 상단의 제목(h3) 스타일 |
row row-cards | 항목들을 격자로 배치하는 Bootstrap 그리드 행(row-cards는 자식 카드/컬럼 사이의 간격을 보정) |
col-md-12 col-md-6 col-md-5 col-md-4 col-md-3 col-sm-6 | 화면 폭(중간/작은 화면 기준)에 따라 각 입력 항목이 차지하는 열 너비 지정 |
form-label | 입력 컨트롤 위에 붙는 라벨 스타일 |
form-control | 텍스트 입력 필드와 textarea의 기본 스타일 |
form-select | 드롭다운(<select>)의 기본 스타일 |
mb-3 | 각 폼 그룹 사이의 아래쪽 여백(margin-bottom) |
mb-0 | 마지막(자기소개) 항목에서 아래쪽 여백을 제거 |
실전 예제 페이지
HandStack 웹 호스트(wwwroot 모듈)를 기동한 뒤 /sample/ui-library/서식-프로필-수정.html 경로에서 렌더링 결과를 확인할 수 있습니다.