📚 부산디지털대학교 '웹프로그래밍' 7주차 강의노트를 바탕으로 정리한 학습 노트입니다. (출처는 글 하단 참고)

01 <input>의 입력 도우미 속성 4가지

autofocus · placeholder · readonly · required

<input> 태그에 속성 몇 개만 더하면 커서 위치, 힌트, 읽기 전용, 필수 입력까지 폼을 세밀하게 조정할 수 있습니다.

강의노트는 placeholder를 "텍스트 필드 앞에 제목을 사용하지 않고도 사용자에게 어떤 내용을 입력해야 할지 알려 줄 수 있어 편리한 기능"으로 설명합니다.

📖 보충 — placeholder가 label을 대신할 수는 없다
placeholder는 입력을 시작하면 사라지고, 화면 낭독기도 기본적으로 placeholder를 읽어 주지 않습니다. 그래서 MDN은 "placeholder를 <label> 대신 쓰면 사용성과 접근성을 해친다"고 안내합니다. 칸의 이름은 <label>로 붙이고, placeholder에는 입력 예시(예: 010-1234-5678)만 넣는 것이 권장 방식입니다.
(근거: MDN Web Docs, placeholder 속성 문서)

required는 불린 값(boolean value) 속성이라 이름만 적으면 켜집니다. 필수 필드는 브라우저가 직접 검사하므로 오류 메시지 문구는 브라우저마다 다릅니다.

입력 도우미 속성 4가지

<form>
    <label for="uid">아이디</label>
    <input type="text" id="uid" autofocus required placeholder="영문 4~12자"><br>
    <label for="mail">이메일</label>
    <input type="email" id="mail" required placeholder="name@example.com"><br>
    <label for="code">가입 코드</label>
    <input type="text" id="code" value="BDU-2026" readonly><br>
    <input type="submit" value="가입하기">
</form>

🌐 브라우저 화면  |  아이디를 비운 채 [가입하기]를 누른 경우

❌ 시험 함정
"페이지를 불러오자마자 원하는 요소에 마우스 커서를 표시하는 속성은?" → autofocus. placeholder(힌트), readonly(읽기 전용), required(필수)와 구별하세요.

📖 심화 — readonly와 disabled의 차이
둘 다 사용자가 값을 고칠 수 없지만 결정적인 차이가 있습니다.
· readonly : 포커스를 받을 수 있고 컨트롤로 정상 동작합니다. 폼을 전송하면 들어 있던 값도 함께 서버로 전송됩니다. (예: 가입 코드, 학기 정보)
· disabled : 포커스를 받을 수 없고, 폼을 전송해도 그 값은 서버로 전송되지 않습니다. 화면에서도 흐리게 비활성 상태로 보입니다.
서버에 꼭 보내야 하는 고정값이라면 disabled가 아니라 readonly를 써야 합니다.
(근거: MDN Web Docs, readonly 속성 문서 — Attribute interactions)

02 min · max · step 속성

숫자의 범위와 간격 정하기

한 가지만 써도 되고, min과 max를 함께 써서 입력 범위를 제한할 수도 있습니다. 강의노트에 따르면 세 속성은 <input>의 type이 date, datetime, datetime-local, month, week, time, range, number일 때만 사용합니다.

📖 보충 — datetime은 폐지된 type
위 목록의 datetime은 HTML 표준에서 폐지된(Obsolete) 값이라 브라우저가 지원하지 않고 일반 텍스트 칸으로 보여 줍니다. 날짜와 시간을 함께 받을 때는 datetime-local을 쓰세요. 시험은 강의노트 목록 그대로 답하면 됩니다.
(근거: MDN Web Docs, <input> 요소 — Obsolete values)

min, max, step 사용하기

<label for="qty">수량</label>
<input type="number" id="qty" min="1" max="10" step="1" value="1"><br>
<label for="score">점수</label>
<input type="number" id="score" min="0" max="100" step="10" value="50"><br>
<label for="day">예약일</label>
<input type="date" id="day" min="2026-11-01" max="2026-11-30">

🌐 브라우저 화면

✓ step 계산 요령
step은 min(없으면 0)을 기준으로 간격을 셉니다. min="0" step="10"이면 0, 10, 20 …만 올바른 값이고, 키보드로 55를 입력하고 전송하면 "가장 가까운 유효한 값은 50과 60입니다" 같은 경고가 뜹니다.

