상품 등록 - add.jsp

•

타이틀 영역

•

폼 영역

◦

컨테이너

◦

입력

▪

파일

▪

텍스트

▪

라디오

◦

버튼

타이틀 영역

<div class="px-4 py-5 my-5 text-center">
	<h1 class="display-5 fw-bold text-body-emphasis">상품 등록</h1>
	<div class="col-lg-6 mx-auto">
		<p class="lead mb-4">Shop 쇼핑몰 입니다.</p>
	</div>
</div>
HTML
복사

•

<div class="px-4 py-5 my-5 text-center">:

◦

px-4: 요소의 좌우 패딩을 추가합니다.

◦

py-5: 요소의 상하 패딩을 추가합니다.

◦

my-5: 요소의 상하 마진을 추가합니다.

◦

text-center: 텍스트를 중앙 정렬합니다.

•

<h1 class="display-5 fw-bold text-body-emphasis">상품 등록</h1>:

◦

display-5: 큰 크기의 텍스트 스타일을 적용합니다.

◦

fw-bold: 텍스트를 굵게 만듭니다.

◦

text-body-emphasis: 텍스트에 강조 스타일을 적용합니다.

◦

상품 등록: 제목 텍스트입니다.

•

<div class="col-lg-6 mx-auto">:

◦

col-lg-6: 큰 화면에서 너비를 6 컬럼으로 설정합니다.

◦

mx-auto: 좌우 마진을 자동으로 설정하여 중앙에 배치합니다.

•

<p class="lead mb-4">Shop 쇼핑몰 입니다.</p>:

◦

lead: 중요한 텍스트를 강조하는 스타일을 적용합니다.

◦

mb-4: 요소의 하단 마진을 추가합니다.

◦

Shop 쇼핑몰 입니다.: 설명 텍스트입니다.

폼 영역

•

컨테이너

•

입력

◦

파일

◦

텍스트

◦

라디오

•

버튼

컨테이너

<!-- 상품 등록 입력 화면 -->
<div class="container shop">
	<!-- 입력 양식 -->
</div>
HTML
복사

이 div 요소는 container와 shop이라는 두 개의 클래스를 가지고 있습니다. 이 클래스들은 CSS에서 스타일을 지정하는 데 사용됩니다.

html class 속성에는 띄어쓰기로 구분하여 여러 클래스 속성값을 지정할 수 있습니다.

container 속성값은 bootstrap CSS 프레임워크에 정의된 클래스 속성값으로 아래 페이지에서 더 자세한 설명을 볼 수 있습니다.

Container

container 클래스 특징

•

고정 너비: container 클래스는 다양한 화면 크기에 따라 고정된 최대 너비를 가집니다.

•

중앙 정렬: container 클래스는 기본적으로 좌우 마진을 자동으로 설정하여 콘텐츠를 중앙에 배치합니다.

•

반응형: 화면 크기에 따라 너비가 자동으로 조정됩니다.

Bootstrap 5의 container 클래스는 다음과 같은 최대 너비를 가집니다:

•

최소 너비 576px 이하: 100% 너비

•

최소 너비 576px 이상: 540px

•

최소 너비 768px 이상: 720px

•

최소 너비 992px 이상: 960px

•

최소 너비 1200px 이상: 1140px

•

최소 너비 1400px 이상: 1320px

이렇게 미리 가로 사이즈가 정해져 있기 때문에, 원하는 디자인 규격의 가로사이즈를 정하고 싶다면, 추가로 클래스 속성을 지정하고 style.css 에서 크기를 지정해주면 됩니다.

.container.shop {	max-width: 720px !important;  }
CSS
복사

위와 같이 종속 선택자로 아래 요소를 선택할 수 있습니다.

<div class="container shop"></div>
HTML
복사

여기에 max-width 를 지정하여 원하는 가로 사이즈를 적용합니다.

입력

•

파일

•

텍스트

•

라디오

•

버튼

입력 양식 태그 form 를 작성합니다.

<form name="product" action="./add_pro.jsp" onsubmit="return checkProduct()" method="post" enctype="multipart/form-data">

</form>
HTML
복사

•

name="product":

◦

폼의 이름을 지정합니다. 자바스크립트나 다른 스크립트에서 폼을 참조할 때 사용됩니다.

•

action="./add_pro.jsp":

◦

폼이 제출될 때 데이터를 처리할 서버 측 스크립트의 URL을 지정합니다. 여기서는 add_pro.jsp 파일로 데이터를 전송합니다.

