[WEB-012][실무] 키보드로도 쓰는 반응형 할 일 웹앱 만들기
페이지 정보
본문
[이번 수업]
할 일을 추가·완료하는 웹앱을 한 파일로 만듭니다. 작은 화면, 키보드, 화면 읽기 도구에서도 같은 기능을 쓸 수 있게 합니다.
[선수지식]
WEB-001의 HTML, WEB-003의 반응형 설계, WEB-004의 접근성, WEB-005의 DOM, WEB-006의 폼을 알면 좋습니다.
[학습목표]
1. 의미에 맞는 폼과 목록으로 화면을 구성한다.
2. 키보드 초점과 동적 상태 알림을 제공한다.
3. 좁은 화면에서 입력 영역을 한 열로 바꾼다.
[핵심개념]
접근성은 같은 기능을 여러 입력·출력 방식으로 쓰게 하는 품질입니다. label은 입력 이름을 연결하고, `role="status"`는 추가·완료 결과를 알립니다. `:focus-visible`은 키보드 초점 위치를 보여 줍니다.
반응형 설계는 화면 폭에 맞춰 배치를 바꾸는 방법입니다. 예제는 입력과 버튼을 나란히 두고 30rem 이하에서는 한 열로 쌓습니다. 기능은 폭과 관계없이 같아야 합니다.
[따라하기]
index.html을 만들고 붙여 넣으세요.
```html
<!doctype html>
<html lang="ko">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>오늘 할 일</title>
<style>
*{box-sizing:border-box}
body{margin:0;font:1rem system-ui}
main{width:min(40rem,calc(100% - 2rem));margin:3rem auto}
.controls{display:grid;grid-template-columns:1fr auto;gap:.5rem}
input,button{min-height:44px;padding:.7rem;font:inherit}
:focus-visible{outline:3px solid #075985;outline-offset:2px}
li{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0}
@media(max-width:30rem){.controls{grid-template-columns:1fr}}
</style>
<main>
<h1>오늘 할 일</h1>
<form id="form">
<label for="task">새 할 일</label>
<div class="controls"><input id="task" maxlength="50" required><button>추가</button></div>
</form>
<p id="message" role="status"></p>
<ul id="tasks" aria-label="할 일 목록"></ul>
</main>
<script>
const $=id=>document.getElementById(id);
const form=$("form"),input=$("task"),list=$("tasks"),message=$("message");
form.addEventListener("submit",event=>{
event.preventDefault();
const text=input.value.trim();
if(!text)return input.focus();
const item=document.createElement("li");
const done=document.createElement("button");
done.type="button";
done.textContent="완료";
done.setAttribute("aria-label",`완료: ${text}`);
done.addEventListener("click",()=>{
item.remove();
message.textContent=`${text} 완료`;
input.focus();
});
item.append(text,done);
list.append(item);
message.textContent=`${text} 추가`;
form.reset();
input.focus();
});
</script>
</html>
```
macOS·Linux는 `python3 -m http.server 8000 --bind 127.0.0.1`, Windows는 `py -m http.server 8000 --bind 127.0.0.1`을 실행하고 `http://127.0.0.1:8000`을 여세요. 할 일을 추가하면 목록과 완료 버튼이 생기고 완료하면 사라집니다. Tab과 Enter로 조작하고 창 폭을 줄여 한 열 배치도 확인하세요. 서버는 Ctrl+C로 끝냅니다.
[흔한 실수]
placeholder만으로 입력 이름을 대신하거나 초점 테두리를 없애지 마세요. 좁은 화면의 가로 스크롤과 동적 결과가 글로 전달되는지도 확인합니다.
[보안 주의]
사용자 문자열은 `innerHTML`이 아니라 `textContent`와 `append`로 넣습니다. maxlength와 required는 편의 기능이므로 서버에서도 다시 검증해야 합니다. 개인정보 없이 본인 소유 로컬 환경에서만 실습하세요.
[직접 해볼 과제]
모든 할 일을 지우는 버튼을 추가하세요. 목록이 비면 비활성화하고 실행 결과를 상태 영역에 알리세요.
[확인문제]
1. label과 input을 연결해야 하는 이유는 무엇인가요?
2. 상태 영역은 바뀐 결과를 어떻게 전달하나요?
3. textContent가 사용자 입력 표시에 더 안전한 이유는 무엇인가요?
[다음 학습]
BACK-012에서 이 화면이 사용할 테스트 가능한 API를 만듭니다.
[공식 참고 자료]
https://www.w3.org/TR/WCAG22/
https://www.w3.org/WAI/tutorials/forms/labels/
https://www.w3.org/TR/mediaqueries-5/
https://dom.spec.whatwg.org/#dom-node-textcontent
할 일을 추가·완료하는 웹앱을 한 파일로 만듭니다. 작은 화면, 키보드, 화면 읽기 도구에서도 같은 기능을 쓸 수 있게 합니다.
[선수지식]
WEB-001의 HTML, WEB-003의 반응형 설계, WEB-004의 접근성, WEB-005의 DOM, WEB-006의 폼을 알면 좋습니다.
[학습목표]
1. 의미에 맞는 폼과 목록으로 화면을 구성한다.
2. 키보드 초점과 동적 상태 알림을 제공한다.
3. 좁은 화면에서 입력 영역을 한 열로 바꾼다.
[핵심개념]
접근성은 같은 기능을 여러 입력·출력 방식으로 쓰게 하는 품질입니다. label은 입력 이름을 연결하고, `role="status"`는 추가·완료 결과를 알립니다. `:focus-visible`은 키보드 초점 위치를 보여 줍니다.
반응형 설계는 화면 폭에 맞춰 배치를 바꾸는 방법입니다. 예제는 입력과 버튼을 나란히 두고 30rem 이하에서는 한 열로 쌓습니다. 기능은 폭과 관계없이 같아야 합니다.
[따라하기]
index.html을 만들고 붙여 넣으세요.
```html
<!doctype html>
<html lang="ko">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>오늘 할 일</title>
<style>
*{box-sizing:border-box}
body{margin:0;font:1rem system-ui}
main{width:min(40rem,calc(100% - 2rem));margin:3rem auto}
.controls{display:grid;grid-template-columns:1fr auto;gap:.5rem}
input,button{min-height:44px;padding:.7rem;font:inherit}
:focus-visible{outline:3px solid #075985;outline-offset:2px}
li{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0}
@media(max-width:30rem){.controls{grid-template-columns:1fr}}
</style>
<main>
<h1>오늘 할 일</h1>
<form id="form">
<label for="task">새 할 일</label>
<div class="controls"><input id="task" maxlength="50" required><button>추가</button></div>
</form>
<p id="message" role="status"></p>
<ul id="tasks" aria-label="할 일 목록"></ul>
</main>
<script>
const $=id=>document.getElementById(id);
const form=$("form"),input=$("task"),list=$("tasks"),message=$("message");
form.addEventListener("submit",event=>{
event.preventDefault();
const text=input.value.trim();
if(!text)return input.focus();
const item=document.createElement("li");
const done=document.createElement("button");
done.type="button";
done.textContent="완료";
done.setAttribute("aria-label",`완료: ${text}`);
done.addEventListener("click",()=>{
item.remove();
message.textContent=`${text} 완료`;
input.focus();
});
item.append(text,done);
list.append(item);
message.textContent=`${text} 추가`;
form.reset();
input.focus();
});
</script>
</html>
```
macOS·Linux는 `python3 -m http.server 8000 --bind 127.0.0.1`, Windows는 `py -m http.server 8000 --bind 127.0.0.1`을 실행하고 `http://127.0.0.1:8000`을 여세요. 할 일을 추가하면 목록과 완료 버튼이 생기고 완료하면 사라집니다. Tab과 Enter로 조작하고 창 폭을 줄여 한 열 배치도 확인하세요. 서버는 Ctrl+C로 끝냅니다.
[흔한 실수]
placeholder만으로 입력 이름을 대신하거나 초점 테두리를 없애지 마세요. 좁은 화면의 가로 스크롤과 동적 결과가 글로 전달되는지도 확인합니다.
[보안 주의]
사용자 문자열은 `innerHTML`이 아니라 `textContent`와 `append`로 넣습니다. maxlength와 required는 편의 기능이므로 서버에서도 다시 검증해야 합니다. 개인정보 없이 본인 소유 로컬 환경에서만 실습하세요.
[직접 해볼 과제]
모든 할 일을 지우는 버튼을 추가하세요. 목록이 비면 비활성화하고 실행 결과를 상태 영역에 알리세요.
[확인문제]
1. label과 input을 연결해야 하는 이유는 무엇인가요?
2. 상태 영역은 바뀐 결과를 어떻게 전달하나요?
3. textContent가 사용자 입력 표시에 더 안전한 이유는 무엇인가요?
[다음 학습]
BACK-012에서 이 화면이 사용할 테스트 가능한 API를 만듭니다.
[공식 참고 자료]
https://www.w3.org/TR/WCAG22/
https://www.w3.org/WAI/tutorials/forms/labels/
https://www.w3.org/TR/mediaqueries-5/
https://dom.spec.whatwg.org/#dom-node-textcontent
- 이전글[BACK-012][실무] 테스트로 확인하는 할 일 API 만들기 26.09.06
- 다음글[JSTS-012][실무] 타입으로 지키는 작은 상태 확인 서비스 만들기 26.09.06
댓글목록
등록된 댓글이 없습니다.