프론트엔드2 Progress Steps 구현하기(50 Projects In 50 Days 강의 실습 - 2) 2번째 프로젝트 제목은 "Progress Steps"다. 진행 정도를 나타내는 기능인데, 검은색 테두리로 이루어진 원 4개가 검은선으로 이어져 있는 상태에서, "Next" 버튼을 누르면 다음 원까지 선이 진행되었다는 의미의 파랑색으로 변했고, "Prev" 버튼을 누르면 이전 원까지 파란선의 길이가 줄어든다. 이 기능도 어느 웹사이트든 자주 사용되는 거여서 열심히 들었다. 일단 결과물부터 보자! 이번 프로젝트 난이도는 이전 "Expanding Cards"보다 어려웠다. 원을 만들고 원 사이에 선을 하나 긋는다는 게 말은 쉽지, 코드로 구현하려니 갑자기 머리가 안 돌아갔다. 결국 또 다시 시작되는 정보 찾아 삼만리... 인터넷 줍줍을 시행한다! 크기를 10px에서 30px로 늘리는 등 이리저리 강사의 코드를.. 2024. 3. 7. CSS-자바스크립트 프로젝트 실습(50 Projects In 50 Days 강의) 국비과정을 하면서 좋았던 점은, 웹의 전체적인 과정을 한번씩 훑어본다는 것이다. 안 좋았던 점 역시 마찬가지. 각 분야마다 훑어보기만 하지 깊숙하게 들어가거나 체득할 시간을 주지 않는다. 2번의 팀프로젝트를 진행하면서 프론트를 할 기회가 있었지만, 내가 맡은 포지션은 주로 백엔드쪽이었다. 프론트를 다루더라도 js위주로 다뤘지 css쪽은 거의 다루지 않았다. 그래서일까, 내가 개인프로젝트로 만든 것은 화면이 너무 밍밍한 나머지 어디 내놓기 민망할 정도였다. 이리저리 굴러다니는 웹땔감으로써, 백엔드를 지원하더라도 어차피 강제 풀스택이 되는 건 자명한 사실. 십중팔구 프론트를 만지게 될텐데, CSS를 못 다루니 큰일이다. CSS를 배울 때는 이론보단 실습 위주로 하는 게 좋다고 하니, 따라하면서 배울 만한 강.. 2024. 3. 6. 이전 1 다음
