FRONTEND jQuery로 가벼운 '오늘 본 상품' 세로 슬라이더 구현하기 (플러그인 없이 DOM 조작 최적화) 무거운 라이브러리 없이 jQuery만으로 쇼핑몰 사이드바의 '오늘 본 상품' 영역을 구현하는 방법을 알아봅니다. DOM 조작을 통한 효율적인 세로 롤링 로직과 코드를 소개합니다. 📑 목차 1. 마크업 구조: 시맨틱한 리스트 구성 2. jQuery 핵심 로직: 무한 롤링 구현 3. 활용 팁 및 퍼포먼스 고려사항 4. 자주 묻는 질문(FAQ) 1. 마크업 구조: 시맨틱한 리스트 구성 쇼핑몰 사이드바 UI는 한정된 공간을 효율적으로 사용해야 합니다. div 대신 dl 과 dd 태그를 사용하여 데이터 리스트의 시맨틱한 구조 를 잡는 것이 좋습니다. 초기 화면에는 기획된 개수(예: 3개)만 노출하고 나머지는 스타일로 숨김 처리합니다. <div class="todayBg"> <dl> <!-- 위로 이동 버튼 (Prev) --> <img src="/images/btn_up.gif" class="prev" alt="위로"> <!-- 상품 리스트 (초기 3개 노출) --> <dd><a href="#"><img src="/img/p1.jpg" alt="상품1"></a></dd> <dd><a href="#"><img src="/img/p2...

FRONTEND ENGINEERING jQuery .prop() vs .attr(): DOM 상태 제어의 핵심 원리와 실무 표준 패턴 HTML 속성(Attribute)과 DOM 프로퍼티(Property)의 기술적 차이를 명확히 분석하고, 체크박스 등 동적 UI의 데이터 무결성을 보장하는 실무 코딩 표준과 이벤트 핸들링 전략을 제시합니다. 📑 목차 1. Attribute와 Property의 본질적 차이 2. Boolean 속성 제어와 데이터 정합성 3. 상태 변경 시 이벤트 트리거 전략 4. 요약: 언제 무엇을 써야 할까? 1. Attribute와 Property의 본질적 차이 jQuery 1.6 버전 이후 명확히 구분된 .prop() 와 .attr() 의 차이는 단순한 문법적 선호도가 아닌, 브라우저가 문서를 해석하는 메커니즘의 차이에서 비롯됩니다. 엔터프라이즈급 애플리케이션의 안정성을 확보하려면 이 두 개념의 생명주기를 이해해야 합니다. Attribute (.attr()): HTML 마크업에 명시된 텍스트 그 자체입니다. 페이지가 처음 로드될 때의 초기 상태(Default Value) 를 의미하며, 사용자 입력으로 값이 변해도 원본 속성값은 유지됩니다. Property (.prop()): 브라우저 파싱 후 메모리에 적재된 DOM 객체의 실시간 속성입니다. 사용자의 인터랙션이나 스크립트에 의해 변경되는 현재 상태(Current Value) 를 대변합니다. 2. Boolean 속성 제어와 데이터 정합성 체크박스의 checked , selected , disabled 와 같은 상태값은 문자열이 아닌 Boolean(...