프론트엔드 스터디 대면 2주차: 폼(Form), CSS 선택자, 그리고 박스 모델

<form action="/signup" method="post">
  <input type="text" name="username" />
  <input type="password" name="password" />
  <button type="submit">회원가입</button>
</form>

<!-- name이 없어서 서버로 전송 안 됨 -->
<input type="text" />

<!-- name이 있어서 서버에 username=입력값 형태로 전송 -->
<input type="text" name="username" />

<!-- label을 클릭하면 id="email" input에 포커스 -->
<label for="email">이메일 주소</label>
<input type="email" id="email" name="email" />

<!-- 체크박스: label 클릭으로 체크/해제 가능 -->
<input type="checkbox" id="agree" name="agree" />
<label for="agree">이용약관에 동의합니다</label>

<!-- 태그 사이의 개행/공백이 초기값으로 들어감 -->
<textarea name="content"> </textarea>

<!-- 이렇게 붙여써야 빈 상태로 시작함 -->
<textarea name="content"></textarea>

const value = document.querySelector("textarea").value;
// 사용자가 입력한 값: "\n안녕하세요\n"
console.log(value.trim()); // "안녕하세요"

/* 태그 선택자: 해당 태그 전부 선택 */
p {
  color: black;
}

/* 클래스 선택자: 마침표(.)로 시작, 여러 요소에 재사용 가능 */
.highlight {
  background: yellow;
}

/* 아이디 선택자: 샵(#)으로 시작, 페이지에서 딱 하나 */
#main-title {
  font-size: 2rem;
}

<nav>
  <ul>
    <li><a href="/">홈</a></li>
    <li>
      <div>
        <a href="/about">소개</a>
      </div>
    </li>
  </ul>
</nav>

/* 자손 결합자: nav 안의 모든 a를 선택 (깊이 무관) */
nav a {
  color: white;
}

/* 자식 결합자: nav의 직계 자식 a만 선택 (여기서는 해당 없음) */
nav > a {
  color: white;
}

/* 점수: 태그(1) + 클래스(10) = 11점 */
p.intro {
  color: blue;
}

/* 점수: 아이디(100) = 100점 → 이쪽이 이김 */
#welcome {
  color: red;
}

GET 요청:  https://example.com/search?q=프론트엔드&page=1
                                       ↑ 데이터가 URL에 노출

POST 요청: https://example.com/login
           Body: { username: "seojin", password: "1234" }
                  ↑ 데이터가 본문에 숨겨짐

<fieldset>
  <legend>기본 정보</legend>
  <label for="name">이름</label>
  <input type="text" id="name" name="name" />
  <label for="email">이메일</label>
  <input type="email" id="email" name="email" />
</fieldset>

:root {
  --color-primary: #3b82f6;
  --color-text: #1f2937;
}

.btn {
  background: var(--color-primary);
  color: var(--color-text);
}

<!-- 필수 입력 + 최소 8자 + 영문/숫자만 허용 -->
<input
  type="text"
  name="username"
  required
  minlength="8"
  pattern="[a-zA-Z0-9]+"
  title="영문과 숫자만 사용 가능합니다"
/>

p {
  color: green;
}
.btn {
  color: red;
}
#submit {
  color: blue;
}

<p class="btn" id="submit">제출</p>

/* content-box: width(200) + padding×2(40) + border×2(10) = 실제 250px */
.box {
  width: 200px;
  padding: 20px;
  border: 5px solid;
}

/* border-box: 실제 너비 200px 고정, 콘텐츠 = 200 - 40 - 10 = 150px */
.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid;
}