portfolio (4) 썸네일형 리스트형 AMORE MALL API Fetch javascript portfolio #AMOREMALL #모바일 적응형 #데이터비동기처리 #fetch() #json #swiper 📌 PROJECT KEY POINTS fetch() 함수로 데이터 호출 (feat.JSON) swiper 사용한 슬라이드 1. fetch() 함수로 데이터 호출 (feat.JSON) 👉🏻 아모레몰의 상품 영역은 거의 비슷한 레이아웃을 가지고 있어 매번 새로운 json 데이터를 만드는 것이 아니라 하나의 prdData.json 파일을 활용. 필요한 부분만 추출해 각 영역의 fetch문에 재사용하여 파일과 코드를 좀 더 간결하게 작성. json { "items":[ { "id":0, "thumb": "./assets/img/recom01.png", "saleT.. SEOUL CITY HALL portfolio 시맨틱태그 웹접근성 seoulcityhall 적응형 웹접근성 시맨틱태그 swiper javascript 📌 PROJECT KEY POINTS swiper slider 1-1. swiper slider 1-2. slider tab click - 다른 tab slider 멈춤 1-3. slider 재생/정지 버튼 키보드 이벤트 (keydown) : 서브메뉴 열고 닫기 접근성에 따른 태그 순서 1. swiper slider 1-1. swiper slider js const slide01 = new Swiper(".slide01 .swiper", { autoplay: { delay: 2000, disableOnInteraction: false, }, loop: true, pagination: .. NAVER portfolio 시맨틱태그 웹접근성 NAVER 적응형 웹접근성 시맨틱태그 html css 📌 PROJECT KEY POINTS 시맨틱 태그 활용 웹접근성 준수 이미지 스프라이트 (image sprite)를 이용한 아이콘 사용 1. 시맨틱 태그 ✔️ 시맨틱 태그란?? 시멘틱 태그는 "의미가 있는 태그"라는 뜻이다. 즉, HTML tag들 중에서도 나름의 의미가 있는 태그들을 말한다. 사용하여 마크업 2. 웹 접근성 준수 ✔️ 웹 접근성이란?? 「지능정보화기본법」에 따라 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용 할 수 있도록 보장하는 것이다. 올바른 시맨틱 태그 사용 blind 를 활용한 웹 접근성 준수하고자 했음 (시각적으로 보이지 않으나 스크린 리더기에서 .. FLO GSAP portfolio renewal #FLO #적응형 #scss #javascript #gsap #리뉴얼 📌 PROJECT KEY POINTS gsap 라이브러리 활용 1-1) 공통 레이아웃 : 반복문 적용 1-2) clip-path 를 활용한 스크롤 애니메이션 1-3) 루프 애니메이션 1-4) data- 프로퍼티 활용 공통 레이아웃 scss 처리 javascript 헤더 스크롤 이벤트 1. gsap 라이브러리 활용 ▪️ 1-1) 공통 레이아웃 : 반복문 적용 1) 헤드라인 텍스트 스크럽 모션 (공통) gsap.utils.toArray('.text-flow-area .headline').forEach(element => { gsap.to(element, { scrollTrigger: { trigge.. 이전 1 다음