•

onsubmit="return checkProduct()":

◦

폼이 제출되기 전에 실행될 자바스크립트 함수를 지정합니다. checkProduct() 함수가 true를 반환하면 폼이 제출되고, false를 반환하면 폼 제출이 중단됩니다. 이를 통해 폼 데이터의 유효성을 검사할 수 있습니다.

•

method="post":

◦

폼 데이터를 서버로 전송할 때 사용할 HTTP 메서드를 지정합니다. 여기서는 POST 메서드를 사용하여 데이터를 전송합니다. POST 메서드는 데이터를 URL에 포함하지 않고 본문에 포함하여 전송합니다.

•

enctype="multipart/form-data":

◦

폼 데이터를 인코딩하는 방식을 지정합니다. 파일 업로드를 포함한 폼 데이터를 전송할 때 사용됩니다. 이 속성이 없으면 파일 업로드가 제대로 작동하지 않습니다.

enctype="multipart/form-data"

속성이 필요한 경우는 form 태그 아래에 <input type=”file”> 파일 첨부 입력 태그를 사용할 때입니다.

라벨과 입력 양식이 어우러진 UI 를 작성합니다.

<div class="input-group mb-3 row">
	<label class="input-group-text col-md-2">라벨 이름</label>
	<input type="text" class="form-control col-md-10" name="파라미터 이름">
</div>	
HTML
복사

•

<div class="input-group mb-3 row">:

◦

input-group: 입력 그룹을 생성하여 여러 입력 요소를 하나의 그룹으로 묶습니다.

◦

mb-3: 하단 마진을 추가하여 요소 간의 간격을 만듭니다.

◦

row: Bootstrap의 그리드 시스템을 사용하여 행을 생성합니다.

•

<label class="input-group-text col-md-2" id="">라벨 이름</label>:

◦

input-group-text: 입력 그룹 내에서 텍스트를 표시하는 레이블을 생성합니다.

◦

col-md-2: 중간 크기 이상의 화면에서 레이블의 너비를 2 컬럼으로 설정합니다.

파일

<input type="file" class="form-control col-md-10" name="file">
HTML
복사

•

type="file": 파일 입력 필드를 생성합니다. 사용자가 파일을 선택할 수 있습니다.

•

form-control: Bootstrap의 입력 필드 스타일을 적용하여 일관된 디자인을 제공합니다.

•

col-md-10: 중간 크기 이상의 화면에서 입력 필드의 너비를 10 컬럼으로 설정합니다.

•

name="file": 서버로 전송될 때 파일 입력 필드의 이름을 지정합니다.

텍스트

<div class="input-group mb-3 row">
	<label class="input-group-text col-md-2">상품명</label>
	<input type="text" class="form-control col-md-10" name="name">
</div>
HTML
복사

라디오

<div class="input-group mb-3 row">
	<div class="col-md-2 p-0">
		<label class="input-group-text" id="">상태</label>
	</div>
	<div class="col-md-10 d-flex align-items-center">
		<div class="radio-box d-flex">
			<div class="radio-item mx-5">
				<input type="radio" class="form-check-input" name="condition" value="NEW" id="condition-new"> 
				<label for="condition-new">신규 제품</label>
			</div>
			
			<div class="radio-item mx-5">
				<input type="radio" class="form-check-input " name="condition" value="OLD" id="condition-old"> 
				<label for="condition-old">중고 제품</label>
			</div>
			
			<div class="radio-item mx-5">
				<input type="radio" class="form-check-input " name="condition" value="RE" id="condition-re"> 
				<label for="condition-re">재생 제품</label>
			</div>
		</div>
	</div>
</div>
HTML
복사

•

<div class="input-group mb-3 row">:

◦

input-group: 입력 그룹을 생성하여 여러 입력 요소를 하나의 그룹으로 묶습니다.

◦

mb-3: 하단 마진을 추가하여 요소 간의 간격을 만듭니다.

◦

row: Bootstrap의 그리드 시스템을 사용하여 행을 생성합니다.

•

<div class="col-md-2 p-0">:

◦

col-md-2: 중간 크기 이상의 화면에서 너비를 2 컬럼으로 설정합니다.

◦

p-0: 모든 패딩을 제거합니다.

•

<label class="input-group-text" id="">상태</label>:

◦

input-group-text: 입력 그룹 내에서 텍스트를 표시하는 레이블을 생성합니다.

◦

상태: 레이블에 표시되는 텍스트입니다.