03 size · minlength · maxlength 속성

글자 수 다루기

min·max·step이 숫자의 조건이라면, size·minlength·maxlength는 텍스트 길이의 조건입니다.

강의노트에는 "minlength 속성은 크롬 브라우저와 안드로이드 브라우저에서만 지원"이라고 적혀 있습니다.

📖 보충 — 지금은 주요 브라우저가 모두 지원
이 설명은 예전 기준입니다. 현재 minlength는 크롬 40, 엣지 17, 파이어폭스 51, 사파리 10.1 이후 버전에서 모두 지원되며, 전 세계 사용 브라우저의 약 97%가 지원합니다. 다만 minlength는 값을 입력했을 때만 검사하므로, 빈칸을 막으려면 required를 함께 써야 합니다.
(근거: Can I use, minlength attribute for input fields / MDN Web Docs, minlength 속성 문서)

size, minlength, maxlength

<label for="pw">비밀번호</label>
<input type="password" id="pw" size="10" minlength="8" maxlength="16" required><br>
<label for="nick">닉네임</label>
<input type="text" id="nick" size="30" maxlength="10">

🌐 브라우저 화면  |  비밀번호에 5글자만 넣고 전송한 경우

⚠️ size와 maxlength를 헷갈리지 말 것
size는 칸의 보이는 너비일 뿐, 그보다 긴 글자도 입력됩니다. 입력 글자 수를 막는 것은 maxlength입니다. 요즘은 칸 너비를 CSS(width)로 정하는 경우가 많습니다.

04 <select> · <option> · <optgroup> — 드롭다운 목록

공간은 적게, 선택지는 많이

드롭다운 목록은 <select>로 시작과 끝을 표시하고, 그 안에 <option>으로 항목을 넣어 만듭니다. 기본적으로 한 가지 옵션만 보이고, 화살표를 눌러 나머지를 살펴본 뒤 하나를 고릅니다.

드롭다운 목록과 optgroup

<label for="major">관심 분야</label>
<select id="major" name="major">
    <optgroup label="프로그래밍">
        <option value="web" selected>웹프로그래밍</option>
        <option value="python">파이썬</option>
    </optgroup>
    <optgroup label="디자인">
        <option value="ui">UI 디자인</option>
        <option value="photo">사진 편집</option>
    </optgroup>
</select>

🌐 브라우저 화면  |  목록을 펼친 모습

size와 multiple

<select name="days" size="4" multiple>
    <option>월요일</option>
    <option>화요일</option>
    <option>수요일</option>
    <option>목요일</option>
    <option>금요일</option>
</select>

🌐 브라우저 화면  |  화·목요일을 Ctrl+클릭으로 고른 경우

❌ 시험 함정
"클릭했을 때 옵션들이 요소 아래쪽으로 펼쳐지는 것은?" → 드롭다운 목록. 공간을 최소한으로 쓰면서 여러 옵션을 보여 줄 때 가장 알맞습니다.

05 <textarea> — 여러 줄 입력 영역

고르는 대신 길게 쓰는 칸

항목을 고르는 것이 아니라 여러 줄의 문장을 직접 입력받을 때는 <textarea>를 씁니다. 이 영역을 텍스트 영역(textarea)이라고 하며, 회원 가입 양식의 이용 약관이나 문의 내용 칸에 주로 쓰입니다.

textarea로 약관과 문의 칸 만들기

<label for="terms">이용 약관</label><br>
<textarea id="terms" cols="40" rows="3" readonly>
제1조 이 약관은 웹프로그래밍 실습 사이트 이용에 관한 사항을 정합니다.
</textarea><br>
<label for="memo">문의 내용</label><br>
<textarea id="memo" cols="40" rows="4" placeholder="궁금한 점을 적어 주세요"></textarea>

🌐 브라우저 화면

⚠️ textarea는 닫는 태그가 있다
<input>과 달리 <textarea>는 </textarea>로 닫아야 하고, 처음 들어갈 내용은 value 속성이 아니라 두 태그 사이에 적습니다. 태그 사이의 공백과 줄바꿈도 그대로 표시되니 주의하세요.

