그냥, 일단 써내려가자

HTML 상품명 가격 상품선택 모자 셔츠 바지 Products Information Shipping 상품설명입니다. Product 스펙설명입니다. Information 배송정보입니다. Shipping 사용된 문법 .eq(number) : 선택한 배열의 number번째 요소를 불러온다. .val(...) : 선택한 요소의 value값을 가져온다. 변수에 값 할당 시 ""를 사용할 경우 줄 바꿈이 생기면 코드 진행이 끊기기 때문에 줄 바꿈을 이용할 경우 ``를 사용하기 .html(...) : 선택요소의 내부에 (...)안 코드를 교체해 준다. .append(...) : 선택요소의 내부에 (...)안 코드를 추가해 준다. .forEach(function(a, i){} : 배열에 쓸 수 있는 반복문 함수. a는..

.test() 함수 사용 /.../.test(요소) 요소에 ...가 있는지 확인 /a/.test(요소) : 요소에 a를 포함하고 있으면 true 반환 /[a-z]/.test(요소) : 요소에 a부터 z까지 소문자가 있으면 true 반환 /[A-Z]/.test(요소) : 요소에 A부터 Z까지 대문자가 있으면 true 반환 /[ㄱ-ㅎ]/.test(요소) : 요소에 ㄱ부터 ㄴ까지 자음이 있으면 true 반환 /[0-9]/.test(요소) : 요소에 0부터 9까지 숫자가 있으면 true 반환 /^a/.test(요소) : 요소가 a로 시작하면 true 반환 /a$/.test(요소) : 요소가 a로 끝나면 true 반환 /\S/.test(요소) : 요소에 아무 문자 하나를 포함하고 있으면 true 반환 /\S+@\..

스크롤 유도 애니메이션 See the Pen 스크롤 유도 액션 by TytanLee (@TytanLee) on CodePen. 애니메이션(딜레이 조절)을 활용한 스크롤 유도 효과

Clip-path를 활용한 마우스오버 효과 See the Pen Hover 이미지 슬라이드 효과 by TytanLee (@TytanLee) on CodePen. clip-path를 활용해서 디테일한 움직임을 보여줄 수 있는 모션

카드형 이미지 마우스 오버 효과 See the Pen [css]hover 효과 참고(scale) by TytanLee (@TytanLee) on CodePen. transform과 transform-origin을 활용한 마우스 오버 효과

주목을 시키고 싶은 텍스트에 활용하기 See the Pen 텍스트 파도 애니메이션 by TytanLee (@TytanLee) on CodePen.

See the Pen Untitled by TytanLee (@TytanLee) on CodePen. 코드에 대한 설명은 같이 나와있고 지켜야할 점은 - 부모 : perspective 설정 - 자식 : transform-style: preserve-3d 설정 - 손자 : 효과 구현 요소 위 양식을 지켜야 한다. 참고 블로그 : Web Club , nykim

HTML - 다운로드 바로가기 CSS - body { text-align: center; padding: 40px; } .btn a:hover .arrow::after { left: 6px; } .btn .btnTxt { display: inline-block; position: relative; padding: 10px 28px 10px 20px; color: #fff; background-color: #00cc00; border-radius: 8px; } .btn .btnTxt span { color: #a3f2a3; } .arrow { position: relative; } .arrow::after { position: absolute; left: 4px; top: 6px; content: ''; ..

css에 :hover를 사용해서 hover를 지정하면 반응형 웹에서는 페이지 이동 전에 hover 효과가 나오고 이벤트가 실행됨. 이걸 해결하기 위해서는 미디어쿼리 hover 코드를 사용. 일반 미디어쿼리 사용과 동일하며 아래 코드를 사용하면 됨 @media (hover: hover) { a:hover { color: red; text-decoration: underline; } }

# 언어 버튼 누르면 설정 버튼 나오는 기능 See the Pen toggle로 클래스 추가할때 추가하는 클래스 붙여쓰기 by TytanLee (@TytanLee) on CodePen. # 자바스크립트를 이용해서 css를 추가할때 언어 버튼 클릭 시 언어를 선택하는 버튼들이 나오는 코드를 만들어서 js로 클래스 추가 기능을 넣었고 console에서 클래스가 추가 되었는지 확인까지 했는데 'display:block;'이 적용이 안되는 현상 발견 클론 사이트 들어가서 확인하니 추가할 클래스를 붙여서 쓰는거 확인 css 54번째 줄 'header .rightTab #langUl .langOn' > 처럼 띄어쓰지말고 아래처럼 추가시킬 태그에 클래스 붙여쓰기 'header .rightTab #langUl.lang..