단원 연습 문제

Enter가 무엇을 하는지 정한 뒤, 칸 둘의 name과 값을 차례로 적어 보세요.

값을 비워 둔 칸도 name이 있습니다. 그 칸이 주소에서 빠지는지, 빈 값으로 붙는지 따져 봅니다.

받는 답: ?item=egg&max=

• 글자 칸에서 Enter를 누르면 그 폼의 제출 단추를 누른 것과 같습니다 — 폼이 칸의 값을 모아 find.html로 떠납니다(브라우저 규칙 1).
• 비운 칸도 name이 있으면 max=처럼 빈 값으로 붙습니다.
• '떠나지 않음'은 글자 칸의 Enter는 줄바꿈이나 아무 일도 아니라고 본 것입니다. 여러 줄 글 칸(textarea)이 아니면 Enter는 제출입니다.
• ?item=egg만 쓴 것은 비운 칸은 보내지지 않는다고 본 것입니다.

다시 볼 레슨: 폼과 제출 · name과 value

칸마다 name과 친 값을 나란히 적어 보세요.

name이 없는 칸은 주소에 어떻게 되는지, 값 안의 빈칸이 주소에서 어떤 기호가 되는지 떠올려 봅니다.

받는 답: ?who=tom+lee&drink=hot+tea

• 주소에 붙는 것은 name이 있는 칸의 이름=값이고, 칸 사이는 &, 값 안의 빈칸은 +입니다.
• 연락처 칸은 id만 있고 name이 없어 건너뜁니다. id는 라벨과 CSS가 찾는 이름표일 뿐, 보낼 이름이 아닙니다.
• tel=0101234를 넣은 것은 id가 있으면 보내진다고 본 것입니다.
• tom lee처럼 빈칸을 그대로 쓴 것은 띄어쓰기가 그대로 간다고 본 것입니다.

다시 볼 레슨: name과 value

두 칸마다 짝지은 label이 있는지 보세요.

칸에 글이 들어가면 회색 보기 글이 어떻게 되는지 떠올려 봅니다.

(가) 이름 · 연락처 · (나) 이름 칸

• 라벨이 없는 칸에는 크롬이 placeholder 글을 읽는 이름으로 씁니다. 그래서 읽는 이름만 보면 두 칸이 같아 보입니다.
• 하지만 placeholder는 칸이 비었을 때만 보이는 보기 글입니다. 잰 값의 :placeholder-shown 꺼짐⁠은 보기 글이 지금 안 보인다는 뜻입니다 — 글을 친 연락처 칸은 무엇을 적던 칸인지 화면에서 사라졌습니다. 라벨 '이름'은 치는 동안에도 남습니다.
• (나)에 연락처 칸도 넣은 것은 placeholder가 라벨처럼 늘 남는다고 본 것입니다(placeholder가 라벨이라는 생각).
• 연락처 칸에도 <label for="ph">연락처</label>⁠을 붙이고, 보기 글은 '예: 010…'처럼 보기로만 씁니다.

다시 볼 레슨: label로 칸에 이름 붙이기

두 라벨의 for와 두 칸의 id를 줄마다 나란히 적어 보세요.

같은 id가 둘일 때 for="d"가 어느 칸을 찾을지 정하세요. 같은 id 둘에 # 링크를 걸면 어디로 갔는지 떠올려 봅니다.

받는 답: (가) 출발일 칸 · (나) 없음

잰 값 첫 줄은 '도착일' 글자를 누른 뒤 포커스가 간 칸 — 출발일 칸의 이름이고, 둘째 줄은 도착일 칸을 잰 것입니다.

