FES7 3주차 WIL

멋쟁이 사자처럼 프론트엔드 스쿨 7기 3주차 후기

 

새로 알게 된 것

• table
  • 표에서 데이터가 없는 경우 공백을 넣어줘야 접근성에 좋다.
  • 접근성을 위해 스코프 또는 아이디헤더도 적용해야 한다.
• svg
  • svg 태그 내부 path에 지정된 색상, 크기 등의 속성을 바꿀 수 있다
• gird 사용 방법

CSS Grid 정리

• 초점, 마크업 순서, 대체 텍스트 중요성
  • 초점은 의미 있는 콘텐츠에 적용되어야 하며, 초점 이동은 논리적인 구조에 맞게 적용되어야 한다.
  • 레이어 팝업 만들 때 접근성 생각할 것. 화면낭독 프로그램 접근을 제한하지 않도록 만들어야 한다.
  • 둥둥 떠다니는 메뉴는 언제든 접근할 수 있도록 만든 메뉴로 마크업이 우선시 되어야 한다.
  • 콘텐츠의 대체 텍스트가 올바르게 지정되어야 스크린 리더 사용자들이 장애를 겪지 않는다.
  • 보이지 않는 텍스트를 넣을 때에 스크린 리더 기능과 초점 이동을 고려해야 한다.
• 반응형 작업 - 미디어쿼리, srcset 속성 사용 방법을 배웠다.(포스팅 예정..)

 

---

특이사항

flex-basis/grow/shrink 개념은 잡혔으나 이제는 grid-auto-columns, grid-auto-rows 사용이 이해가 잘 되지 않는다. 둘 중 하나는 지정 값을 줘야 나머지 하나가 자동으로 배치되는 건가 싶은데 아직 잘 모르겠다.

 

---

참고

스택오버플로우 - 개발자들의 지식인 같은 곳! 친구가 JS이해 안 될 때 질문 남기면 답변 빠르다고 추천해 줬다.

Stack Overflow - Where Developers Learn, Share, & Build Careers

메이커준 강사님 노션 

함께, 밝게, 나답게 성장하는 ‘환경’을 만드는 메이커준입니다.

 

---

회고

3주 차가 지났다. HTML, CSS 진도를 다 나간 것 같은데 혼자서 페이지를 구현하기는 아직 쉽지 않다. CSS 속성을 적용하면서 계속 기본적인 실수를 반복했다. 너비, 높이 값을 계속 적용하려고 했는데 안 됐었다. 왜 안되는지 계속 생각하다 보면 대부분 인라인 요소인 것이 원인이었다. 너무 기본적인 부분에서 계속 실수하는 내가 답답했는데 이제 그래도 금방 원인을 찾아내기는 한다.

 

3주 차에는 grid, animation, svg, form, 미디어쿼리, 반응형 이미지에 대해서 배웠다. svg 태그 내부 path 안에서 색상을 바꿀 수 있다는 걸 알고 신기했다. 블로그에 그리드 속성 관련 포스팅을 했는데, 속성에 대해 정리하면서 공부가 많이 됐다. 근데 공부하다 보니까 또 이해가 안 되는 부분이 생겼는데 그 부분은 아직 100% 이해를 하지는 못했다. 직접 여러 번 사용해 봐야 이해할 수 있을 것 같다. form 태그 관련 정리도 하고 싶었는데 정리를 위해 method 속성값인 POST와 GET에 대해서 찾아보다 보니 HTTP 메서드로 접근하게 됐고, 내용이 점점 깊어져 머리가 아파졌다. 시간이 너무 오래 걸릴 것 같아서 HTTP는 나중에 따로 공부하기로 하고, 이번에는 기본적인 내용 위주로 간단하게 정리하기로 했다.

 

월요일에는 메이커준님께서 진행하는 스프린트회고 시간이 있었다. 내가 실력이 있다는 것을 증명하기 위해서는 피드백이 중요하다고 말씀하셨다. 또, 한 가지 기술 스택을 깊게 파는 것이 중요하다는 말씀도 해주셨다. 스프린트 회고 시간에는 목표를 재설정하는 시간을 가졌는데 수업이 끝나고 그 부분에 대한 생각이 많아졌다. 나는 아직 모르는 게 많은 기초 공부를 하는 상황이고, 매일 수업한 내용들 깃헙에 올리고 있는데 그 커밋의 질이 좋다고는 말할 수 없다고 생각한다. 그렇다면 이건 의미 없는 커밋일까? 이 생각이 들며 올리지 않는 게 좋은 건지 고민이 됐다. 며칠을 고민한 뒤 내린 결론은 그냥 커밋을 하자! 이다. 내가 성장하고 있는 부분을 보여줄 수 있는 지표라는 생각이 들었고, 매일 공부한 흔적을 남기는 것에서 오는 성취감이 다음날도 내가 움직일 수 있도록 만들어 준다고 생각한다.

 

금요일에는 오전에 카카오 디지털 적합성 책임자이신 김해일 님의 웹 접근성 특강이 있었다. 접근성을 보장해 놓아야 장애를 겪는 사람들이 모인다고 말씀하셨다. 사회적 약자들도 동등하게 웹페이지를 사용할 수 있게 만들기 위해서는 고려해야 할 것들이 정말 많았다. 특강을 듣고 나니 마크업 하는 것이 너무 어렵게 느껴졌다. 대체 텍스트 내용도 신경 써야 하고, 초점이동, 스크린리더 기능 등을 모두 고려해야 하는데 정말 어렵다. 좋은 마크업에 관한 공부가 더 필요할 것 같다.

 

금요일 오후에는 종찬 님의 CSS 특강이 진행됐다. 지난주의 내가 공부를 열심히 했는지 이번 주 특강에서는 알고 있었던 내용도 나와서 약간 뿌듯했다. 이번 특강을 통해서 플렉스에 대한 개념이 더 잘 잡혀서 좋았다. 기본을 바탕으로 알려주시는 특강이라 참 유익하다.

 

지난주에 다음 주 목표로 설정한 것 중에 제대로 한 게 없다. 복습을 하는 게 생각보다 오래 걸려서 다른 것에 시간을 쓰기가 힘들었다. 너무 많은 것을 하려고 하지 않고, 복습과 예습을 꾸준히 하는 것을 목표로 바꿔야겠다. 4주 차도 파이팅!

 

---

다음 주 목표

• 복습 밀리지 않기
• 실습 페이지 다시 만들기