웹 접근성 ▏Perceivable (인식의 용이성) 🙾 적절한 대체 텍스트 제공 - 텍스느 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 함 🙾 자막 제공 - 멀티미디어 콘텐츠에는 자막, 원고 또는 수화를 제공해야 함 🙾 색에 무관한 콘텐츠 인식 - 콘텐츠는 색에 관계없이 인식될 수 있어야 함 🙾 명확한 지시사항 제공 - 지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 함 🙾 텍스트 콘텐츠의 명도 대비 - 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5대 1 이상이어야 함 🙾 자동 재생 금지 - 자동으로 소리가 재생되지 않아야 함 🙾 콘텐츠 간의 구분 - 이웃한 콘텐츠는 구별될 수 있어야 함 ① 테두리를 이용하여 구분 ② 콘텐츠 사이에 시각적인 ..
container query / Logical Props
CSS container query 참고사이트: https://codepen.io/tutsplus/pen/LYLyYdQ 🙾 CSS Logical Props direction ltr (기본값) horizontal-tb (기본값) inline (= 글씨가 채워지는 방향) ltr = left to right tb = top to bottom writing-mode vertical-lr vertical-rl ▏ Physical(물리적) VS Logical(논리적) 🙾 phycial property(물리적 속성들): margin-left, padding-left, border-top direction: rtl; margin-left: 4rem; 🙾 논리적 속성들: writing-mode direction dire..
❑ 상품 테이블 생성 ⇨ phpmyadmin - 데이터베이스(category)가 선택된 상태로 SQL 입력 CREATE TABLE `products` ( `pid` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(500) NOT NULL, `cate` varchar(100) DEFAULT NULL, `content` text DEFAULT NULL, `thumbnail` varchar(100) DEFAULT NULL, `price` double DEFAULT NULL, `sale_price` double DEFAULT NULL, `sale_ratio` double DEFAULT NULL, `cnt` int(11) DEFAULT NULL, `sale_cnt` int(1..
fade (페이드) ▏fade in / fade out $(function () { let slides = $('.slideshow img'), slideCount = slides.length, currentIdx = 0; slides.eq(currentIdx).fadeIn(); setInterval(()=>{ let nextIdx = (currentIdx + 1)%slideCount; slides.eq(currentIdx).fadeOut(); slides.eq(nextIdx).fadeIn(); currentIdx = nextIdx }, 4000); }); sticky 대상.offset().top; $(window).scrollTop(); < A요소 안..