• for="d"는 id가 d인 첫 요소를 찾습니다 — 같은 id 둘에 건 # 링크가 앞쪽으로 가는 것과 같습니다. 그래서 라벨 둘이 모두 출발일 칸에 붙어, '도착일' 글자를 눌러도 출발일 칸이 골라집니다.
• 도착일 칸에는 짝지은 라벨이 없어 읽는 이름이 빕니다.
• 라벨 둘이 한 칸에 붙으면 크롬은 두 라벨 글을 이어 그 칸의 이름으로 씁니다. 잰 값 첫 줄의 '출발일 도착일'이 그것입니다.
• id는 한 페이지에 하나뿐인 이름표입니다. 둘째 칸을 id="d2"로, 둘째 라벨을 for="d2"로 고칩니다. 검사기도 같은 id를 Error로 잡습니다.
• (가)에 도착일 칸, (나)에 '도착일'을 쓴 것은 라벨이 저마다 바로 뒤 칸에 붙는다고 본 것입니다. 라벨의 짝은 자리가 아니라 for와 id가 정합니다.

다시 볼 레슨: id와 class · label로 칸에 이름 붙이기

체크박스를 고른 때와 고르지 않은 때를 나눠, 칸마다 name과 보낼 값을 적어 보세요.

체크박스의 value가 비었을 때 보내지는 값과, 고르지 않은 체크박스가 주소에 남는지를 따로 따져 보세요.

(가) ?nm=jiho&agree=on · (나) ?nm=jiho

체크박스를 고르지 않고 보낸 뒤입니다.

<form>
  <label for="nm">이름</label>
  <input id="nm" name="nm" />
  <input
    type="checkbox"
    id="ag"
    name="agree"
  />
  <label for="ag">
    사진 올려도 됨
  </label>
  <button>보내기</button>
</form>

• 체크박스 · 라디오는 고른 것만 보내고, 보내는 값은 value입니다. value를 적지 않으면 브라우저가 on을 보냅니다 — 받는 쪽은 무엇을 골랐는지 알기 어렵습니다. value="yes"처럼 적어 둡니다.
• (가)에 라벨 글을 값으로 쓴 것은 라벨이 보내진다고 본 것입니다. 보내지는 것은 늘 value입니다.
• (나)에 agree=을 붙인 것은 체크박스도 비운 글자 칸처럼 빈 값으로 간다고 본 것입니다. 고르지 않은 체크박스는 아예 빠집니다.

다시 볼 레슨: 입력 칸의 종류 · name과 value

<textarea …> 바로 뒤부터 </textarea> 바로 앞까지의 글자를 빈칸 · 줄바꿈까지 하나하나 적어 보세요.

여러 줄 글 칸 안의 빈칸과 줄바꿈도 문단처럼 하나로 합쳐질까요?

② — 첫 줄에 두 칸 띄고 '맛있어요'가 보입니다.

• textarea 안의 빈칸과 줄바꿈은 합쳐지지 않고 그대로 칸 안 글이 됩니다(브라우저 규칙 2의 예외). 여는 태그 바로 뒤 줄바꿈 하나만 버리니, 둘째 줄의 두 칸 들임과 '맛있어요' 뒤 줄바꿈이 남습니다. 그대로 보내지기도 합니다.
• 그래서 textarea는 줄 나누기 꼴로 나누지 않고 > 바로 뒤에 글을 붙여 씁니다 — ①이 그렇게 쓴 화면입니다.
• ①은 칸 안도 문단처럼 빈칸이 합쳐진다고 본 것입니다.
• ③은 처음 글은 value 속성에만 적는다고 본 것입니다. textarea의 처음 글은 태그 사이에 씁니다.

다시 볼 레슨: 여러 줄 글과 고르는 칸 · 공백 규칙과 특수 문자

select의 name과, 고른 option 줄에 적힌 것을 따로 적어 보세요.

고른 option에 value가 없을 때 무엇이 값으로 가는지 떠올려 봅니다.

받는 답: ?helmet=M

• select는 name="helmet"으로 고른 option의 value를 보냅니다. value를 적지 않으면 그 option의 화면 글 'M'이 값이 됩니다.
• 화면 글이 한글이면 % 꼴로 길게 가니, 받는 쪽이 쓸 값은 value로 적어 둡니다.
• ?helmet=로 쓴 것은 value가 없으면 빈 값이 간다고 본 것입니다.
• ?hm=M으로 쓴 것은 id가 보낼 이름이라고 본 것입니다.

