[2주차 BS] 최연수

[sarah4874]

✨ 과제 내용

1.계산기 만들기 디자인하기
css의 다양한 요소와 속성들을 조절하여 계산기를 만들었다.
2.포켓몬 페이지 만들기
단순히 화면을 구성하기 보다는 조금 더 동적인 화면을 구성할 수 있었다. 이미지들을 가져와서 각각의 사진에 맞는 요소들을 지정해주고, 커서를 옮겼을 때 변화를 주는 과제였다.

📸 스크린샷(필수)

📚 새로 알게된 내용 혹은 궁금한 점

rgba: 색상 뿐 아니라 그림자까지 한번에 조절할 수 있음.
transition: 속성 변화의 속도를 조절할 수 있음.
span: 점유하는 칸 수를 조절할 수 있음
:nth-child(): 각각 요소들의 속성을 구체적으로 지정할 수 있다는 느낌을 받았음.
:hover: 포인터의 움직임에 따라 요소들에게 효과를 줄 수 있음.
처음 시작했을 때는 막막했는데 막상 만들고 보니 크게 어렵다는 생각은 들지 않았다. 완성된 코드를 보니 코드가 체계적으로 짜여 있는 것 같아 흥미로웠다.

[chaeeah]

과제 1은 너무 잘 해주셨습니다 😊 과제 2의 코멘트 확인해주시고, 수정 후 커밋해주세요~!!
또한 .vscode 폴더는 개인 컴퓨터의 vscode 설정 관련 파일이 들어가있는 폴더로, 지금처럼 혼자서 개발을 할 때에는 커밋해도 무관하지만 팀 프로젝트 진행 시에는 커밋에서 제외해주는게 좋습니다!
수고하셨어요~

++ 그리고 다음주 과제부터는 원래 적힌 주석은 모두 삭제하고 코드 작성해주시기 바랍니다!

[chaeeah]

cursor 속성은 필요 없습니다~ 삭제해 주세요!

[chaeeah]

원래 css 파일에 있던 코드 어디로 갔나용?

Suggested change

	.container .pokemons .pokemon .image {
	width: 140%;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 90px;
	/* 그 밖에 필요한 속성 추가 */
	}

이 블럭 추가하고, 위의 .container .pokemons .pokemon 블럭에 중복으로 있는 것들은 삭제하면 좋을 것 같아요!

[chaeeah]

transform 으로 기울임 적용한 것 좋습니다! 그런데 지금 사각형뿐 아니라 사각형 내부의 포켓몬 이미지까지 기울어져 있어서, skewX(15deg) 를 적절한 블럭에 추가해서 포켓몬 이미지는 원상복구 해주세요!