목차

    불편함을 코드로 지웁니다.

    개발 공부 노트, 개발 도구와 문제를 해결한 과정, AI 프롬프트와 Obsidian 활용법을 정리합니다.

      ⏳ Time Log/TIL · 하루

      [TIL] Day 05 — Java 제어문(조건문/반복문) 및 HTML Form 요소

      this.Serena 2026. 2. 18. 23:33

      [TIL] Day 05 — Java 제어문(조건문/반복문) 및 HTML Form 요소

      날짜: 2025-10-24
      기술 스택: Java HTML CSS
      부트캠프: DevOps 개발자 부트캠프 1주차


      조건문

      // if / else if / else
      if (score >= 90) {
          System.out.println("A");
      } else if (score >= 80) {
          System.out.println("B");
      } else {
          System.out.println("C");
      }
      
      // switch
      switch (day) {
          case 1: System.out.println("월요일"); break;
          case 2: System.out.println("화요일"); break;
          default: System.out.println("기타");
      }
      구분 if문 switch문
      비교 방식 범위/논리식 가능 단일 값 분기
      데이터 타입 모든 타입 정수, 문자열, enum
      성능 조건 많으면 O(n) jump table로 빠름

      반복문

      // for — 횟수 알 때
      for (int i = 1; i <= 10; i++) {
          System.out.println(i);
      }
      
      // while — 횟수 모를 때
      int i = 1;
      while (i <= 10) {
          System.out.println(i++);
      }
      
      // do-while — 최소 1회 보장
      do {
          System.out.println(i++);
      } while (i <= 10);

      1~100 짝수 합계

      int sum = 0;
      for (int i = 2; i <= 100; i += 2) {
          sum += i;
      }
      System.out.println(sum); // 2550

      구구단 (중첩 for)

      for (int i = 2; i <= 9; i++) {
          for (int j = 1; j <= 9; j++) {
              System.out.println(i + " x " + j + " = " + (i * j));
          }
      }
      반복문 사용 시점
      for 반복 횟수를 알 때
      while 반복 횟수 모를 때
      do-while 최소 1회 실행 보장이 필요할 때

      제어 키워드

      • break: 반복문/switch 즉시 탈출
      • continue: 현재 회차 건너뛰고 다음 반복

      Math.random()

      // 1~100 사이 난수
      int number = (int)(Math.random() * 100) + 1;
      // 원리: Math.random() 리턴 범위 [0.0, 1.0)
      // * 100 → [0.0, 100.0), (int) 캐스팅 → 0~99, +1 → 1~100

      HTML Form 핵심 요소

      <form method="post" action="/submit">
          <label for="name">이름:</label>
          <input type="text" id="name" name="name" placeholder="이름 입력" required>
          <input type="radio" name="gender" value="M"> 남성
          <input type="radio" name="gender" value="F"> 여성
          <input type="checkbox" name="agree" value="yes" checked> 동의
          <select name="city">
              <option value="seoul">서울</option>
              <option value="busan">부산</option>
          </select>
          <textarea name="memo" rows="4"></textarea>
          <input type="submit" value="제출">
      </form>
      속성 역할
      method="post" 주소창에 데이터 노출 안 함
      method="get" 주소창에 노출 (기본값)
      name 서버에 전송되는 키 (필수)
      placeholder 입력 힌트
      required 입력 필수화
      autofocus 페이지 로드 시 커서 자동 위치
      readonly 읽기 전용
      disabled 비활성화

      CSS 적용 우선순위

      !important > 인라인 style(1000) > #id(100) > .class(10) > tag(1)

      적용 순서 (소스 기준)

      인라인 style > 임베디드 <style> > 외부 <link> 파일

      선택자 우선순위 점수

      선택자 점수
      인라인 style 1000
      #id 100
      .class 10
      tag 1

      트러블슈팅

      무한루프 방지

      • while(true) 사용 시 반드시 break 조건 작성
      • 실수 == 비교 위험: 0.1 + 0.2 == 0.3 → false. 실수 비교는 Math.abs(a-b) < 0.0001 활용

      radio/checkbox 선택 값 수신

      • radio는 같은 name 속성으로 묶어야 단일 선택 동작
      • checkbox value가 없으면 서버에 "on" 전송됨

      더 알아볼 것

      • switch + enum 조합 패턴 (상태 머신, State Machine)
      • break 라벨(label) 사용법 (중첩 반복문 탈출)
      • CSS Specificity 점수 계산 실전 연습
      • HTML Form POST vs GET 활용 시나리오 (보안, SEO)
      • Math.random() 범위 제어 공식 구조 심화