다시 볼 레슨: 여러 줄 글과 고르는 칸 · name과 value

두 칸의 검사 속성을 보고, '신청'을 누른 뒤 브라우저가 하는 일을 차례로 적어 보세요.

(가) 떠나지 않는다 · (나) 이름 · (다) ①

• required인 칸이 비면 브라우저가 제출을 막고, 잘못된 칸 가운데 첫 칸 하나로 포커스를 옮겨 말풍선을 띄웁니다. 둘째 칸은 첫 칸을 채운 뒤 다시 누르면 말풍선이 뜹니다.
• ②는 숫자 칸의 min이 띄우는 말풍선입니다. 이 폼에는 min이 없습니다.
• ③은 잘못된 칸마다 한꺼번에 말풍선이 뜬다고 본 것입니다.
• 말풍선 글은 브라우저와 언어마다 다릅니다 — 이 글은 크롬 한국어 기준입니다. 결과 화면에서는 눌러도 말풍선이 뜨지 않으니, 내 파일에서 눌러 봅니다.

다시 볼 레슨: 브라우저가 해 주는 검사

button 여는 태그에 type이 적혀 있는지 보세요.

폼 안에서 type을 적지 않은 단추는 어떤 단추로 치는지 떠올려 봅니다.

받는 답: ?q=bike

• 폼 안의 button은 type을 적지 않으면 제출 단추입니다. 이름이 '지도 보기'여도 누르면 칸의 값을 들고 떠납니다(브라우저 규칙 1). 새로 불려 온 페이지의 칸은 비어 있습니다.
• 나중에 JavaScript가 할 일을 붙일 단추처럼, 보내지 않을 단추는 type="button"으로 적습니다.
• '떠나지 않음'은 단추가 누르면 제 이름대로의 일만 한다고 본 것입니다(단추는 조용하다는 생각).

다시 볼 레슨: 단추의 type · 폼과 제출

세 선언을 한 줄씩 따로 보고, 값마다 단위나 꼴이 맞는지 보세요.

(가) 글자색 #ffffff · 바탕색 #005bb5 · (나) 취소선이 그어지고 ⚠가 붙는다 — 글자 크기는 기본 스타일 그대로다

• font-size의 길이에는 단위가 있어야 합니다. 16처럼 단위 없는 값은 알아듣지 못해 그 선언 한 줄만 버립니다(브라우저 규칙 4). 뒤의 두 선언은 그대로 닿습니다.
• 버린 선언은 Styles 창에서 취소선이 그어지고 ⚠가 붙습니다. 잰 값의 font-size 선언 (없음)은 브라우저가 그 선언을 남기지 않았다는 뜻입니다.
• 그래서 단추 글자 크기는 기본 스타일 그대로입니다. 단추의 기본 글자는 본문보다 작아(글자 배율 0.83), 본문만 하게 하려면 16px로 씁니다.
• (가)에 기본 색(흰 바탕 · 검은 글자)을 쓴 것은 틀린 줄 아래 선언이 모두 버려진다고 본 것입니다(CSS도 멈춘다는 생각).
• (나)에 '본문만 하게'를 쓴 것은 브라우저가 단위 없는 16을 16px로 알아서 읽는다고 본 것입니다.

다시 볼 레슨: 규칙의 모양 · 색 쓰기 · 브라우저 기본 스타일과 Styles 창

(다)는 묶는 요소와 물음 글을 적는 요소, 둘을 씁니다.

받는 답: (가) label · (나) name · (다) fieldset과 legend · (라) reset

• (가)에 placeholder를 쓰면 다른 답입니다 — 칸이 비었을 때만 보이는 보기 글입니다.
• (나)에 id를 쓰면 다른 답입니다 — id는 라벨과 CSS가 찾는 이름표입니다.
• (다)에 fieldset 하나만 써도 반은 맞습니다. 물음 글은 그 안 맨 처음의 legend에 씁니다.
• (라)에 button을 쓰면 다른 답입니다 — type="button"은 아무것도 하지 않는 단추입니다.