❌ 시험 함정
"선택이 아니라 직접 여러 줄의 텍스트를 입력하는 영역을 만드는 태그는?" → <textarea>. <option>, <select>, <datalist>는 고르는 목록용입니다.

06 <button> 태그 — 버튼 넣기

input 버튼과 비슷하지만 더 자유롭게

강의노트의 소제목 "<bouuon>(→ <button>) 태그 – 버튼 넣기"처럼, <button>은 <input>의 버튼과 비슷하게 폼을 전송하거나 리셋하는 버튼을 넣습니다.

button 태그 세 가지

<form>
    <label for="q">검색어</label> <input type="text" id="q">
    <button type="submit">검색</button>
    <button type="reset">지우기</button>
    <button type="button">도움말</button>
</form>

🌐 브라우저 화면

❌ 시험 함정
"<button> 태그의 type 값이 아닌 것은?" → text. type은 submit·reset·button 세 가지이고, 지정하지 않으면 submit으로 간주됩니다. 폼 안의 <button>이 의도치 않게 폼을 전송한다면 type="button"을 빠뜨린 경우입니다.

07 <output> 태그 — 계산 결과

이 값은 계산 결과입니다

<output>은 그 안의 값이 일반 텍스트가 아니라 계산 결과라는 것을 브라우저에 알려 주는 태그입니다. 계산 자체는 보통 자바스크립트가 하고, <output>은 결과를 담는 자리 역할을 합니다.

두 수를 더해 output에 표시

<form oninput="result.value = Number(a.value) + Number(b.value)">
    <input type="number" id="a" name="a" value="10"> +
    <input type="number" id="b" name="b" value="20"> =
    <output name="result" for="a b">30</output>
</form>

🌐 브라우저 화면  |  두 번째 칸을 25로 바꾼 경우

✓ 왜 그냥 <span>을 쓰지 않을까
<span>에 숫자를 넣어도 화면은 같지만, <output>을 쓰면 브라우저와 화면 낭독기가 "이 부분은 계산 결과"라고 이해합니다. 의미에 맞는 태그를 쓰는 것이 웹 표준의 기본입니다.

08 <progress> · <meter> — 막대로 보여 주기

진행 상황인가, 차지하는 비율인가

progress와 meter 비교

다운로드 <progress value="70" max="100"></progress><br>
디스크 사용량 <meter min="0" max="100" value="45" low="60" high="85"></meter> 45%<br>
디스크 사용량 <meter min="0" max="100" value="92" low="60" high="85"></meter> 92%<br>
투표율 <meter value="0.63">63%</meter>

🌐 브라우저 화면

❌ 시험 함정
"진행 상태를 보여 줄 때 쓰는 태그는?" → <progress>. 화면은 <meter>와 거의 같아 헷갈리기 쉽지만, meter는 진행이 아니라 전체 중 차지하는 크기(사용량·투표율)입니다.

09 종합 실습 — 수강 신청서

이번에 배운 속성과 태그를 한 번에

apply.html — 수강 신청서

<form action="apply.php" method="post">
    <fieldset>
        <legend>수강 신청</legend>
        <label for="name">이름</label>
        <input type="text" id="name" name="user_name" autofocus required maxlength="10"><br>
        <label for="sid">학번</label>
        <input type="text" id="sid" name="sid" required minlength="8" maxlength="8" placeholder="예: 20260001"><br>
        <label for="term">학기</label>
        <input type="text" id="term" name="term" value="2026-2학기" readonly><br>
        <label for="course">과목</label>
        <select id="course" name="course">
            <optgroup label="전공">
                <option value="web">웹프로그래밍</option>
                <option value="db">데이터베이스</option>
            </optgroup>
            <optgroup label="교양">
                <option value="writing">글쓰기</option>
            </optgroup>
        </select><br>
        <label for="hours">주당 공부 시간</label>
        <input type="number" id="hours" name="hours" min="1" max="20" step="1" value="5"><br>
        <label for="why">신청 이유</label><br>
        <textarea id="why" name="why" cols="40" rows="3"></textarea><br>
        작성 진행률 <progress value="3" max="6"></progress>
    </fieldset>
    <button type="submit">신청</button>
    <button type="reset">다시 쓰기</button>
