💥 HTML+CSS만 사용해 오버워치 캐릭터 선택화면 구현하기!
(해당 예제는 패스트캠퍼스 온라인 강의를 참고하였습니다)
- 매우 간단한 구조이므로 코드 리뷰 없이 배운점만 간단하게 작성하겠습니다.
💬 Github : https://github.com/JIWON-MIN/Overwatch
🌟🌟🌟배운점🌟🌟🌟
- 전에 프로젝트를 진행했을 때는 막무가내로 구조 넣어놓고 하나하나 디자인 정리하느라 굉장히 오래걸렸는데, 전반적인 그림을 알고 시작하니 훨씬 편리하고 빨랐음 -> 앞으로는 꼭 세부디자인 처음부터 고려하자
- transition은 전환 transform은 변환! -> 움직이는 효과는 transition 사진 자체변경은 transform 헷갈리지 말자
- box-sizing에 따른 크기변환 익숙해지자
- 화면을 줄였을 때 구조가 답답하면 padding 사용 -> 내부여백은 바뀌지 않을테니
- .classname 입력 후 엔터치면 div 태그 자동으로 생성됨 익숙해지자
- .hero*32>.img hero 클래스 태그 32개 만들고 그 안에 전부 img 넣은 것
<html lang="en"/>에서 en->ko로 안바꿔주면 브라우저가 영어로 인식해 번역할까요? 물어봄
2년차 프론트엔드 개발자의 소소한 기록을 담습니다 :-)