[패스트캠퍼스X야놀자 프론트엔드 개발 부트캠프] HTML/CSS 과제

✨ HTML/CSS 과제 

 

📌 과제

원하는 사이트 레이아웃 클론

원하는 사이트를 자유롭게 선택하고 레이아웃을 클론 코딩하고, 코드 리뷰 후 리팩토링을 진행한다.

 

 

💸 사이트

뱅크샐러드 실제 사이트 : https://www.banksalad.com/

뱅크샐러드 데모 사이트 : https://64c37bf4ce7d850008dc2dd8--stellular-cranachan-a24baf.netlify.app

 

완성 모습

 

 

📝 코드 리뷰

1. gitignore 파일 업로드

파일 경로를 수정하면서 gitignore가 적용되지 않아 DS_Store 파일이 깃허브에 올라가는 이슈가 발생했다.

👉🏻 캐시 제거 후 .gitignore 파일 경로 수정해서 다시 커밋

 

 

2. reset.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

모든 요소에 reset 적용하여 사용하지 않는 요소들에도 모두 reset을 적용했다. 불필요한 css를 제거하고 상위 > 하위 순서로 조정해나가보도록 해야겠다.

👉🏻 실제 사용하는 css 속성만 남겨두고 제거

 

 

🛠️ 리팩토링

1. 업로드된 gitignore 파일 제거

git rm --cached public/.DS_Store

 

// .gitignore
public/.DS_Store

DS_Store 파일 제거 완료!

 

 

2. 사용하지 않는 reset.css 제거

html, body, address, ul, li {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

실제 사용하는 속성에만 reset 적용!

 

 

🥊 해결하지 못한 이슈

애니메이션 파일 제대로 작동 X

시도한 방법 1) lottie-player

https://lottiefiles.com/svg-to-lottie

Convert SVG to Lottie - Free Online Converter - LottieFiles

<lottie-player 
    src="./assets/card-animaion.json" 
    background="transparent"  
    speed="1"  
    style="width: 300px; height: 300px;" 
    loop controls autoplay>
</lottie-player>

 

화면에 나타나기는 했지만, player 버튼을 눌러도 애니메이션이 동작하지 않았다. 여러 가지 설정을 바꿔보았지만 여전히 움직이지 않았다..

 

 

 

시도한 방법 2) bodymovin

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.6/lottie.min.js"></script>

 

let anmation = bodymovin.loadAnimation({
    container : document.getElementById('animation-view'),
    renderer : 'svg',
    loop : true,
    autoplay : true,
    path: './assets/card-animation.json'
});

 

JS를 사용하여 적용해보았지만, 이번에도 애니메이션이 제대로 작동하지 않았다. 여러 가지 레퍼런스를 참고하여 시도해보며 리팩토링 기간 동안 해결해보려 했으나 끝내 해결하지 못했다..

 

 

🎀 느낀 점

팀원들과 멘토님께 받은 코드 리뷰를 바탕으로 리팩토링을 진행해본 건 처음이었는데, 내 시야에서 보이지 않았던 것들을 다시 볼 수 있게 되었다. Lottie 사용이 익숙하지 않아 애니메이션 적용을 해결하지 못한 것이 아쉬웠고, 앞으로 더욱 열심히 공부해야겠다는 다짐을 할 수 있게 되었다. 앞으로 코드 리뷰와 리팩토링하는 경험이 익숙해지면서 더욱 효율적이고 좋은 코드를 짤 수 있도록 나아갈 수 있길 기대한다!