[부트캠프] TIL 2024.10.01.화

코딩치킨

1. 학습 목표

 1) 미니 프로젝트 멤버 소개 페이지 템플릿 제작하기

 2) 진행 상황 Github에 공유하기

 

2. 학습 내용

 1) 실습 환경 : VSCode, 웹브라우저(Chrome) / Github, 터미널

 2) 학습 내용

   전체적인 틀은 실습과 유사하게 진행.

   (1) 상단 제작 부분은 Bootstrap의 Headers에서 원하는 헤더와 유사한 것을 찾아 필요 없는 부분은 삭제하고 style을 수정.

   (2) 멤버 카드 등록 부분은 Bootstrap의 Floating labels를 참고하여 제작. 사진 업로드 부분 위에 추가하여 "사진 업로드" 라는 텍스트를 클릭하면 내 컴퓨터의 사진을 업로드할 수 있도록 함. -> loadFile(input) 함수 

 (3) 멤버 소개 카드 부분은 Bootstrap의 Card를 참고하여 제작. 카드 수정과 삭제를 위해 각각의 기호를 카드 우측 상단에 삽입. 멤버 카드 소개에 '코딩치킨' 팀이라는 정체성(?)을 부여하기 위해 달걀 그림을 추가.

 

 

 

   그 외 세부적인 부분이나 기능은 더 추가해야 함. 

 

 3. 학습 내용 외 기록

1) 우측 정렬에 사용

display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: end;

 

2) 텍스트 파일 탈출

	작업 내용을 저장했으면 vi종료, 안했으면 종료 불가
:q!	작업 내용을 저장하지 않고 강제로 vi 종료
:wq	작업 내용을 저장한 후 vi 종료
:wq 파일명	작업 내용을 지정한 파일명으로 저장한 후 vi 종료
xx(shift+zz)	작업 내용을 저장한 후 vi 종료

 

 

4. 어려웠던 부분 / 의문점

1) style을 적용할 태그나 클래스를 선택할 때 요소가 많아지다 상/하위 관계가 헷갈리는 경우가 많았다. -> 연습을 많이 해야 할 것 같음.

2) 배치 시에 정중앙 배치나 원하는 곳에 배치하는 게 생각보다 쉽지 않았다. 

3) 텍스트나 아이템 height, width 설정할 때 %, em, px 등을 적용하는 게 아직 감이 덜 잡힌 것 같다.

4) 깃에 commit 할 때 <error: src refspec main does not match any> 에러가 났는데 README.md를 추가하니 해결되었다. 아예레포지토리 생성만 한 상태라 그런가..? 혹시 몰라 password에 쓸 개인 토큰도 만들었다.

 

5. 주의할 부분 / 중요 내용

 

6. 다음 학습 내용

1) 페이지 내용 추가 및 수정

2) 웹개발 강의 남은 부분 완강하기

 

7. 회고

뭔가 코드를 작성하면서도 더 직관적이고 깔끔하게 작성될 수 있을 것 같은데 내 역량이 아직 모자라서 좀 지저분하다는 느낌이 든다. 되는 게 어디야 싶긴 하지만.. 내일까지 좀 더 다듬어 봐야겠다. JQuery나 Fetch 강의도 빨리 듣고 필요한 부분 적용해보고..?

Git은 강의 들으면서 작성을 좀 놓쳤더니 그래서 파일 업로드에 난항을 겪은 것 같다. git 도 얼른 복습해야 할 것 같다. 블로그도 정리하면서 내용도 몇 번 날렸다. 임시저장 습관화..!