안녕하세요~ 내일 오전 10시까지 제출을 앞두고 생각보다 빨리 저 포함 다른 팀원 분들도 전부 작업을 마치고 Github에 push 해주신 덕에 비교적 빨리 팀원끼리 승리의 치얼스를 외치며.. 이번 미니 프로젝트를 진행하며 배운 점도 많고 느낀 점도 참 많았는데요. 일단 홈페이지 킬 시 등장하는 animation 효과부터 보겠습니다.
사실 별 거 아니라고 하실 수 있겠지만 뉴비한텐 엄청난 효과입니다!
특히 transform 기능을 많이 쓴 거 같은데 생각보다 재밌는 프로퍼티인 거 같아서
좀 더 알아보고 싶단 생각이 마구마구 들어요
About us 부분은 $().ready() 함수를 사용해서 fadeIn 효과를 줬습니다
그리고 main.js 부분에 보면 scroll 효과도 있지만.. 저는 아직 잘 익히지 못 한 부분이라 정확한 사용법을 잘 모르겠더라고요 열심히 공부해 오겠습니다.
일단 이번 미니 프로젝트에서 제가 맡은 부분은 팀원 소개 페이지 틀잡기 중에서도 왼쪽 박스, 그리고 그 아래 댓글의 전체적인 기본 틀을 맡았으며, 팀원 소개 페이지 왼쪽 부분은 주로 css 테두리를 설정할 수 있는 border와 width,height를 통해 가로,세로 높이를 조절해가며 margin으로 바깥 여백의 정도를 설정하였습니다.
그리고 그 아래 댓글의 전체적인 기본 틀 부분은 팀원 소개 페이지와 같이 width,border,margin등 기본 틀 구현에 필요한 css 프로퍼티를 사용하였고, 더 사용한 기능이 있다면 댓글 폼은 padding로 안쪽 여백을 주고 box-sizing: border -box를 이용해 해당 요소의 크기를 더 섬세하게 제어할 수 있게 만들어줬습니다.
다음으로 제 개인 페이지에 대해 테마부터 간략하게 설명을 드리자면.. 저희 집 강아지 이름이 초롱이인데 초롱이의 털색이 아이보리색이라 개인 페이지의 background color 를 비슷한 느낌으로 만들어 봤습니다
멤버 프로필 소개 카드나 댓글 관련 부분을 black 컬러로 border를 설정해서 아이보리 색이 초롱이의 털색이라면, 검정 컬러 부분은 눈코입 처럼 표현하고 싶어서 blcak 컬러로 한 번 표현해 봤습니다!
메인 페이지 프로필, 개인 프로필 페이지 부분에선 화면이 밋밋한 바람에 욕심 좀 부려서 홈페이지가 보여질 때 애니메이션 효과를 줬었습니다! @keyframes()를 사용해 animation drop 기능을 구현해 봤습니다.
(어제 TIL에도 올렸지만 못 보신 분들을 위해..)
이건 메인페이지 > 프로필 부분이고요
이건 개인 페이지 부분 animation 입니다
둘의 차이라면 아무래도 옆에서부터 스윽 들어오는 slide를 주느냐
위에서 스윽 떨어지는 drop를 주느냐인데 코드는 95% 똑같습니다.
사실 아직도 css 부분에서 모르는 것들 투성이인데 열심히 웹개발 a to z강의, 유튜브와 구글링을 병행해서 최대한 구현하고 싶은 기능들을 배워서 적용시켜봤습니다.
아쉬운 점이라면 댓글의 좋아요 기능을 하는 하트 버튼을 오른쪽 끝으로 보내서 삭제, 수정 버튼 위쪽에 위치하도록 하고 싶었는데 스스로 해내지 못 하고 팀원 분의 도움을 받아서 페이지를 완성시켰습니다!
제가 만질 땐 하나가 제대로 작동하면 하나는 이상하게 작동하던데 팀원 분의 피드백을 받자마자 바로 해결.. 온전히 제 힘으로 구현하지 못했다는 게 아쉬운 점으로 남았지만 다음 프로젝트에선 저도 팀원을 도울 수 있을만큼 실력을 키우고 더 효율성있게 코딩하며 열심히 해보겠습니다.
