[제로베이스] HTML/CSS미션을 마무리하다.

들어가며... 

 

제로베이스 프론트엔드 스쿨(6개월 과정)을 시작한지 어느덧 6주차가 되며 

5.10(수)요일 첫 번째 관문? 인 HTML/CSS 미션을 마무리하게 되었다. 

결론부터 이야기 하면, HTML/CSS 미션을 수행하며 마크업 실력에 있어서 많이 성장 했음을 느낀다.

 

---

 

1. HTML/CSS를 공부하며(미션을 진행)하며 느낀점

 

제로베이스의 HTML/CSS 미션은 총 5개로, 구현해야할 피그마 디자인 파일과, 혼자 공부했으면 생각하지 못했을?

하지만 꼭 알아야할 요구사항들이 주어지고 , 디자인과 요구사항을 체크하며 구현해 나가는 과정이다. 

 

나의 미션1의 진행 과정을 간단히 적어보겠다.   

<첫쨰날>

미션의 요구사항을 보고, 나 지금까지 무슨 공부 한거지? 라는 생각이 들었다.

다시 요구사항을 하나하나 검색해가며 HTML미션을 수행해 나갔다.(생각보다 HTML은 수월하게 작업했다.)

하지만, CSS의 float속성을 사용해서 layout을 잡는것에서 막혀서 첫날은 이렇게 마무리했다.

<둘째날>

float속성에 대한 이해가 필요할 것 같아, 다시 천천히 강의를 듣고 천천히 수행해서 레이아웃을 잡는것에 성공했다.

( 코드가 마음에 들지는 않지만, 어쩃든, 구현은 했으니깐..)

<셋째날 , 넷쨰날>

이번에는 hover, focus 같은 가상클래스를 이용하는것에서 막혔지만, 계속 검색하고 시도해보니, 요구사항에 맞게 구현은 성공했다.

 

미션을 진행하던 도중, 팀원들의 help요청에 도움을 주게되는 상황이 몇번 있었는데, (도움을 받은상황도 물론 있었다)
1. 우선 내가 팀장을 맡고있고,
2. 해당미션을 완료했고
3. 고작 4명인 팀에서 한사람도 포기하지 않았음하는 마음에서 도움을 주게 되었다.


처음에는 팀원의 코드를 보면서(화면공유로) 같은미션이지만, 나랑은 다른코드였기 때문에 좀 알아보기 힘들었다.
더 집중해서 보니 코드가 눈에 보이게 되었고, 도움을 주었지만, 오히려 나도 얻은게 많았다.
이때부터 HTML, CSS코드가 더 눈에 잘 들어오게 된것 같아 팀원에게 감사하다.

또한 도움을 주는과정에서 피그마파일에 디자인 사이즈가 있던걸 알게됬고, 미션2부터는 디자인 사이즈에 맞춰 구현하게됬다. ( 이떄 도와주지 않았다면 내 미션작업물이 어떻게 됬을지 상상이 안된다..ㅎㅎ)

결국 팀원이 덕분에 해결했다고 고맙다고 말해줘서 나도 기분이 좋았고,
미션을 마무리함까지 여러가지로 선순환이 되었던것 같다. 

 

우선 나의경우, 생활코딩의 HTML/CSS강의, 노마드코더의 코코아톡만들기(클론코딩) 정도를 제로베이스를 수강하기 전 들은 상태였다. 즉, HTML/CSS의 기본 개념에 대해서는 알고 있었다. 
하지만, 클론코딩을 했을 뿐, 무엇인가를 정하고 스스로 만들어본 경험은 없었다..

미션은 계획표대로 하면 1-2주차 때는 기본개념강의를 듣고 3주차부터 시작하게 되는데,
나같은 경우는 계획표에 따라 공부를 하게됬다.
하지만, 사실상 1~2주차때 들은 강의는 아는내용을 반복해서 듣는것이었다.

미션을 진행하며 느낀것은 사용하지 않은 개념은 정말 그냥 들어본 개념일 뿐(죽은개념) 이라는 것이다.

만약 다시 이런 상황이 주어진다면, 미션을 진행하면서 그때그떄 필요한개념들을 하나씩 파는식으로 공부했으면 조금 더 수월하게 진행하지 않았을까? 하는 아쉬움이라고할까,, 이런 생각이 든다.

 

---

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

 

생각나는 것을 적어보면

1. float를 이용해 layout잡기

2. grid 사용하기

3. 여러 선택자를 원하는대로 적용하기

4. 웹 접근성 고려한 코드 추가하기

 

운전을 잘하기 위해서는 초보운전일지라도, 운전을 많이 해봐야 하고
훌륭한 작가가 되기 위해서는 형편없는 글을 많이 써봐야한다.
이것은 단순한진리이다
처음부터 잘하고자하는 욕심에 본질을잊지말자

 

어려웠던 이유는 생각해보면 간단하다.

사용을 많이 해보지 않았기 떄문이다.

말 그대로 이전에 사용해본적이 없었다. 

지금처럼 계속해서 포기하지않고 시도하다면 점점 더 능숙해 질것이라고 확신한다. 

 

---

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

 

 

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

우선 강의시간이 짧고, 이미 HTML/CSS기본 개념을 알고있던 나에게, 강사님이 준비한 강의자료는

내가 필요한 정보(예를들어 선택자같은 핵심속성들)를 그때그때 더 쉽고 편하게 찾아볼수 있도록 제공해 주었기 때문에, 도움이 되었다.

 

 

HTML/CSS 장인의 핵심정리 & 프로젝트

이 강의는 HTML/CSS 장인이라는 강사가 마크업하는 과정을 볼 수 있었는데,
프로는 어떤식으로 마크업하는지 볼 수 있어 도움이 되었다. 
당장에 강사의 스킬을 많은부분 습득하지는 못했지만,
제로베이스 강의는 평생 수강할수 있다고 알고있기 때문에
실력이 좀 쌓이고 다시 보면 마크업 실력에있어서 도움을 받을 수 있을것이라 생각한다. 

---

4. 나만의 공부팁

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

 

1번에서 적었지만 , 나는 HTML/CSS 기초 개념은 알고있던 상태였기 떄문에,
다시 공부한다면 바로 미션을 진행하면서 그때그때 중요 개념들을 찾아보는 방식으로 공부했으면 더 효율적이었을 것이라고 생각한다. 

또한 나는 position, flexbox 개념에대해서는 그래도 사용할 수 있을정도로 이해가 있던 상태여서
이러한 요구사항들은 수월하게 진행했는데, 이해하지 못한? 부분에서 계속적으로 막혔었다.

다음 개념들은 언제든지 사용할 수 있도록 이해하는게 좋을것이다.
position, flexbox ,float, grid, 선택자(결합선택자, 형제선택자, 가상요소선택자,가상클래스선택자) 정도?

 

 

---

 

마무리...

어찌되었던, HTML/CSS 미션은 마무리 됬다.

미션을 제출하고 약간 찝찝한 부분은, 미션1 의 디자인 사이즈 부분, 미션5의  선택자를 활용하는 부분이다.
어찌되었건, 요구사항은 구현했기 떄문에, 미션 통과후 해설강의를 이 부분을 집중해서 볼 생각이다.

끝은 또 다른 시작이다.

이번 제로베이스 과정에 있어서 5월부터, 본격적으로 자바스크립트 공부가 시작됬다. 
부트캠프 기간에는 항상 긴장을 늦추지 않고, 공부에 집중할 수 있도록 환경을 만들어야겠다.

그리고 한달간 같이 공부했던 팀원들도 이 글을 볼텐데, 끝까지 포기하지 맙시다!