안녕하세요 ! 개발 공부하는 김성우 입니다 ㅎㅎ!
2일차 개발일지 시작합니다 !
일지를 시작하기에 앞서서,
1주차에는 "AI 관련 수업 및 실습이 없기 때문에 "
웹을 만드는 기본 작업들을 시행했다는 것을
먼저 알아주시기 바랍니다 ㅎㅎ
위 사진은 2일차에 만들었던 웹페이지- 앨범 사진인데요!
총 5개의 사진들을 나타낼 예정입니다 ㅎㅎ!
한 줄에 2개의 사진을 넣어봤어요 !
사진 넣기 보다 더 힘든게
사진들 전체의 본문 여백이더라구요 ㅠㅠ
단순하게 margin 을 통해서 여백을 넣는게 아니라
카드 전체 양식에서
md 와 g 값 밑 폭 등을 여러가지로 설정해보고
맞는 크기를 찾아야 하는
굉장히 섬세한 작업이라 꽤 많이 걸렸어요 ! 대략 200분 정도??
코드들을 보시면, 카드 묶음 부터, 각각의 카드들의
사이즈가 다른 것들을 확인 할 수 있을 거에요 !
이것들은 웹 종합 개발 강좌에서 배울 수 없었 던 내용들이라
이리 치이고 저리 치이면서
몸으로 배울 수 밖에 없었어요 ㅠㅠ !
그래도 깨달음이 있어서 굉장히 뿌듯해요 !
이맛으로 코딩 하는 건가봐요 !
다음은 1주차 시간표 입니다! 1일차에도 올렸던 같은 시간표에요!
3월 14일 화요일 2일차에는, 따로 강의가 없이
풀스택 미니프로젝트인
팀 소개 페이지 만들기를 진행 하였어요 !
오늘 했던 작업은
1. 웹 디자인
2. 사진 앨범 페이지 만들기
3. 버튼을 누르고, 사이드바가 나오는 기능 구현
4. 사이드바와 버튼의 크기가
페이지 확대/축소에 따라 변경되는 것을 구현되기
를 진행 하였어요 !
1. 웹 디자인 같은 경우
1일차 디자인은 임펙트 있고 강한 이미지를 주었는데
웹 페이지 상단 로고로는 적합하지 않았어요 !
왜냐하면, 웹 페이지 상단 로고가 너무 강하면,
다른 디자인과 이미지들과 어울리기 어렵기 때문이었죠..!
만약 위 그림과 같이 강렬한 파란색 로고를 넣어버리면,
모든 UI,UX 및 디자인들을 파란색으로 통일 해야만 할 것 같은
느낌이 들었기 때문이에요 ㅎㅎ
그래서 디자인을 바꾸기로 했죠!
짜잔!
오늘 상단 로고를 흰색 바탕에
갈색이 살짝 섞인 금색으로 디자인 했습니다 ~~
우소라팀장님이 글씨와 막대 디자인 및 색깔을 정해주셨고
저는 책, 안경 및 레이스가 없으니
심심한 것 같아 디테일을 심어주었어요 !
원하는 디자인이 미리캔버스에 없어서 아쉬웠지만
미리 캔버스에 있는 기본 디자인으로
꽤 괜찮게 디자인을 마무리 할 수 있었어요!
만약 디자이너들이 기본적인 디자인들을
뚝딱 !
만들어 준다면
큰 도움이 될 것 같네요.!!ㅎㅎ
2. 사진 앨범 페이지 만들기
이번 팀 소개 페이지 프로젝트에서
제 맡은 역할은 멤버 5명이 모두 있는,
사진 앨범 페이지 작성인데요!.
메인 페이지가 아닌, 서브 페이지로
모든 멤버의 사진들을
전체적으로 간략히 보여주는 페이지 입니다!
사진은 한 줄에 2장씩 해서
총 5장 나타낼 것이구
가운데 비율이 적절하게 맞춰 졌으면 좋겠어요 ㅠㅠ!
꽤 걸렸지만 적당히 맞춰 보았어요!
팀 총 인원이 5명이기 때문에
5장을 나타내 보았어요!
시간적 여유가 된다면, 사진마다 버튼을 5개 정도 두어서
버튼을 누르면 다음 사진으로 넘어가도록 하고 싶지만
아직 팀원들과 상의된 내용이 아니기에 보류 할게요 ㅎㅎ
3. 사이드바와 체크박스의 크기가
페이지 확대/축소에 따라 적당한 비율로 나타내어 지는 것을 구현해보았어요!
전에는 사이드바와 체크박스 크기가
PX로 설정을 해서 고정이었지만
현재는 %로 표현해서
페이지 크기에 따라 변경되는 것을 확인할 수 있었어요 !ㅎㅎ
작업하는데에 시간은 꽤 걸렸답니다!!
처음부터 기본 강의들을 보고
px들을 적어나가다보니
처음부터 끝까지 px로 코딩해서
한두개만 변경해서는 바뀌어 지지 않더라구요 ㅠㅠ
체크박스와 사이드바 코딩은 다음 영상들을 참조했습니다 !
<유튜브 영상 >
✔ 움직이는 메뉴버튼 코딩하기 : https://youtu.be/IvXuk5Sh4GE
✔스르륵 나타나는 사이드메뉴 만들기 : https://youtu.be/AcDKkaorPvU
텝 메뉴 만들기 영상도 보았지만 아직 구현하지 못한 상황입니다.
내일 완벽하게 구현해보고
개발일지로 남기도록 할게요 ^^!
오늘 이외에도
<HTML 기초 목차 영역 나누기>
<사진 넣기>(강의에서와 다른 방법을 알아봄)
등 더 찾아보았고
<기초적인 지식들을>
배운다고 머리가 좀 아팠다.ㅎㅎ;;
내일 계획은
어제 GIT HUB를 배웠지만,
혼자서 구현하고 실행해본 적이 없어서 ,
혼자서 해보고 최적화 시키는 작업을 할 것이고
프론트엔드 작업을 하고 있지만,
백 엔드 작업을 하고 있는 팀원들과
추후 어떤 작업이 더 필요한지
계속 소통하고 소통해서
완성도를 목표에 가깝울 수 있도록 할 것입니다. !
다른 프론트엔드 팀원들의 페이지를 실행해보고
메인 페이지1, 서브 페이지1, 서브 페이지2 의 완성도
를 전반적으로 올려볼 수 있도록
노력하겠습니다 ! ㅎㅎ
오늘 리뷰는 여기까지 입니다!
긴 리뷰 끝까지 잘 읽어 주셔서 감사합니다 ㅎㅎ
오늘도 안니양~~
'부트캠프TIL, WIL > AI웹개발(스파르타코딩클럽)' 카테고리의 다른 글
| [AI 웹개발TIL]6일차 개발일지 (4) | 2023.03.18 |
|---|---|
| [AI 웹개발TIL]5일차 개발일지 (4) | 2023.03.17 |
| [AI 웹개발TIL]4일차 개발일지 (5) | 2023.03.16 |
| [AI 웹개발TIL]3일차 개발일지 (3) | 2023.03.15 |
| [AI 웹개발TIL]1일차 개발일지 (2) | 2023.03.13 |
