본문 바로가기
부트캠프TIL, WIL/AI웹개발(스파르타코딩클럽)

[AI 웹개발TIL]4일차 개발일지

by 우지uz 2023. 3. 16.

안녕하세요 ! 신입 개발자 김성우 입니다 ㅎㅎ!

4일차 개발일지 시작합니다 !
오늘 일정도 팀 미니 프로젝트인
"팀 소개 페이지"를 만드는 시간에 집중 했어요 !

아직 웹 종합개발반 강의를
1주차까지밖에 못들어서
웹 페이지를 구현하는데
어려움이 좀 있었지만
연습을 통해 매꾸어요

 
오늘은 
오전 9시부터 오후 3시까지는
2주차 웹종합 개발 강의를 들었구요 !!
지금까지 만든 코드들을 혼자서 해보면서
최적화하는 시간을 가졌어요 !

최적화가 제일 중요하다고 생각 되거든요!!
누구나 시간이 있으면 개발을 할 수 있고 어떤 것이든 공부하지만
 
최적화하는 작업까지는 잘 안하시더라구요 ㅠㅠ 
결국에 똑같은 결과물과 퀄리티라고 해도 
시간을 단축 시킨다는 것은 중요하다고 생각해요 ㅎㅎ

 

복습을 통해 구현한 웹페이지

 
복습을 하면서 느낀점이
 
처음에는 나무를 본다는 느낌이 강해서
기능 하나하나를 구현하는데에 집중 했다면
 
복습을 할때에는 숲을 넘어서
생태계를 본다는 느낌이 들었습니다 ㅎㅎ!
 
강의 들을 때도 왠만하면, 혼자서 다시 만들어보고
깨달음이 올때까지 하는 편이에요!

오후3시 이후로는 내일 일정으로 예정되어 있는
발표를 위해 자료들을 수집하고
정리하면서, 발표 자료들을 기록하곤 했는데요 !
 
발표 자료들로 적었던 내용들은 
제가 작업 했던 내용들 중에
기억에 남는 내용들이나 코드에 대한 리뷰를 남기라고 하셔서
아래 형식으로 "노션"에 기록해봤어요 !
 

  1. 김성우 (main.html)
    1. 카드 묶음 넣기 및 사진 위치 및 비율 변경
  • 구글 폰트에서 카드 묶음 부트스트랩을 가지고 와서
  • 강의때와 같이 시행 해보았으나
  • 강의에 있는 카드는 기본적인 카드 부트스트랩 이라 CSS가 없어서 꾸미는 것에 헤매었습니다 ㅎㅎ
 

문제점

  • 카드 부트스트랩 마다 크기 제어 코드(md , g 같은 경우)가 달랐고, 그들의 속성을 몰라서 조절하기 힘듦
  • 내가 나타내고자 하는 디자인
  • 카드 묶음의 디자인
  • CSS속성 + 화면 비

에 따라 사진의 크기와 위치가 바뀌었음
해결책

  • 카드 묶음 코드에서 md , g 를 하나하나 넣어보면서 각각 어떤 속성을 가지는지 이해
  • ‘카드 전체묶음, 각각의 카드, 입력한 사진들에 대한
    속성 “가로, 세로, 바깥 여백, 안쪽 여백” 값과 비율 이해

 

2) 체크 박스 및 사이드바 구현 
                           HTML + CSS 로 간단하게 사이드바 구현해보았습니다.

 

이런 식으로 ...?
작성해 보았습니다. ㅎㅎ
발표를 위해서 간략하게
중요한 내용만 정리해봤어요 !

 
오늘은 이렇게 간단하게 하루를 보냈구요 ! 
복습하고 깃허브 관련 영상들을 보느라 시간들을 
순삭한거 같네요 ㅠㅠ 
오늘 리뷰는 여기까지 입니다!
 
긴 리뷰 끝까지 잘 읽어 주셔서 감사합니다 ㅎㅎ
오늘도 안니양~~