WIL - 12월 4주차

 

이번주는 부트캠프 2주차가 진행되었다.

 

이번주는 개인 강의보다는 개인 프로젝트를 하는 것으로 대부분 진행되었다. 

 

<배운 내용>

 

• 알고리즘 4주차 완 - 라면 공장, 샤오미청소기, 좌석배치
• 간단게임 - 업다운게임, 베스킨라빈스 31게임
• 카카오프로필사진만들기
• 인스타 모바일용 클론코딩
• 인스타 PC용 클론코딩 숙제 중
• CSS 개념 정리 
• 미디어 쿼리 테스트
• github 연동 
• TIL - github 작성

 

대체적으로 개인 프로젝트에 대한 숙제가 많았고 초반에는 간단한 게임만들기, 카카오톡 프로필사진 까지는 쉽게 진행을 해서 나머지 알고리즘 문제에 더 많은 시간이 투자되었다. 특히 청소기는 문제르 잘 이해하지 못해 더 어렵게 코드를 짰던 적이 있어서 시간이 더 걸렸던 것 같다. 해당 주말에 5주차 수업도 마무리하려 했지만 과제마무리하느라 못함

하지만 인스타클론 코딩을 진행하면서 px를 이용하지 않고 창 크기에 따라 달라지는 반응형 웹페이지를 만들기가 너무 헷갈렸다. 특히 %으 개념은 잘 이해했는데 부모의 크기가 꼭 정해줘야하는줄 알고 계속해서 100%라는 속성값을 주었다가 어느 순간 css가 먹히지 않았던 문제가 있었고 viewpoint 설정을 이번에 처음 알게 되었다. viewpoint를 설정해주지 않으면 가끔 개발자 도구에서 배율을 먹인상태에서 표시되어서 max-width를 720px로 로 맞췄으나 핸드폰 창이 320px임에도 720px로 표현되어 여백이 생기는 문제가 있었다. (튜터님을 통하여 해결) 

css를 작성할 때는 height와 width값을 되도록 주지 않아야한다는 것도 이번에 처음 알게되었다. html 코드를 짤때는 코드 분리를 위해 div값을 많이 생성하게 되는데 이 중 가장 안쪽에 있는 태그의 크기를 설정하면 부모태그들은 그에 맞춰 알아서 커지기 때문에 일일이 각가 정해줄 필요가 없다. 하지만 이 때문에 미리 확인해 볼 수가 없어서 많이 헷갈렸다. 

해당 WIL은 일요일에 작성 중이고 현재 튜텨님의 복습용 코드를 참고하여 모바일용 버전은  복습을 맞췄다.

사실 오늘안에 pc까지 마무리를 하려고 했지만 복습하는 것에 시간이 많이 흘러 pc버전은 헤더파일 까지밖에 못만들었다. 내일 아침에 빨리 나머지 진행을 할 예정, ( + 미디어 쿼리도 공부를 진행했음 )

또한 특강 수업으로 GIT을 관리하는 법을 배웠는데 오랜만에 사용해서 복습하는 시간을 길게 가져갔고 특히 연동을 할때 원격저장소를 미리 만들었거나 이미 파일이 있는 경우는 clone을 이용해서 연결해야한다라는 것을 3시간 만에 알았다( 그동안 에러 많이 남) 추가로 TIL를 깃허브에 올리는 사람을 참고하여 TIL를 GITHUB에 작성하려고 한다. 물론 해당 블로그에도 똑같이 남길 것이고 github링크도 달아둘 생각이다. 

 

결과적으로 이번 복습을 통해 웹디자인의 방향성과 순서를 잘 익힌 것같아 pc버전에 추가되는 추천인구수 만들 떄 쉽게 만들 것 같다. 미디어 쿼리는 일정크기 이상 커지면 display:none만 적용하면 될 것같아 금방 진행할 것 같다.  

 

---