다시 볼 레슨: label로 칸에 이름 붙이기 · name과 value · 여러 줄 글과 고르는 칸 · 단추의 type

검사기의 첫 Error가 가리키는 줄과, 그 줄의 끝 기호를 보세요.

/>로 끝내도 되는 요소는 안에 아무것도 담지 않는 빈 요소(img · input)뿐입니다. textarea는 처음 글을 태그 사이에 담는 요소입니다.

받는 답: 1번 줄을 <textarea></textarea>⁠로 고칩니다.

<textarea></textarea>
<button>보내기</button>

'안 먹을 때 찾는 차례'의 2번 '요소가 나무에 내 생각대로 있나'에서 찾습니다.

• 1번은 지나갑니다 — 칸은 그려졌으니 파일은 열렸습니다.
• 2번 — 검사기 첫 줄이 '빈 요소가 아닌 요소에 />를 썼다 — 빗금을 버리고 여는 태그로 친다'고 알려 줍니다. 브라우저는 멈추지 않고 <textarea>를 연 채로 두어, 그 뒤의 글자를 모두 칸 안의 처음 글로 읽었습니다. 단추는 나무에 요소로 지어지지 않았습니다(브라우저 규칙 2). 나머지 Error 둘은 이 하나에서 이어진 것입니다.
• textarea는 여는 태그와 닫는 태그를 짝으로 씁니다. 처음 글이 없으면 둘을 붙여 씁니다.

<textarea />
<button>보내기</button>

고치기 전의 나무입니다. < · >는 칸 안 글이 된 < · >이고, 파일 끝의 </body> · </html>까지 칸 안 글이 되었습니다.

• 흔한 오답은 /만 지워 <textarea>로 두는 것입니다. 빗금은 원래 버려지니 아무것도 바뀌지 않습니다.
• 닫는 태그를 다음 줄에 두는 것(<textarea> 다음 줄 </textarea>)은 칸이 비고 단추도 돌아옵니다. 여는 태그 바로 뒤의 줄바꿈 하나는 버려지기 때문입니다. 다만 그 사이에 빈칸이 들면 칸 안 글이 되니, 붙여 쓰는 꼴을 권합니다.

다시 볼 레슨: 여러 줄 글과 고르는 칸 · 요소 안의 요소 · 검사기로 틀린 HTML 찾기

3은 칸의 종류(type)와 꼭 채울 칸 표시, 둘을 떠올립니다.

모범 답입니다.

<form action="join.html">
  <label for="mail">
    메일
  </label>
  <input
    type="email"
    id="mail"
    name="mail"
    required
  />
  <button type="submit">
    가입
  </button>
</form>

말풍선 글은 크롬 한국어 기준입니다.

확인 목록을 다 채웠으면 맞습니다. 코드가 모범 답과 달라도 됩니다.

다르게 써도 되는 곳:

• input의 속성 차례(type · id · name · required)는 바꿔도 됩니다.
• 폼 안의 단추는 type을 적지 않아도 submit이라 type="submit"을 빼도 같은 결과입니다. 다만 무엇을 하는 단추인지 읽히게 적어 둡니다.
• 라벨 안에 칸을 넣어 감싸는 꼴(for · id 없이)도 읽는 이름이 '메일'입니다.

흔한 잘못:

• type="email"만 두고 required를 빠뜨리면 비운 칸은 그대로 보내집니다. 꼴 검사는 글이 있을 때만 합니다.
• 라벨의 for에 칸의 name 값을 적으면, name과 id가 다를 때 짝이 끊깁니다. 짝은 늘 id와 맞춥니다.
• 단추를 type="button"으로 쓰면 바른 메일을 쳐도 보내지지 않습니다.

다시 볼 레슨: label로 칸에 이름 붙이기 · name과 value · 브라우저가 해 주는 검사 · 단추의 type

5단원 연습 문제 13번의 모범 답입니다. recipe-note 폴더에 세 파일을 두고 시작합니다.

• index.html 받기
• kimchi.html 받기
• style.css 받기

