51일차

이예진·2025년 8월 5일

HTML, CSS, JS 활용 51강 각종 폼 입력요소

CODEPEN
- input
선생님 영상

주요 입력 요소 목록

**
<form>
<input type="text" placeholder="텍스트 입력">
<input type="password" placeholder="비밀번호">
<input type="email" placeholder="이메일">
<input type="number" placeholder="숫자">
<input type="tel" placeholder="전화번호">
<input type="url" placeholder="URL">
<input type="date">
<input type="time">
<input type="checkbox"> 체크박스
<input type="radio" name="group"> 라디오1
<input type="radio" name="group"> 라디오2
<input type="file">
<textarea placeholder="내용을 입력하세요"> </textarea>
<select>
<option>선택1</option>
<option>선택2</option>
</select>
<button type="submit">제출</button>
</form>

주요 요소 정리

요소	설명
`text`	일반 텍스트 입력
`password`	입력 내용을 ●●●로 숨김
`email`, `url`, `tel`, `number`	특화된 입력 형식 제공
`checkbox`, `radio`	다중/단일 선택 가능
`file`	파일 업로드
`date`, `time`	날짜 및 시간 선택
`textarea`	여러 줄 입력
`select` + `option`	드롭다운 메뉴
`button` / `submit`	폼 제출 버튼

핵심 정리표

항목	내용
핵심 태그	`<form>`, `<input>`, `<select>`, `<textarea>`
유의사항	`radio`는 `name` 속성 동일해야 그룹화됨
submit 처리	기본 동작: 새로고침 / JS로 막을 수 있음
시멘틱 구조	label, fieldset 등과 함께 쓰면 접근성↑

보충 팁

label for="id"와 input id="id"를 연결해 클릭 편의성 제공 가능

placeholder는 힌트일 뿐, 레이블을 대체하지 않는 게 좋음

required, min, max, pattern 등 HTML 속성으로 유효성 체크 가능

한줄 요약
HTML 폼은 입력 타입마다 적절한 UI를 제공하므로 사용 목적에 따라 적절한 input type 선택이 중요함.

HTML, CSS, JS 활용 52강 화면을 좌우로 끝까지 사용하는 고정형 레이아웃에 적용하면 좋은 나이스스크롤

CODEPEN
관련링크 - https://webgradients.com/
선생님 영상

목표

화면을 좌우로 꽉 채우는 고정형 레이아웃에 NiceScroll을 적용하여 감성적인 스크롤바 구현

전체 페이지 디자인 퀄리티 향상

핵심 구조

html
<body>
<div class="wrap">
<section> ... </section>
<section> ... </section>
<section> ... </section>
</div>
</body>

.wrap은 스크롤 대상이 되는 콘텐츠 컨테이너임

기본적으로 height: 100vh 가득 채운 섹션들이 스크롤됨

js
$(".wrap").niceScroll({ cursorcolor: "#ff895d", cursorwidth: "8px", cursorborder: "none", cursorborderradius: "8px", background: "#eee", zindex: 9999 });

각 옵션 설명

옵션	설명
`cursorcolor`	스크롤바 색상
`cursorwidth`	스크롤바 너비
`cursorborder`	테두리 없음 설정
`cursorborderradius`	스크롤바 모서리 둥글기
`background`	스크롤 트랙(배경) 색상
`zindex`	z-index 값 설정 (다른 요소 위에 보이도록)

핵심 정리표

항목	내용
라이브러리	jQuery 기반 `NiceScroll`
대상	`.wrap`과 같은 스크롤 대상 컨테이너
목적	감성적인 스크롤 커스텀 UI 구현
스타일	기본 스크롤보다 둥글고 컬러풀하게 설정 가능
특징	CSS로 구현 어려운 스크롤바도 구현 가능

적용 전 확인사항

반드시 jQuery와 NiceScroll 플러그인이 포함되어야 함
<script src="https://code.jquery.com/jquery-3.6.0.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"> </script>

한줄 요약
NiceScroll은 좌우 고정형 섹션 레이아웃에 적용하면 감성적이고 세련된 스크롤 UX를 쉽게 구현할 수 있음.

HTML, CSS, JS 활용 53강 나이스스크롤바를 쓰면 무조건 해줘야하는 추가작업

CODEPEN
선생님 영상

문제 상황
js
$(".wrap").append(`<section>추가된 섹션</section>`);

섹션을 동적으로 추가했을 때 스크롤은 생겼지만 NiceScroll 바는 갱신되지 않음

스크롤바는 여전히 기존 DOM 기준으로 설정됨

해결 방법: resize, scroll, DOM 변경 후 → resize() .show() 적용*
js
$(".wrap").niceScroll().resize().show();
js 또는 명시적으로 갱신
$(".wrap").getNiceScroll().resize();

전체 예제 JS 요약
$(".wrap").niceScroll({ cursorcolor: "#ff895d", cursorwidth: "8px", cursorborder: "none", cursorborderradius: "8px" });
// 버튼 클릭 시 섹션 추가
$(".add-btn").on("click", function () {
$(".wrap").append(`<section>추가된 섹션</section>`);
// 스크롤 갱신
$(".wrap").getNiceScroll().resize(); });

핵심 정리표

항목	내용
문제	DOM이 변경되면 NiceScroll UI가 깨짐
원인	플러그인이 기존 DOM 구조만 반영하고 있음
해결	`.getNiceScroll().resize()` 또는 `.resize().show()` 호출
주의	DOM 조작 이후엔 항상 갱신 필요

한줄 요약
NiceScroll은 DOM 변경 후 반드시 .getNiceScroll() .resize()로 갱신해야 정상 작동함.

HTML, CSS, JS 활용 54강 범용 나이스스크롤바 라이브러리, 사용법

CODEPEN
선생님 영상

기본 구조
js
function setNiceScroll(target) { $(target).niceScroll({ cursorcolor: "#ff895d", cursorwidth: "8px", cursorborder: "none", cursorborderradius: "8px" }); }

target 매개변수로 대상 DOM을 받아와서 설정

갱신 기능도 함수로 분리
js
function refreshNiceScroll(target) { $(target).getNiceScroll().resize(); }

DOM 변경 시 .getNiceScroll() .resize() 호출로 스크롤바 갱신

적용 예시
js
setNiceScroll(".wrap");

// 버튼 클릭 시 동적 추가 + 스크롤 갱신
$(".add-btn").on("click", function () { $(".wrap").append(`<section>새로운 섹션</section>`); refreshNiceScroll(".wrap"); });

핵심 정리표

항목	설명
setNiceScroll	기본 설정 함수. DOM에 스크롤바 설정
refreshNiceScroll	DOM 변경 후 갱신용 함수
사용 시기	초기 설정, 이후 동적 콘텐츠 추가 시
장점	중복 제거, 범용 함수화, 재사용성 ↑