개요
위코드에서 자기소개 페이지 과제를 1주차 과제로 내주었다.
그래서 자기소개 페이지를 만들기 전에 어떻게 디자인을 할건지 구글링하며 고민을 하다가 해당 벨로그의 디자인이 마음에들어 참고를 했다.
https://velog.io/@dumibell/%EC%9E%90%EA%B8%B0%EC%86%8C%EA%B0%9C-%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%A7%8C%EB%93%A4%EA%B8%B0HTML-CSS
하지만 이번엔 평소처럼 스스로 코드를 짜기보다 다른 사람이 짜놓은 코드를 적극적으로 따오기로 결심했다.
유튜브에 있는 코딩 컨텐츠 채널들을 보면 개발자에게 필요한 능력 중에는 다른사람이 작성한 코드를 따올 줄 아는 것도 능력이고, 과감하게 가져올 줄도 알아야한다는 말 때문에 이번에는 해보기로 했다.
자바스크립트 이벤트
코드
/* 커서 올릴 시 이미지 크게(모든 이미지 파일에 적용) */
img:hover {
transform: scale(1.7);
-webkit-transform: scale(1.7); /* 크롬 */
-moz-transform: scale(1.7); /* 파이어폭스 */
-o-transform: scale(1.7); /* 오페라 */
z-index: 1;
align-items: center;
}
.roadmap r{
font-size: 55px;
font-weight: 700;
font-family: 'Oswald', sans-serif;
}
/* for layout */
.roadmapbox {
width: 1000px;
}해당코드는 위의 이미지처럼 마우스 커서를 이미지 위에 올렸을때 이미지가 일정 크기만큼 확대되는 기능이다.
해당 기능을 처음부터 지원할 수 있는 브라우저는 브라우저마다 다르므로, 기능이 작동하기 위해서 사람들이 자주쓰는 브라우저 위주로 추가적으로 코드를 적어줘야 했다.
후기
평소와 다른 방법으로 공부를 하다보니 색다른 점이 많았다. 무엇보다 코딩을 하다보면 평소에 자주쓰는 메서드만 알지, 새로운 메서드는 항상 찾아봐야하고 어떤 메서드가 있는지 존재조차 모르는 경우가 많다.
하지만 이번 클론코딩을 통해 존재조차 몰랐던 메서드를 별다른 노력없이 효율적으로 접할 수 있었고, 내가 원하는 기능에 맞게 변형하며 구현하다보니 디버깅 하느라 고생을 좀 했는데 고생한만큼 메서드에 대한 이해도까지 높일 수 있어서 직접 코드를 짤때만큼의 이해능력이 필요하기도 했다.