recipe-note 안 images 폴더에 그림 여섯을 받아 둡니다 — 앞 단계에서 받았으면 그대로 씁니다.

• kimchi.svg 받기
• gyeran-mari.svg 받기
• doenjang.svg 받기
• tteokbokki.svg 받기
• japchae.svg 받기
• miyeok-guk.svg 받기

걸음마다 그 걸음의 확인 목록을 봅니다. 칸마다 라벨의 for와 칸의 id를 같은 글자로, 보낼 이름은 name으로 따로 적습니다.

모범 답 전체는 받기 파일입니다. 내 파일과 견줘 봅니다.

• index.html 받기
• kimchi.html 받기
• style.css 받기

걸음 1 ~ 3 — 후기 section(제목 h2 '후기 남기기' 아래) 안의 폼 뼈대입니다. div 셋은 차례로 이름 · 별점 · 한 줄 평이고, 칸마다 속성은 받기 파일에 있습니다.

<form>
  <div>…</div>
  <div>…</div>
  <div>…</div>
  <fieldset>
    <legend>
      다시 만들어 볼 건가요?
    </legend>
    …
  </fieldset>
  <button type="submit">
    후기 남기기
  </button>
</form>

별점 칸의 처음 줄과 다시 만들 의향의 첫 라디오입니다.

<label for="rating">
  별점
</label>
<select
  id="rating"
  name="rating"
>
  <option
    value="5"
    selected
  >
    5점
  </option>
  …
</select>

<input
  type="radio"
  id="again-yes"
  name="again"
  value="yes"
  required
/>
<label
  for="again-yes"
>
  네
</label>

걸음 4 — style.css 끝에 더한 규칙입니다.

<label for="nm">이름</label>
<input id="nm" />
<button type="submit">
  후기 남기기
</button>

label {
  font-weight: bold;
}

input {
  font-size: 16px;
}

select {
  font-size: 16px;
}

textarea {
  font-size: 16px;
}

button {
  background-color: #005bb5;
  color: #ffffff;
  font-size: 16px;
}

확인 목록을 다 채웠으면 맞습니다. 코드가 모범 답과 달라도 됩니다.

다르게 써도 되는 곳:

• 라벨 안에 칸을 넣어 감싸는 꼴로 써도 됩니다. 그 꼴이면 for · id가 없어도 짝입니다.
• select의 처음 고른 칸은 selected를 '5점'에 붙여도 되고, 아예 빼도 됩니다 — 아무것도 고르지 않았으면 맨 위 '5점'이 골라져 보입니다.
• 라디오 둘에 모두 required를 붙여도 됩니다. 묶음 가운데 하나에만 붙여도 묶음 전체가 꼭 고를 칸이 됩니다.

흔한 잘못:

• 라디오 둘의 name을 다르게 쓰면 둘 다 골라지고, 주소에 두 이름이 따로 붙습니다.
• option에 value를 빼면 '4점' 같은 화면 글이 % 꼴로 길게 갑니다(7번).
• textarea를 줄 나누기 꼴로 다음 줄에 닫으며 들여 쓰면, 들인 빈칸이 칸 안 글이 됩니다(6번).
• 단추 규칙에 font-size: 16;처럼 단위를 빠뜨리면 그 줄만 버려져 단추 글자가 작게 남습니다(10번).
• CSS에서 input, select, textarea⁠처럼 쉼표로 묶어도 같은 화면이 됩니다 — 8단원에서 배울 선택자 목록입니다. 다만 쉼표 하나를 빠뜨리면 전혀 다른 뜻이 되니 그때 자세히 봅니다.

폰 물음의 답은 ㉢ ㉣ ㉡ ㉠입니다. 주소의 조각은 폼 안 칸의 차례대로 붙습니다 — 받기 파일을 열어 보내면 주소 끝이 ?nickname=haneul로 시작해 &again=yes로 끝납니다.

다시 볼 레슨: 폼과 제출 · name과 value · label로 칸에 이름 붙이기 · 입력 칸의 종류 · 여러 줄 글과 고르는 칸 · 단추의 type · 글자 꾸미기