HTML/CSS를 공부하면서 느낀점

1. HTML/CSS를 공부하면서 느낀점

전부터 느꼈지만 html/css는 재밌다. 결과물을 바로바로 눈으로 확인할 수 있다는 점과 내 의지대로 만들어 가는 웹 세상이 참 매력적이다. 이번에 공부하면서 '웹 접근성' 이라는 개념에 대해 알게 되었다. aria-label, tabindex 등을 사용하는데 웹 접근성을 공부할 수록 프론트엔드의 필수적인 공부라고 느꼈다.  누가 모르더라도(알아주면 좋지만) 그를 위한 배려를 하며 살자는 내가 생각하는 삶의 방향과 사용자의 편의성을 생각해 일하는 프론트엔드의 업무와 닮았다. 그래서 프론트가 끌렸나보다. 

마크업을 끝내고 css를 입히는데 태그에 따라 flex, position으로 배치하는 어려움이 있어 inline 요소, block 요소를 가진 태그를 생각하며 html을 다시 수정하고 css를  입히느라 시간이 많이 소요됐다. 마크업 단계부터 태그가 어떤 요소인지 생각하고 시멘틱 구조로 설계하는 것이 웹 접근성의 첫번째 단계였다. 구조를 생각한다고 했는데도 많은 수정이 필요했다.

다행인것은 mission-01부터 05까지 진행하는데 01에서 5일 걸리던 시간이 점차 줄어들어 03은 과제 마무리까지 총 하루가 소요됐다. 04, 05는 js와 웹 접근성, 그리고 더욱더 세분화되고 어려운 과제가 포함되어 있어서 시간이 더 필요했지만 마크업에 있어서는 처음 피그마와 요구사항을 열심히 읽어보고 바로 작성해서 4~5시간에 끝이났다. 역시나 연습이 답이다.

 

 

• 웹 접근성(정보통신접근성)

 - 일반인, 장애인, 고령자 등  모든 사용자가 신체적, 환경적 조건에 관계없이 웹에 접근하여 이용할 수 있도록 보장하는 것.  

 

 

 

2. HTML/CSS 공부하면서 어려웠던 개념과 이유

가장 어려웠던 것은. inline,block 요소를 가진 태그와 위치를 잡는 요소들의 사용이었다. inline, block 요소들은 점차 헷갈림이 줄었고 css에서 grid를 사용하는데 하루가 걸렸다. 자꾸 내가 설정한 grid 구역보다 전체 크기가 작게 나와서 원인이 item 배치인줄 알고 grid-column-start/end, grid-row-start/end, 열심히 계산했는데 결국 원인은 div에 있었다. gird-area로 설정한 class이름이 들어간 div 태그를 div로 또 감쌌더니 내가 생각한 grid 영역과 다른 결과가 나왔던 것이다.  

생각보다 어려웠지만 해냈고 뿌듯했다.

3. 제로베이스 온라인 강의 중 가장 도움이 되었던 강의와 이유

7 - 처음부터 따라해보는 HTML/CSS 실습

클론코딩이 들어가 있어서 연습하기 좋다.  알려주시는 개념은 기초를 약간 알고 있는 사람에게 추천한다. 처음 하는 사람에겐 조금 더 설명이 필요할 것 같다.  

 

8 - 기본부터 끝까지 러닝메이트 HTML/CSS

굉장히 디테일해서 좋다. 기본부터라는 이름처럼 다른 강의들에서 좀 부족한데? 라고 생각했던 부분까지 다룬다. 블로그는 거짓과 진실이 뒤죽박죽 뒤섞여있고 공식문서는 어렵고 마음은 초조하고 그럴때 이 강의를 찾아보면 좋다. 강의 한번 보고 다시 개념을 상기 시키고 블로그를 보며 따라 하곤 했다.

9 - HTML/CSS 장인의 핵심정리 & 프로젝트 0/71

본격적으로 프로젝트를 돌입하는 파트이다. 프로젝트에서 쓰이는 sass라는 개념을 배운다. 굉장히 편리하다. 프로젝트를 따라하면서 재밌었고 밥아저씨가 생각났다. 

이분 강의를 보고 내가 프로젝트를 진행할때 항상 의문이었던게 '왜 나는 매번 자식들한테 width, height를 줘야 맞춰지냐'는 것이다. 메뉴상단 탭바를 만들때도 균일하게 패딩만 주면 알아서 크기를 잡는 방법이 있을텐데 flex를 잘못 사용했는데 li한데 width, height를 텍스트 크기에 맞춰 다 주었다. 노가다로 맞춰서 아쉬운 부분이 많다.

10 - 5시간 만에 완성하는 핵심 마크업

요점 정리가 잘 되어 있어서 개념을 빨리 익혀야 하는 초심자 들에게 좋다. 제목 그대로 5시간, 짦은 시간안에 익혀야 하는 사람에게 좋다. 반면에 깊게 배우려는 사람에게는 많은 것이 부족하다 느낄수 있다.

 

네분 강사님의 강의를 듣고 나니 강의배치가 기가 막히게 되었구나 느꼈다.  담당자분 참 배치를 잘 하신것 같다. 처음부터 디테일 하게 강의를 들으면  지쳤을 테니 7번 강사님 배치. 그리고 부족한 부분은 8번 강사님으로 채우고 9번 강사님으로 본격 프로젝트 돌입. 그리고 마지막에 10번 강사님으로 개념을 다시한번 상기 & 정리.  어떤 의도인지 느껴졌다. 👍👍

 

4. 나만의 공부팁 

 

(예, 다시 공부한다면 어떤 순서로 공부하고, 어떤 강의를 들으면서 공부할 거 같다)

 

강의를 다 듣고 과제를 시작해야지 하는 생각에 3주차에 과제를 열었다. 잘못된 생각 이었다. 그래서 프로젝트 제출을 이틀이나 늦게 했다. 2주동안 매번 새벽까지 진행해서 겨우 그정도 였지 아니었으면 더 늦었을것 같다. 2달, js과제는 처음부터 숙지하고 공부를 시작할 생각이다. 강의는 믿고 순서대로 듣되, 과제는 처음부터 숙지하고!!

강의를 들으면서 듣기만하는게 아까워 틈틈히 공개, 비공개로 스샷찍어가며 블로그 글을 남겼는데 그래서 공부 더 시간이 더 소요 됐다. js는 더 오래 걸릴 텐데 수면시간을 줄여야지 별수 없다.

 

 

 

 

참고

한국웹접근성인증평가원 -  https://www.wa.or.kr/m1/sub1.asp