</form>

🌐 브라우저 화면

⚠️ name이 없으면 값이 전송되지 않는다
6주차 글에서 정리했듯이 서버는 user_name=홍길동&sid=20260001처럼 name=값 쌍으로 데이터를 받습니다. id만 있고 name이 없는 입력 요소의 값은 폼을 전송해도 서버로 가지 않으므로, 실제로 보낼 요소에는 반드시 name을 붙입니다. id는 label의 for와 연결용, name은 서버 전송용입니다.

10 핵심 정리

시험 직전에 이것만은 꼭

📌 핵심 정리

· autofocus : 페이지를 열자마자 그 요소에 커서 표시
· placeholder : 입력란의 힌트, 입력하면 사라짐. label을 대신하지는 못함(입력 예시용)
· readonly : 읽기 전용, 값 없이 readonly만. 값은 서버로 전송됨(disabled는 전송 안 되고 포커스도 안 됨)
· required : 필수 필드, 불린 값이라 required 또는 required="required", 오류 문구는 브라우저마다 다름
· min · max · step : 최솟값·최댓값·간격. date·datetime-local·month·week·time·range·number에서 사용(datetime은 폐지)
· size 보이는 너비 / minlength 최소 글자 수 / maxlength 최대 글자 수. minlength는 현재 주요 브라우저 모두 지원
· <select> 드롭다운 목록 + <option value> 항목(value가 전송값, 생략하면 표시 글자가 전송됨) + <optgroup label> 그룹. select의 size·multiple로 크기·다중 선택
· <textarea> : 여러 줄 입력, cols(너비)·rows(줄 수), 닫는 태그 있음
· <button> : type = submit(기본값)·reset·button. text는 type 값이 아님
· <output> : 계산 결과임을 브라우저에 알림
· name : 서버로 값을 보내려면 모든 입력 요소에 필수(id는 label 연결용)
· <progress> 진행 상태(value·max) vs <meter> 전체 중 차지하는 크기(min·max·value·low·high·optimum)

태그 : input 태그 속성 정리placeholder required 속성readonly autofocus 속성min max step 속성minlength maxlength 차이select option optgroupHTML 드롭다운 목록 만들기textarea cols rowsbutton 태그 type 속성progress meter 차이

출처 : 이 글은 부산디지털대학교(BDU)의 '웹프로그래밍' 과목 2026년도 강의노트와 교재 『Do it! HTML+CSS 웹 표준의 정석』(고경희 저, 이지스퍼블리싱, 2025)과 아래 자료를 참고하여 학습용으로 작성한 글입니다.

보충 자료 (📖 보충 박스의 근거)
· placeholder와 label의 관계 : MDN Web Docs, HTML attribute: placeholder
· readonly와 disabled의 차이 : MDN Web Docs, HTML attribute: readonly
· datetime type 폐지 : MDN Web Docs, <input>: The HTML Input element
· minlength 브라우저 지원 : Can I use, minlength attribute for input fields
· minlength 동작 방식 : MDN Web Docs, HTML attribute: minlength

자세한 내용은 슬로우레터 홈페이지에서 확인하세요.

아래 제목을 클릭해도 됩니다. ^^

