HTTP 요청
분류: 서식
API 테스트 도구처럼 메서드·URL 입력 + 조건(단언) 목록 테이블을 한 화면에 구성하는 예제입니다. 상단은 row row-cards로 메서드 선택(col-sm-4 col-md-2)과 URL 입력(col-sm-8 col-md-10)을 좌우로 배치하고, 하단은 table 안에 셀마다 form-select/form-control을 넣어 행 단위로 조건을 추가·비교할 수 있는 형태입니다. 표 형태 안에 입력 컨트롤을 넣는 패턴은 여러 조건을 한 화면에서 편집해야 하는 관리자 화면에 활용할 수 있습니다.
소스
<div class="card overflow-auto">
<div class="card-status-top bg-dark-overlay"></div>
<div class="card-header">
<h3 class="card-title">HTTP 요청</h3>
</div>
<div class="card-body">
<div class="row row-cards">
<div class="mb-3 col-sm-4 col-md-2">
<label class="form-label required">메서드</label>
<select class="form-select">
<option value="GET">GET</option>
<option value="POST">POST</option>
<option value="PUT">PUT</option>
<option value="HEAD">HEAD</option>
<option value="DELETE">DELETE</option>
<option value="PATCH">PATCH</option>
</select>
</div>
<div class="mb-3 col-sm-8 col-md-10">
<label class="form-label required">URL</label>
<input name="url" type="text" class="form-control" value="https://content.googleapis.com/discovery/v1/apis/surveys/v2/rest">
</div>
</div>
<div class="form-label">단언(Assertions)</div>
<div class="table-responsive">
<table class="table mb-0">
<thead>
<tr>
<th>소스</th>
<th>속성</th>
<th>비교</th>
<th>대상</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select class="form-select">
<option value="STATUS_CODE" selected="">상태 코드</option>
<option value="JSON_BODY">JSON 본문</option>
<option value="HEADERS">헤더</option>
<option value="TEXT_BODY">텍스트 본문</option>
<option value="RESPONSE_TIME">응답 시간</option>
</select>
</td>
<td>
<input type="text" class="form-control">
</td>
<td>
<select class="form-select">
<option value="EQUALS" selected="">같음</option>
<option value="NOT_EQUALS">같지 않음</option>
<option value="HAS_KEY">키를 가짐</option>
<option value="NOT_HAS_KEY">키를 갖지 않음</option>
<option value="HAS_VALUE">값을 가짐</option>
<option value="NOT_HAS_VALUE">값을 갖지 않음</option>
<option value="IS_EMPTY">비어 있음</option>
<option value="NOT_EMPTY">비어 있지 않음</option>
<option value="GREATER_THAN">보다 큼</option>
<option value="LESS_THAN">보다 작음</option>
</select>
</td>
<td>
<input type="text" class="form-control" value="200">
</td>
</tr>
<tr>
<td>
<select class="form-select">
<option value="STATUS_CODE">상태 코드</option>
<option value="JSON_BODY" selected="">JSON 본문</option>
<option value="HEADERS">헤더</option>
<option value="TEXT_BODY">텍스트 본문</option>
<option value="RESPONSE_TIME">응답 시간</option>
</select>
</td>
<td>
<input type="text" class="form-control" value="parameters.alt.type">
</td>
<td>
<select class="form-select">
<option value="EQUALS">같음</option>
<option value="NOT_EQUALS">같지 않음</option>
<option value="HAS_KEY">키를 가짐</option>
<option value="NOT_HAS_KEY">키를 갖지 않음</option>
<option value="HAS_VALUE" selected="">값을 가짐</option>
<option value="NOT_HAS_VALUE">값을 갖지 않음</option>
<option value="IS_EMPTY">비어 있음</option>
<option value="NOT_EMPTY">비어 있지 않음</option>
<option value="GREATER_THAN">보다 큼</option>
<option value="LESS_THAN">보다 작음</option>
</select>
</td>
<td>
<input type="text" class="form-control" value="string">
</td>
</tr>
<tr>
<td>
<select class="form-select">
<option value="STATUS_CODE">상태 코드</option>
<option value="JSON_BODY">JSON 본문</option>
<option value="HEADERS">헤더</option>
<option value="TEXT_BODY">텍스트 본문</option>
<option value="RESPONSE_TIME" selected="">응답 시간</option>
</select>
</td>
<td>
<input type="text" class="form-control">
</td>
<td>
<select class="form-select">
<option value="EQUALS">같음</option>
<option value="NOT_EQUALS">같지 않음</option>
<option value="HAS_KEY">키를 가짐</option>
<option value="NOT_HAS_KEY">키를 갖지 않음</option>
<option value="HAS_VALUE">값을 가짐</option>
<option value="NOT_HAS_VALUE">값을 갖지 않음</option>
<option value="IS_EMPTY">비어 있음</option>
<option value="NOT_EMPTY">비어 있지 않음</option>
<option value="GREATER_THAN">보다 큼</option>
<option value="LESS_THAN" selected="">보다 작음</option>
</select>
</td>
<td>
<input type="text" class="form-control" value="500">
</td>
</tr>
<tr>
<td>
<select class="form-select">
<option value="STATUS_CODE">상태 코드</option>
<option value="JSON_BODY">JSON 본문</option>
<option value="HEADERS" selected="">헤더</option>
<option value="TEXT_BODY">텍스트 본문</option>
<option value="RESPONSE_TIME">응답 시간</option>
</select>
</td>
<td>
<input type="text" class="form-control" value="content-type">
</td>
<td>
<select class="form-select">
<option value="EQUALS" selected="">같음</option>
<option value="NOT_EQUALS">같지 않음</option>
<option value="HAS_KEY">키를 가짐</option>
<option value="NOT_HAS_KEY">키를 갖지 않음</option>
<option value="HAS_VALUE">값을 가짐</option>
<option value="NOT_HAS_VALUE">값을 갖지 않음</option>
<option value="IS_EMPTY">비어 있음</option>
<option value="NOT_EMPTY">비어 있지 않음</option>
<option value="GREATER_THAN">보다 큼</option>
<option value="LESS_THAN">보다 작음</option>
</select>
</td>
<td>
<input type="text" class="form-control" value="application/json; charset=UTF-8">
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card-footer text-end">
<button type="submit" class="btn btn-primary">요청하기</button>
</div>
</div>
사용된 주요 클래스
| 클래스 | 역할 |
|---|---|
row row-cards | 메서드/URL 입력 영역을 가로로 배치하는 Bootstrap 그리드 행 |
col-sm-4 col-md-2 col-sm-8 col-md-10 | 화면 폭에 따라 메서드(좁게)와 URL(넓게) 입력 영역이 차지하는 열 너비 지정 |
form-label | 입력 컨트롤 위에 붙는 라벨 스타일 |
required | 라벨에 함께 사용해 필수 입력 항목임을 표시 |
form-select | 메서드/속성/비교 조건을 고르는 드롭다운 스타일 |
form-control | URL 및 속성/대상 값을 입력하는 텍스트 필드 스타일 |
table-responsive | 표가 화면보다 넓을 때 가로 스크롤이 생기도록 감싸는 래퍼 |
table | 단언(조건) 목록을 표 형태로 표시하는 기본 테이블 스타일 |
mb-0 | 표 아래쪽 여백을 제거해 카드 바닥과 간격을 맞춤 |
mb-3 | 상단 메서드/URL 입력 그룹의 아래쪽 여백(margin-bottom) |
실전 예제 페이지
HandStack 웹 호스트(wwwroot 모듈)를 기동한 뒤 /sample/ui-library/서식-http-요청.html 경로에서 렌더링 결과를 확인할 수 있습니다.