241028 TIL

시 작

본 캠프 1주차 프로젝트는  팀 소개 페이지 만들기!

웹 개발 역량이 필요한 프로젝트라 어느 정도까지 깊게 파고 들어야할지 고민이 많다...

그래도 배운 것, 아는 것 내에선 최대한 활용하면서 연습하는 시간이 될 수 있음 좋겠다!

 

팀 회의

포켓몬스터 게임의 도감을 모티브로 소개 페이지를 제작하기로 의견이 모였다.

초기 화면에는 조원수 만큼의 몬스터볼이 있고, 그 몬스터볼을 클릭하면 상세 설명 화면이 보이는 식으로 설계하기로 했다

생각하고 의도한 것들이 잘 나와주면 좋겠지만, 너무 매몰돼서 무리하진 않기로!

 

개인 연습

오늘 처음 참여라 강의를 들으셔야 하는 조원 분들이 많아서 당장 프로젝트를 진행하긴 어려웠다. 아쉽지만 연습할 겸 개인적으로 구현이 가능하겠다 싶은 부분들을 재미삼아 코드를 작성해봤다. html과 script는 어느 정도 하겄는데 css가 정말 문제다... 원하는대로 그려내기가 참 쉬운 일이 아니여라...그래도 수정 노가다를 거쳐 어느정도의 초등학교 수행평가 수준은 만들어낼 수 있었다.

 

페이지 구현

구현된 HTML

 

HTML 코드

HTML 코드 현황

구역을 크게 넷으로 나눴다. 제목이 들어갈 상단바와, 포켓몬 이미지와 조원 이름, 조원 설명이 들어갈 메인1, 댓글을 입력할 수 있도록 입력창을 계획 중인 메인2, 그리고 버튼 셋을 두고 각 버튼에 따라 스크립트를 통해 움직임을 더해줄 하단 바. 

 

 

CSS 코드

순수 노가다가 스크롤이 길기 때문에, 새롭게 활용해봤거나 인상깊었던 속성들을 정리해보도록 하자!

display : flex;
flex-display : row || column;

 정확히 깊게 이해하진 않았지만, flex-display를 쓰기 위해서 우선 display 속성을 flex로 만들어줘야했다. 그리고 값을 row로 한다면, 해당 html 구역 안의 내용물들이 가로로 쭉 이어지고, 반대로 column으로 한다면 내용물들이 세로로 쭉 이어진다. 메인1 구역에서 피카츄와 텍스트상자 덩어리는 row로 이었고, 각 텍스트상자는 column으로 이음으로써 의도한대로 모양새가 잡혔다!

transform : rotate(??deg);

 물체를 ??각도만큼 회전시켜주는 속성! 먹이를 주면 피카츄 이미지가 움직였으면 좋겠다는 생각에 찾아봤다. 양수로 각도를 입력하면 시계방향으로 회전하고, 음수로 각도를 입력하면 반시계방향으로 회전한다!

border : 3px solid black;

 테두리 설정을 해주는 속성. 순서대로 테두리의 굵기, 테두리의 종류, 테두리 선의 색을 지정해줌. solid는 실선이란 뜻이고, 다양한 속성이 많으니 필요에 따라 찾아보도록 하자!

 

 

Script 코드

Script 코드 현황

 처음엔 먹이를 준다 버튼을 누르면 피카츄 이미지가 좌우로 움직이는 효과를 넣어주고 싶었는데, 메인1 구역을 align-items와 justify-content로 내용물을 정렬해놓은 탓인지, 아니면 이미지에 margin-left를 이상하게 준 탓인지, 생각한대로 안 움직이더라. 그래서 일단 회전하는 식으로 상호작용하도록 방향을 틀었다.

 그리고 그냥 돌면 이상하니까 transition 효과를 살짝 첨가해봤다! css에 미리 줘도 되는데 함수 안에 넣은 이유는, 이미지 너비와 높이를 %로 줬기 때문에 트랜지션이 미리 있으면 창을 조절할 때마다 트랜지션이 발동해 우스꽝스럽더라. 그래서 클릭시 부여되도록 했다. 근데 다시 사라지게도 해야하는데 그건 아직 노력 중...

 모달창 등장은 노력 중2다..... 부트스트랩 쓸 때 내 css가 꼬이는 게 싫어서 직접 모달창을 만들어 보고 하려는데 갈 길이 멀다. 일단 z-index에 대한 이해가 좀 더 필요하겠고, 모달창의 css 구현 자체도 더 연구해봐야한다. 부트스트랩 모달 코드를 뜯어와서 연구해보는 것도 방법이 될 듯...? 자기 전에 좀 더 건드려봐야겠다! 아무튼 오늘의 연습은 이 정도로 마침!