250204 오전 복습

✅ 폼과 화면 배치 정리

---

📌 1. 폼 관련 개념

🔹 disabled vs readonly

속성	전송 여부	수정 가능 여부
readonly	✅ (서버로 전송됨)	❌ (사용자가 수정 불가)
disabled	❌ (서버로 전송되지 않음)	❌ (사용자가 수정 불가)

• readonly: 값은 유지되지만 사용자가 변경할 수 없음.
• disabled: 값이 아예 전송되지 않으며 폼에서 제외됨.

---

🔹 모든 폼 데이터는 String 타입으로 전송됨

• request.getParameter("name")으로 가져온 값은 항상 String이다.
• 숫자(int, double)로 사용하려면 변환 필요.

  int age = Integer.parseInt(request.getParameter("age"));

---

🔹 isNaN() (is Not a Number)

• 숫자가 아닌 값이 입력되었는지 검사하는 JavaScript 함수.
• 숫자 값만 입력해야 하는 곳에 문자 입력 시 발생할 수 있음.

✅ 사용 예제

console.log(isNaN(123));   // false (숫자임)
console.log(isNaN("abc")); // true (문자열이라 숫자가 아님)
console.log(isNaN("123")); // false (문자열이지만 숫자로 변환 가능)

---

📌 2. Bootstrap 5 Grid System

✔ 디바이스 크기에 따라 화면을 조정하는 방식
✔ 컬럼 크기 클래스 (col-, col-sm-, col-md- 등)를 사용해 반응형 디자인 적용

🔹 디바이스 크기별 col- 클래스

클래스	대상 디바이스	화면 너비
.col-	Extra small (모바일)	< 576px
.col-sm-	Small (작은 태블릿)	≥ 576px
.col-md-	Medium (태블릿)	≥ 768px
.col-lg-	Large (데스크톱)	≥ 992px
.col-xl-	Extra large (큰 화면)	≥ 1200px
.col-xxl-	Extra extra large (초고해상도)	≥ 1400px

✅ 예제

<div class="row">
    <div class="col-sm-3"></div>  <!-- 작은 화면에서 3칸 차지 -->
    <div class="col-sm-6">가운데</div>  <!-- 작은 화면에서 6칸 차지 -->
    <div class="col-sm-3"></div>  <!-- 작은 화면에서 3칸 차지 -->
</div>

---

📌 3. Bootstrap container vs container-fluid

클래스	설명
container	약간의 마진이 있는 고정 폭 컨테이너
container-fluid	화면 너비에 꽉 차는 컨테이너

✅ 예제

<div class="container">고정 폭 컨테이너</div>
<div class="container-fluid">전체 화면 너비 컨테이너</div>

---

📌 4. row는 몇 줄까지 가능할까?

✔ <div class="row">는 Bootstrap에서 하나의 수평 행(row)을 의미하며, 개수 제한 없이 여러 개 사용할 수 있음.
✔ 너무 많은 row를 사용하면 렌더링 속도에 영향을 줄 수 있으므로 적절하게 배치하는 것이 중요함.

✅ 예제

<div class="row">
    <div class="col">첫 번째 줄</div>
</div>
<div class="row">
    <div class="col">두 번째 줄</div>
</div>
<div class="row">
    <div class="col">세 번째 줄</div>
</div>

---

✅ 최종 정리

✔ 폼 전송 시 모든 값은 String 타입이며, 숫자는 변환해야 한다.
✔ disabled 필드는 전송되지 않고, readonly 필드는 전송된다.
✔ isNaN()을 사용하면 숫자가 아닌 값이 입력되었는지 확인할 수 있다.
✔ Bootstrap 5의 Grid System을 사용하면 반응형 화면을 쉽게 만들 수 있다.
✔ container-fluid는 화면 전체를 사용하고, container는 마진이 있는 고정 크기 컨테이너다.
✔ row의 개수 제한은 없지만 성능을 고려하여 적절히 사용해야 한다. 🚀