출처: 슬로우뉴스(https://slownews.kr/168082)

= 26/10/19 류효상의 신문을 통해 알게 된 이야기들 =

민주당 ‘조희대 탄핵‘ 꺼내 들었다.
1. 민주당이 조희대 대법원장 탄핵 논의를 공식화했습니다. 자진 사퇴 압박에 머물던 지도부가 국정감사에서 조 대법원장의 해명이 흔들리고 범여권의 탄핵 요구가 거세지자, 수위를 끌어올린 것으로 보입니다. 국민의힘은 맞불을 놓으면서도 민주당이 실제로 탄핵소추안을 발의할지 주시하고 있습니다.
조희대 탄핵하면 정부가 무너진다고 주장하는 국민의힘이야말로 무너지라고 탄핵에 동참하셔야지~

국힘, '당협위원장 직선제' 놓고 커지는 논란.
2. 국민의힘 경기 용인시갑 조직위원장을 뽑는 투표에 절차상 오류가 드러났다는 논란이 있었지만, 결국 재투표 없이 '장동혁 팬클럽' 사무총장 출신의 ‘장동혁계’ 인사가 그대로 확정됐습니다. ARS 전화가 누락된 걸 문제 삼으며 '선거 부실'이 있었는지 전수 조사가 필요하다는 주장은 받아들이지 않았습니다.
내년 당대표 연임 노리고 측근으로 물갈이 중인데 부정선거쯤이야 무슨 문제가 되겠어? 북이나 쳐라~

시장직 걸린 오세훈 2심 금요일 선고.
3. 이른바 '명태균 여론조사 대납 의혹'으로 1심에서 시장직 상실형을 선고받은 오세훈 서울시장의 항소심 선고가 이번 주 금요일에 나옵니다. 1심은 오 시장이 여론조사 5건을 명 씨에게 의뢰하고 비용 2천100만 원을 대납하게 했다고 인정해 벌금 1천만 원을 선고하고 추징금 2천100만 원을 선고했습니다.
오는 수요일에는 박성재 항소심 선고도 있고 해서 내란 청산의 앞날이 여러모로 기대가 됩니다~

한강버스, 커지는 리베이트 의혹.
4. 서울시 한강버스 사업의 리베이트 의혹 녹취가 터져 나오면서 오세훈 서울시장이 궁지에 몰린 가운데 서울시가 직접 수사를 촉구하고 나섰습니다. 이와 관련해 국회 국토교통위원회 소속 민주당 의원들도 핵심 관계자의 추가 증인 채택과 자료 제출을 요구하고 나서며 오 시장을 향한 압박에 가세했습니다.
서울시가 이미 감사원에 감사청구를 했다지만, 감사원은 받은 사실이 없다네~ 귀신이 곡할 노릇이야~

추미애 사과 발언 놓고 진정성 공방.
5. 추미애 경기도지사가 소방 예산을 두고 ‘재정 빨대’라고 표현한 데 대해 공식 사과했으나, 사과의 진정성과 해명을 둘러싼 여야의 공방이 이어지고 있습니다. 지방재정의 부담을 설명하려던 발언이 소방공무원의 헌신을 가볍게 여긴 것 아니냐는 비판으로 번지면서 추 지사의 책임론도 커지는 모습입니다.
이래서 정치인은 말 한마디도 중요하지만, 단어 선택에 신중을 기해야 한다는 겁니다~ 그걸 여태 모르나?

사건 쌓이는 서울중수청 반부패수사국.
6. 중수청 출범 이후 정치인에 대한 고소 고발 사건이 쌓이고 있습니다. 서울중수청 반부패수사국에는 이재명 대통령, 한동훈 의원, 박선원 의원, 조희대 대법원장, 임은정 광주중수청장 등 정치권 인사와 고위공직자 관련 고소·고발 사건이 잇따라 배당되면서 향후 수사 방향에 관심이 쏠리고 있습니다.
중수청이 출범하자마자 아주 바쁘게 생겼지만, 원래 정치인 수사는 2~3년 끄는 게 국룰 아닌가?

‘서해 공무원 피격 사건’ 일단락.
7. 공소청 출범 전 검찰이 이른바 ‘서해 공무원 피격 사건’과 관련해 숨진 이대준 씨 유족으로부터 고발당한 노영민 전 대통령 비서실장을 불기소 처분한 것으로 확인됐습니다. 현직 민주당 국회의원인 이인영 전 통일부 장관과 전현희 전 국민권익위원장도 불기소로 결론 낸 것으로 확인됐습니다.
정부가 국민 목숨을 가지고 마치 정권 안정을 위해 조작을 했다고 주장한 인물들이 이제 심판 받아야~

이주한 “머리 나빠서 노벨상 못 타는 것”.
8. 올해도 한국이 노벨과학상 수상자를 배출하지 못한 가운데, 이주한 청와대 과학기술연구비서관이 "머리가 안돼서 못 탄다"고 주장해 논란입니다. 이 비서관은 "호화롭게 살고 방탕하게 살면서도 머리 좋으면 타는 거고"라고 주장하면서 "무슨 노벨상이 바른생활 도덕상인 줄 아나"라고도 했습니다.
골프치고 비즈니스 타서 노벨상 못 탄다는 말에 반박이라는데… 노벨상이 도덕 기준은 아니니까~

주식 손실에 내수 회복도 흔들린다.
9. 코스피가 한때 9000선을 넘었다가 5700선 아래로 떨어지면서 주식 투자 손실이 가계 소비 위축으로 번질 수 있다는 우려가 나오고 있습니다. 보유 자산 가치가 줄어들고 대출이자 부담까지 겹치면 외식·쇼핑·여행 등 일상적인 씀씀이부터 줄일 수 있기 때문에 내수 회복세에도 부담이 될 수 있습니다.
주식 전광판이 온통 민주당 색깔이라는 자조 섞인 말이 나오는 것도 그냥 웃자는 얘기가 아닌 듯~

트럼프, 대러 제재 전격 유예에 러시아 환호.
10. 트럼프 대통령이 러시아에 대한 제재와 관세를 유예하자 러시아가 "역사적 순간"이라며 환영하고 나섰습니다. 반면 젤렌스키 대통령은 "미국의 제재 공백, 침략자에 대한 압박 완화와 금전적 보상은 러시아가 계속 공격하도록 부추길 뿐"이라며 유럽 동맹국들의 대러 압박을 유지해 달라고 촉구했습니다.
젤렌스키가 미국이나 유럽을 동맹국이라고 생각하는 게 얼마나 바보 같은 생각인지 아직도 모르는 듯~

'가짜 변호사' 논란 백악관 대변인 경질.
11. '가짜 변호사'로 논란이 된 재커라이어 신임 백악관 대변인이 취임한 지 일주일도 되지 않아 경질됐습니다. 재커라이어 대변인은 자신을 '변호사'라고 소개하고 중국으로 이주했을 때 변호사 시험에 합격했다고 밝혔으나 그동안 자격 여부가 확인되지 않았으며, 취임 직후 사실이 아닌 것으로 확인됐습니다.
이력과 자격을 속이는 건 사기인데 대한민국에도 김건희라는 대표적인 인물이 있었다는 거 아니냐고~

폴란드 업체 광고, 서울 IQ 평균은 112.
12. 최근 온라인에서 대한민국 지역별 평균 지능지수 IQ를 제시한 광고가 노출되고 있어 시선을 끌고 있습니다. 각종 웹사이트에서 확인할 수 있는 한 배너 광고 이미지가 노출한 전국 17개 시도의 IQ는 서울이 112로 가장 높고, 경기도 111, 울산 110 순이었고 제주와 대구가 103으로 가장 낮았습니다.
아무 근거 없는 이 수치를 가지고 정치 성향과 IQ에 대한 폄하가 벌어지고 있다는 데… 재밌네~

갤럽, 차기 총선 야당 다수 당선돼야 47% 여당 다수 34%.
장동혁 "국무회의 생중계, 계속해야 국민이 진짜 얼굴 봐".
고법원장 "대통령 재판, '종결' 아냐 헌법 84조로 '중단'".
진중권 “민주 한동훈 딸 의혹, 배고픈 개가 빈그릇 핥는 것”.
‘딸 특혜 임용 의혹 송치’ 유승민 “경찰, 없는 죄 덮어씌워”
모스 탄 "이재명 '소년원 의혹' 진실이라 믿어 나는 무죄".
국방부 “아덴만 해적 활동 급증” 청해부대 전력 강화 시사.
경북 산불 ‘27명 사망’했는데 실화자 2심도 솜방망이 처벌.
시청 불타고 백화점 털리고 프랑스, 수십 년만에 최악 폭동.

새벽은 새벽에 눈 뜬 자만이 볼 수 있다. 새벽이 오리라는 것을 알아도 눈을 뜨지 않으면 여전히 깊은 밤중일 뿐이다.
-김수덕-

아직도 잠에서 깨어나지 않은 채 아침이 오기만을 기다리는 사람이 참 많습니다. 물론 잠에서 깨어나지 않아도 아침은 밝지만, 여전히 잠에서 헤매고 있는 사람의 하루는 절반밖에 주어지지 않는다는 것입니다. 하루를 온전히 보내기 위해서는 생각보다 부지런해야 하는 것입니다. 오늘 하루를 온전히 우리 것으로 만듭시다.

류효상 올림.

출처 : 인천의소리(http://www.voi.co.kr)