웹 포트폴리오 서비스 개발 스터디 (1)

스터디 시작 계기

인프런 학습 중 input을 활용하여 포트폴리오를 손쉽게 만드는 서비스를 제공하는 사이트 구축 아이디어를 고안해 혼자 스터디를 시작하였다. 

예상도

문제해결 

1차 HTML

강의에서는 span태그를 사용해 소프트웨어 이름을 직접 설정했지만, input코드를 이용해 사용자가 직접 수정할 수 있도록 하였다.

number 화살표와 %span 겹치는 상황 발생

리서치를 계속해봐도 number 태그에 따라오는 화살표를 없애거나 크기조절 관련 내용만 많고 화살표를 텍스트 앞에 배치하는 방법은 나와있지 않았다.

흔한 경우는 아니겠지만 나는 %퍼센트 스팬을 숫자와 딱맞게 하고싶기 때문에 옮기는것이 불가피했다.

하지만 셀렉트태그처럼 텍스트 옆쪽이 고정인 것 같았고(아닐 수도 있다.) 그래서 그냥 오른쪽 마진을 내주고 너비랑 앱솔루트로 해결했다. 기능상 문제는 없으니 몇시간 애쓴게 헛되지는 않은 것 같다.

디벨롭 계획

앞으로 적용해야할 것

대략적인 레이아웃은 정리 되었지만 가장 중요한 기능 구현단계는 아직 멀었다.

따라서 아래 스터디 방향을 까먹지않게 적어두어 이번달안에 완성해보려한다.

1. input num 태그의 입력값에 따라 progress 바가 변환되는 것
   (자바스크립트에서 관련 내용 찾아보기, 이를 css width 란에 바로 값을 가져올 수 있는지 검색)
2. progress 바의 색을 랜덤 추천 & #색상코드로 직접 입력하는 필드 만들기
3. 최종적으로 완성한 페이지를 내보내는 버튼 만들기
4. 완성

---

2022.01.27

제이쿼리 구문으로 1. progress bar의 css 속성 변경시킴

+ 첫번째 아이템 값만 반응함 + click 버튼이 있어야함