🖥 YSL / 반응형 PC 해외 사이트를 래퍼런스로 참고하여 제작한 입생로랑 뷰티 웹사이트 📢 Check Point GSAP 텍스트 애니메이션 아래에서 위로 차오르는 영역 Swiper 슬라이드 디자인 matchMedia 동일 모션 한방에 주기 1. GSAP 텍스트 애니메이션 👉 scrollTrigger 스크롤을 내리고 올림에 따라 발생하는 이벤트 ...

🖥 Kinolights 클론코딩 / Mobile 📢 Check Point 랭킹 플랫폼 오토 전환 json 데이터 활용 Tooltip 1. 랭킹 플랫폼 오토 전환 👉 4초마다 플랫폼이 바뀌는 스크립트 넷플릭스 = 0 / 웨이브 = 1 / 티빙 = 2 i라는

🖥 SK the Careers 클론코딩 / 적응형 PC 📢 Check Point FullPage Scroll swiper 슬라이드 스타일 toggle 마우스 애니메이션 1. FullPage Scroll 👉 페이지 단위로 스크롤 작동되는 플러그인 한 번쯤 구현해 보고 싶던 기능. 정확한 이름을 몰라서 one page, scroll page 이런식으...

🖥 NAVER Careers 클론코딩 / 적응형 PC 📢 Check Point 셀렉트박스 커스텀 반응형 체크박스 슬라이드 여백 1. 셀렉트박스 커스텀 ⇣ select - option 텍스트 컬러 변경 👉 placeholder는 css에서 커스텀 가능 👉

🖥 Andar 클론코딩 / Mobile 📢 Check Point 슬라이드 (배너, 메인) 스크롤 이벤트 사이드 메뉴 tab키 카테고리 전환 동일 클래스 사용 1-1. 배너 슬라이드 autoplay 3초 간격으로 내용이 자동 전환되도록 disableOnInteraction: false로 스와이프 후 자동 재생이 비활성화 되지 않도록 speed로 속도...

🖥 서울시청 (클론코딩 / 적응형 PC) 📢 Check Point 스킵 내비게이션 value 값으로 사이트 이동 data 속성으로 슬라이드 이동 접근성을 고려한 태그 작성 순서 키보드 이벤트 (keyboard event) 1. 스킵 내비게이션 👉 사용하는 이유 시각 장애인 또는 마우스 사용이 불가한 환경에서 사용이 편리하게 접근성을 위해 쓰인다. ...

🖥 NAVER 클론코딩 / 적응형 PC 📢 Check Point 시맨틱 마크업 사이트 구조 분석 IR/IS 기법 float 대신 flex를 사용한 정렬 1. 시맨틱 마크업 👉 각 태그를 용도에 맞게 사용하는 것 로고, 네비게이션이 들어가는 머리말에 `` 본문

개발자가 개발해놓은 것으로, 프론트엔드나 퍼블리셔가 요청해 쓴다."xx 데이터 주세요" 요청하면 개발자가 만들어놓은 소스가 있기 때문에 그 요청에 대한 데이터를 json으로 준다.⭐️ API는 그냥 쓸 수 없고, 키값이 있어야 한다.예시 키값 (주소창에 치면 데이터가

scss는 도구일 뿐, 작동되지 않는다.\_(언더바)가 붙은 파일은 변환이 되지 않는다.변환이 된다 = css로 작동 되는@import ''; 로 세팅해줘야 제 역할을 할 수 있다.세팅 후 Watch Sass 또는 저장 하면, css 폴더에 style.css 파일 안에

JavaScript Object Notation의 약자로, Javascript 객체 문법을 따르는 문자 기반의 데이터 포맷이다.데이터를 쉽게 교환, 저장하기 위하여 만들어졌다.JSON은 데이터 포맷일 뿐이며 어떠한 통신 방법도 프로그래밍 문법도 아닌 단순히 데이터를 표

= 반응형 처리각 css 파일 하단response.css 파일을 생성소스 바로 밑에 작성 (scss)

모션을 부드럽게 만들어 줄 수 있는 애니메이션 라이브러리자바스크립트! 제이쿼리XGSAP : a에서 b로 이동 같은 간단한 모션ScrollTrigger : 모션 심화 버전? GSAP의 자회사 같은 느낌https://greensock.com/gsap/ScrollT

슬라이드 기능을 쉽게 만들 수 있도록 한 스크립트사이트 : https://swiperjs.com/1) 링크 가져오기이 링크가 있어야 스와이퍼가 작동된다.2) 마크업mySwiper 이름은 내 마음대로 설정 가능,나머지 swiper, swiper-rapper, s

제이쿼리(jQuery)란? 제이쿼리(jQuery)는 오픈 소스 기반의 자바스크립트 라이브러리이다. 자바스크립트보다 사용이 쉽다. 👉 환경 구축 제이쿼리 쓸 수 있는 환경 만들기 = 제이쿼리 가져오기 .js 파일 불러오기 👉 선택하는 방법 > $('') '' 사이에 태그, 클래스/ID명, 변수 등을 작성한다. 👉 괄호의 뜻 > ( ) 스크립...

SVG(Scalable Vector Graphics)란? 확장 가능한 마크업 언어(Extensible Markup Language; XML)로 작성된 벡터 기반의 그래픽 이미지 포맷 " svg = 코드로 구성된 이미지 " 👉 장점 1) 컬러를 바꿀 수 있다. 2)

1줄 말줄임 줄바꿈 안함 > white-space: nowrap; 넘치는 글 숨기기 > overflow: hidden; 넘칠 때 ... 으로 표시 > text-overflow: ellipsis; 2줄 말줄임 2줄까지 표시 > -webkit-line-clamp:

👉 CSS 리셋하는 이유 각 브라우저마다 기본으로 설정된 스타일 값이 있어, 초기화 작업을 통해 동일한 스타일 값을 보여주고자 하는 것 ⭐️ 크로스 브라우징 (Cross Browsing) 구현 👉 가장 유명한 CSS 리셋 https://meyerweb.com/er

👉 img 콘텐츠와 밀접한 연관이 있는 이미지 사용 시에 적합 부분에 이미지 설명을 넣어 웹 접근성을 준수할 수 있다. 이미지 설명이 h2, p, span 등의 태그로 기재된다면, 뒤의 을 삭제하여 '이미지 설명 제공하지 않는다.' 라는 의미인 로만 작성하면

이미지 대체 텍스트 제공을 위한 CSS 기법이미지를 볼 수 없는 상황에도 해당 정보에 접근할 수 있도록 적절한 텍스트를 제공하는 기법으로, 웹 접근성 뿐만 아니라 검색 엔진의 효과적인 내용 수집을 돕는 기법이다.스크린 리더 사용자에게 적절한 대체 텍스트를 제공하여 웹

: 주소로 전달, 보안이 필요 없는 : 보안 필요, 회원가입/결제 등에 사용 폼에 대한 기본 구조 과 는 세트 구성 는 블라인드 처리 fieldset 안에