•

<div class="col-md-10 d-flex align-items-center">:

◦

col-md-10: 중간 크기 이상의 화면에서 너비를 10 컬럼으로 설정합니다.

◦

d-flex: Flexbox 레이아웃을 사용하여 자식 요소를 배치합니다.

◦

align-items-center: 자식 요소를 수직 중앙에 정렬합니다.

•

<div class="radio-box d-flex">:

◦

d-flex: Flexbox 레이아웃을 사용하여 자식 요소를 배치합니다.

•

<div class="radio-item mx-5">:

◦

mx-5: 좌우 마진을 추가하여 요소 간의 간격을 만듭니다.

•

<input type="radio" class="form-check-input" name="condition" value="NEW" id="condition-new">:

◦

type="radio": 라디오 버튼 입력 필드를 생성합니다.

◦

class="form-check-input": Bootstrap의 라디오 버튼 스타일을 적용합니다.

◦

name="condition": 라디오 버튼 그룹의 이름을 지정합니다. 동일한 이름을 가진 라디오 버튼은 하나만 선택할 수 있습니다.

◦

value="NEW": 라디오 버튼의 값을 "NEW"로 설정합니다.

◦

id="condition-new": 라디오 버튼의 ID를 "condition-new"로 설정합니다.

•

<label for="condition-new">신규 제품</label>:

◦

for="condition-new": 라디오 버튼의 ID와 일치시켜 라벨을 클릭하면 해당 라디오 버튼이 선택되도록 합니다.

◦

신규 제품: 라벨에 표시되는 텍스트입니다.

버튼

bootstrap 버튼에 대한 자세한 설명은 아래 페이지에서 확인할 수 있습니다.

Buttons

상품 등록 화면에서 위와 같이 버튼을 양쪽 끝에 배치하여 만들어야 합니다.

이 때는 FLEX 레이아웃을 사용하면 쉽게 적용할 수 있습니다.

FLEX 레이아웃

CSS 의 FLEX 레이아웃에 대한 자세한 설명은 위의 페이지에서 확인할 수 있습니다.

Flex

CSS 의 FLEX 레이아웃을 bootstrap 을 통해서 쉽게 적용하려면, 위 페이지의 설명을 참조하면 좋겠습니다.

Bootstarp 으로 버튼양쪽 끝에 배치하기

d-flex 클래스로 flex 컨테이너 지정하기

주축의 정렬 기준을 justify-content-between 으로 설정하기

버튼 적용하기

d-flex 클래스로 flex 컨테이너 지정하기

<div class="d-flex justify-content-between mt-5 mb-5">

</div>
HTML
복사

•

d-flex: 이 div 요소를 Flex 컨테이너로 설정합니다. Flex 컨테이너는 자식 요소들을 행 또는 열 방향으로 배치할 수 있습니다.

•

주축의 정렬 기준을 justify-content-between 으로 설정하기

•

justify-content-between: 자식 요소들을 주 축(가로축) 양 끝에 배치하고, 그 사이에 동일한 간격을 둡니다.

•

mt-5: 상단 마진을 추가하여 요소 간의 간격을 만듭니다.

•

mb-5: 하단 마진을 추가하여 요소 간의 간격을 만듭니다.

버튼 적용하기

•

[목록] 버튼 : 목록 버튼은 상품 목록 페이지로 이동하는 링크입니다.

•

[등록] 버튼 : 등록 버튼은 form 요청을 제출하는 버튼입니다.

<a href="./products.jsp" class="btn btn-lg btn-secondary">목록</a>
<input type="submit" class="btn btn-lg btn-primary" value="등록" />
HTML
복사

두 버튼에 대해서 bootstrap 의 btn 클래스를 적용하여 버튼 모양을 만들어 줍니다.

<div class="d-flex justify-content-between mt-5 mb-5">
	<a href="./products.jsp" class="btn btn-lg btn-secondary">목록</a>
	<input type="submit" class="btn btn-lg btn-primary" value="등록" />
</div>
HTML
복사

위와 같이 FLEX 컨테이너 내의 아이템들은, 컨테이너에서 지정한 주축, 교차축의 정렬방식에 따라서 배치됩니다.

여기서는, justify-content-between 를 적용하였기 때문에 아래 두 버튼이 양쪽 끝에 배치됩니다.

이 bootstrap 클래스는 실제 CSS 의 아래와 같은 스타일 속성으로 적용됩니다.

justify-content : space-between;
CSS
복사