24.4.15/ 깃 강의+css 제어 중 생긴 문제 기록
팀 소개 페이지를 만드는 중에
조원들의 이미지를 각각 띄운 후, 클릭시 각자의 소개가 작성된 페이지로 이동하는 부분에서
조원들의 이미지 띄우는 부분을 맡았다.
소개 페이지의 컨셉 자체를 게임 컨셉으로 잡았기에 동적인 요소를 추가하고싶어서
마우스를 올릴 시, 이미지가 커지는 작은 애니메이션 효과를 주려했는데,
이 과정에서 생긴 문제이다.
(상위 div):hover img{}
의도 : 이미지가 포함된 부분 hover 시 이미지가 커지는 효과를 주는 것
문제 상황 :
이미지를 동일한 비율로, 중앙에서 넓어지며 커지는 느낌을 주려고
hover 시 픽셀의 크기를 키우는 게 아니라 아래의 코드를 사용해보았다.
transform: scale(1.2);
transition: all 0.5s
이처럼 작성 하였으나, 우측으로 편향되어서 이미지가 커졌다.
해결 :
css 선택자를
(상위div) img:hover {}로 변경하니, 문제 없이 작동되었다.
상위 div에 이미지와 p태그만이 존재하는데, 상위 div에 hover 속성을 줄 필요가 전혀 없었다.
결론 : 선택자 지정을 잘 하자
협업이 처음이다보니, 폴더가 여러개인 환경에서 개발을 할 일이 없었다.
css 폴더 내에 생성한 css 파일이 적용이 안되었는데, 다른 위치의 폴더를 지정하려면
../폴더명/파일이름.css위의 방식으로 사용해야했다
git과 github에 관련한 두개의 강의 중 첫번째 강의를 수강했다.
추가로 알게 된 개념 정리
1. 리눅스 명령어
- pwd (print working directory)
현재 내가 있는 위치 띄우기 - ls (list)
내 폴더와 파일 리스트 띄우기 - ls -a (list all)
숨겨진 설정 파일도 모두 띄우기 - cd 폴더명/ (change directory)
상위 폴더로 이동은 불가능.
cd 폴더명/폴더명/ 이 형식으로 입력하여 한번에 여러 폴더 이동 가능(폴더가 많을 때) - ..
한 단계 위로 이동 - mkdir 폴더명 (make directory)
폴더 생성하기 - touch 파일명
파일이 없을 경우, 생성
touch 명령어로 이름을 바꾸는 등 다른 작업도 가능하다 한다
git과 github의 차이점
git : 버전 관리 도구 (소프트웨어의 변경사항을 체계적으로 추적하고 통제)
github : 온라인 백업 공유 협업(온라인 코드 저장소)
github repository에 push 할 때에, 다른 사람이 추가한 파일이 있을 경우 git pull 을 먼저 진행한 후 push 해야한다.