2024.04.19 - 2022.05.02
숨고 홈페이지 클론코딩
https://github.com/miniBcake/clone_coding.git
HTML, CSS, JavaScript 능력 향상을 위해 ‘숨고:숨은고수’ https://soomgo.com/ 페이지에서 메인페이지와 로그인, 회원가입 페이지를 클론 코딩 진행하였습니다.
로고, 컨텐츠 이미지, 아이콘 등의 소스는 클론코딩 대상 사이트에서 다운로드 받았으며, 개발자 도구는 가장 최소한으로 사용하는 규칙을 정하고 시작하였습니다.
[개발자 도구 : 폰트 종류, 색상코드, 페이지 너비 확인 등 기초적인 정보만 조회/코드는 보지 않음]
[배너슬라이드 기능 구현]
화살표와 하단 도트 클릭을 통해 슬라이드 이미지를 넘겨볼 수 있는 기능을 구현하였습니다.
첫번째 슬라이드에서만 왼쪽 방향 화살표의 색상을 변경하고 이벤트를 제거하여 슬라이드 이미지 개수를 넘어서는 화면으로 이동하지 않도록 하였으며, 마지막 슬라이드에서는 오른쪽 방향 화살표에 같은 기능을 구현하였습니다.
하단 도트는 왼쪽부터 1, 2, 3번의 배너 이미지를 의미하며, 도트를 클릭하면 해당하는 이미지 페이지로 이동할 수 있도록 구현하였습니다. 도트를 통해 이동할 때에도 화살표 버튼이 알맞게 동작할 수 있도록 연동하였습니다.
[입력값 유무 검사 기능 구현]
로그인페이지 방문 후 첫 선택 때에는 푸른 박스 쉐도우가 뜨도록 하였으며, 그 이후 사용자가 다른 곳을 선택하였을 때 값이 없다면 붉은색 테두리로 변경되도록 하였습니다.
다시 붉은 입력창을 선택할 경우 푸른 쉐도우가 아닌 붉은 쉐도우가 뜨게 되며, 값을 입력할 경우 다시 회색 테두리로 변경됩니다.
[HTML 과 CSS를 이용하여 호버 기능을 구현]
회원가입 버튼 위로 마우스를 올렸을 때 해당 버튼이 눌리는 버튼이라는 것을 안내해주기 위해 호버 효과를 넣었습니다.
4개의 버튼은 기본적인 틀이 동일하기 때문에 같은 버튼으로 지정해 둔 뒤, 색상만 따로 지정하여 구분하였습니다.
