오늘 해온 일

마크업 세부 수정

사용자가 입력을 쉽게 할 수 있도록 마크업 구조를 변경했다.

radio 값 받아오기

input에 있는 내용을 id값으로 값을 가져왔었는데 radio 버튼의 값을 가져오는 방법이 달라서 따로 찾았다. 참고로 select는 동일하다
const gender = $('input[name ="user-gender"]:checked');

VS Code의 피그마 확장 프로그램 발견

CSS 스타일을 어떻게 적용할까 고민하면서 찾아보던중 VS Code에도 피그마 extension이 있다는 것을 알게되었다. 이번 2023년에 업데이트를 하면서 개발모드를 강화했고 그 중에 하나가 VS Code애 Figma for VS Code extension을 추가한 것이다..!
피그마와 VS Code를 왔다갔다하면서 코드 치기 번거롭다는 생각이 들었는데, 이게 추가 됨으로써 피그마 extension에서 디자인한 요소를 누르고 CSS파일에서 작성할때 코드 자동 완성으로 속성을 제안한다.
내가 즐겨쓰는 피그마와 VS Code의 조합이라 이것을 알게되어서 기쁘다.
이 기능이 좀 더 강화된다면 나중에는 BootStrap, Tailwind CSS가 사라지지않을까 감히 예상해본다.

CSS Normalize 활용

User Agent Stylesheet라고 불리는 브라우저 내장 스타일이 브라우저마다 조금씩 다르다.
브라우저에 구애받지 않고 최대한 동일한 사용자 경험을 제공하겠다는 동일한 목표를 가지고 있습니다.
Normalize.css 선택
CSS Normalize는 가능한한 브라우저의 내장 스타일을 최대한 건들지 않는 선에서 브라우저 간에 상이한 부분만 스타일을 통일시켜 주는데요.
CSS Normalize가 적용된 웹페이지는 어느 브라우저에서든 일관적인 모습으로 나타나게 됩니다.
일정이 빡빡한 소규모 프로젝트 경우 모든 HTML 요소를 처음부터 스타일 할 여력이 되지 않기 때문에 CSS Normalize가 좋은 대안이 될 것입니다.
여러 가지 오픈 소스 CSS Normalize가 있지만 Normalize.css가 가장 대중적으로 사용되고 있습니다.
출처 : DaleSeo님의 css-normalize-reset

스타일 기본 구조 생성

처음부터 일일히 짜기에는 시간이 너무 오래걸릴것같아서 이전에 있던 코드(내 포트폴리오 만들때 썼던 scss파일)들을 재활용했다.

오늘의 회고

잘한점

쉬고 싶은 마음을 참고 마크업에서 부족한 부분들을 고쳤다.
피그마의 VS Code 확장 프로그램이 있다는 새로운 인사이트를 얻었다.

아쉬운 점

하루정도 쉬어간다는 핑계로 시간을 많이 투자 못한 것

보완할 점

좀 더 빠른 진행 속도가 필요하다