반응형, 클론코딩사용언어 : html, css라이브러리 : j-query, swiper제작기간: 7일반응형 이미지 넣기스크롤 상승 시 보이고 내릴땐 안보이는 헤더 swiper pagination에 글자 넣기 디바이스 크기별로 swiper 효과 다르게 주고싶을 때maso

적응형 모바일, 클론코딩사용언어 : html, css라이브러리 : j-query, swiper제작기간: 3일a태그와 button태그가 같은 영역에 있을 때탭 클릭시 스크롤 이동아래와 같이 a태그 안에 button이 있을 때는 a태그로 영역만 잡고 버튼을 z-index를

적응형, 클론코딩사용언어 : html, css라이브러리 : j-query, swiper제작기간: 5일swiper데이터 바인딩quick top button영역을 벗어난 swiper를 보이게 해야한다. 아래의 이미지에서 빨간 상자 영역이 컨텐츠 영역 밖이다.

반응형, 클론코딩사용언어 : html, css라이브러리 : j-query, gsap, slitType제작기간: 7일fixed contentGSAP 반응형 GSAP하단 콘텐츠가 스크롤이 된지 한참 뒤에 올라오는 효과 이미지가 스크롤에 따라 scale이 줄어드는 효과htm

반응형, 클론코딩사용언어 : html, css라이브러리 : j-query, swiper제작기간: 4일swipertransitionselectlabel select1\. swiper

적응형 Mobile, 클론코딩사용언어 : html, css라이브러리 : j-query, swiper제작기간: 3일svg 사용스크롤 시 나타나는 headerhamburger menusearch formquick button

적응형 PC, 클론코딩사용언어 : html, css제작기간: 3일시멘틱 마크업class 네이밍 규칙image sprite 사용시멘틱 마크업은 글자 그대로 해석하면, '의미론적인 HTML 태그 문서 작성'을 뜻합니다. 즉, 의미를 잘 전달 할 수 있도록 HTML 태그 문

display: -webkit-box; overflow: hidden; max-height: 40px; line-height: 20px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; white-space: ...

화면분할화면 수직 분할: Ctrl + K Ctrl + \\화면 분할: Ctrl + \\

HTML요소에 접근 가능한 설명용 텍스트를 넣을 수 있다.화면에 현재 요소를 설명할 텍스트가 없을 경우에 사용하는 설명용 텍스트를 담고있다.