HTML, CSS, JavaScript 분석: Peter Peter
더듬이
pitterpetter.com
| HTML | CSS | 자바스크립트 | |
| 머리 | 문자 집합 | ||
| 메타 | |||
| 제목 | |||
| 파비콘 | |||
| 몸 | 헤더 | 위치 Z-색인 맨 위 왼쪽 오른쪽으로 키 아래 가장자리 배경색 |
|
| 배너 | 상단에 패딩 배경색 글꼴 크기 글꼴 두께 문자 간격 상자 크기 |
롤링 배너 영역 | |
| 회사 소개 | 불투명 변환 전환 속성 전환 타이밍 기능 과도기 위치 보더 업 상단에 패딩 포인터 이벤트 |
||
| 서비스 소개 | 불투명 변환 전환 속성 전환 타이밍 기능 과도기 위치 보더 업 상단에 패딩 포인터 이벤트 |
아래로 스크롤할 때 아래에서 새로 페이드 인된 영역의 페이드 인 효과 | |
| 리뷰 | 불투명 변환 전환 속성 전환 타이밍 기능 과도기 보더 업 상단에 패딩 포인터 이벤트 |
– 아래로 스크롤하면 새로 표시된 영역이 아래에 나타납니다. – 후기 영역 슬라이드 |
|
| 자주 묻는 질문 | 불투명 전환 속성 변환 전환 타이밍 기능 과도기 위치 보더 업 상단에 패딩 |
아래로 스크롤할 때 아래에서 새로 페이드 인된 영역의 페이드 인 효과 | |
| 보행인 | 보더 업 아래 패딩 글꼴 크기 상자 크기 글꼴 패밀리 |
||
| 기간 | 왼쪽 맨 위 위치 키 넓은 경계 반경 배경 포인터 이벤트 |
마우스 포인터 애니메이션 | |
분석된 내용 중 하나를 선택하여 기능을 구현한 코드에 어떤 일이 일어나는지 알아보고 간략하게 요약해 보세요.
웹 페이지에서 마우스 포인터의 위치 값에 해당하는 녹색 원을 보여주는 애니메이션이 화면 내부에 구현됩니다.
정확하지는 않지만 requestAnimationFrame() 함수로 span 태그를 통해 애니메이션을 화면에 표시하는 것 같습니다.
Chrome 브라우저에 따라 F12 또는 보기 메뉴 → 개발자 정보 → 개발자 도구를 클릭하여 코드 구조를 확인합니다. (예시) URL, Image, Text, CSS Style 등
URL, 이미지, 텍스트, CSS 스타일이 적용된 푸터 영역의 HTML 소스를 예시로 첨부했습니다.
