Conversation
|
정말 수고하셨습니다! |
|
지금은 push가 정상적으로 된다니 다행입니다! |
| * { | ||
| margin: 0; /* 여백 제거하는 속성 */ | ||
| padding: 0; /* 내부 여백 제거하는 속성 */ | ||
| box-sizing: border-box; /* width와 height 계산에 padding과 border를 포함하도록 설정 */ |
There was a problem hiding this comment.
css의 박스 모델을 잘 이해하고 설정해주셨군요!
width와 height 계산이 border size를 기준으로 되도록 sizing을 border-box로 설정해두면 더 직관적으로 구현할 수 있어 장점이 있죠
| background-color: white; | ||
| display: flex; | ||
| justify-content: center; /* 가로 정렬 */ | ||
| align-items: center; /* 세로 정렬 */ |
There was a problem hiding this comment.
Flexbox 레이아웃을 잘 이해하고 설정해야하는 부분이었습니다
아이템들이 배치되는 기본 방향이 가로인 걸 고려해서 주축을 가로 정렬로, 교차축을 세로 정렬로 잘 이해하신 것 같습니다
멋집니다! 😊
| .calculator form { | ||
| display: grid; /* grid 선언 */ | ||
| grid-template-columns: repeat(4, 1fr); /* 4열 균등 분배 */ | ||
| grid-auto-rows: 55px; /* 버튼 높이 55px */ |
There was a problem hiding this comment.
repeat을 사용해서 1fr이 4번 반복 작성되는 것을 훨씬 가독성 좋게 작성하셨네요! 👍
버튼 높이 설정을 height가 아닌 grid-auto-rows로 하신 것도 정말 좋은 접근입니다! height로 전체 높이를 설정하면 행의 개수가 늘어날 때 버튼들이 찌그러질 수 있는데, grid-auto-rows를 사용하면 행이 추가되어도 55px로 일정하게 유지되는 확실한 이점이 있죠. Grid의 장점을 아주 잘 활용하셨습니다! ✨
| box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.15); | ||
| /* x축: 3px, y축: 3px, 퍼짐: 6px, 색상: rgb(0, 0, 0), 투명도: 0.15 그림자 적용 */ | ||
| transition: all 0.1s ease-in-out; /* 모든 속성 변화를 0.1초에 걸쳐 전환(천천-빠름-천천) */ | ||
| outline: none; /* 포커스 시 나타나는 기본 외곽선 제거 */ |
There was a problem hiding this comment.
브라우저 기본 스타일을 없애기 위해 border: none;과 outline: none;을 잘 적용해 주셨습니다 💯
한 가지 알아두면 좋은 점은, outline은 키보드 사용자에게 현재 위치를 알려주는 중요한 접근성 기능이라는 거예요. 이번 과제에서는 디자인을 위해 없앴지만, 실무에서 outline: none;을 할 때는 시각적으로 포커스 상태를 알 수 있게 배경색이나 그림자로 대체 효과를 넣어주어야 한답니다.
| @@ -0,0 +1,77 @@ | |||
| /* 기본 박스 모델 초기화 */ | |||
| @@ -0,0 +1,103 @@ | |||
| body { | |||
| height: 100vh; | |||
| background-image: url('images/background.jpeg'); /* 배경 이미지를 넣어주세요 */ | |||
There was a problem hiding this comment.
url() 안에 들어가는 경로를 ' ' 안에 잘 넣어주셨습니다!
작은 따옴표가 없이도 기능상 문제는 없지만 공백이나 특수문자가 들어가는 경우를 대비해 늘 작은 따옴표 안에 경로를 넣어 작성하는 건 좋은 습관입니다~
| display: flex; | ||
| flex-wrap: wrap; | ||
| flex-direction: row; /* 요소들의 메인 축을 가로로 설정하는 코드를 입력해 주세요 */ | ||
| max-width: 800px; /* 요소의 최대 가로 크기를 700px로 설정해 주세요 */ |
There was a problem hiding this comment.
flex-wrap: wrap;을 보시고 display: flex;도 잘 추가해 적어주셨네요! 메인 축을 행(row)으로 둬 가로로 설정한 점도 정말 멋집니다
다만 요소의 최대 가로 크기가 700px가 아닌 800px로 설정되어 있습니다 수정해주세요!
| /* 그 밖에 필요한 속성들 추가 */ | ||
| margin: 0 auto; | ||
| justify-content: center; | ||
| gap: 15px |
There was a problem hiding this comment.
margin에 좌우 여백을 auto로 설정해 박스 자체를 가운데로 정렬하는 것에서 그치지않고 justify-content를 center로 설정해 박스 내부의 요소도 가운데로 정렬한 뒤 gap을 두어 일정 거리를 확보한 점 멋집니다!! CSS 속성을 잘 이해하고 레이아웃을 작성하셨군요 👍
| transform: scale(1); /* transform 속성을 적용해 주세요 */ | ||
| /* 그 밖에 필요한 속성 추가 */ | ||
| background-color: #002b5b; | ||
| transform: skewX(-15deg); |
There was a problem hiding this comment.
CSS에서는 같은 선택자 안에서 동일한 속성을 여러 번 작성하면, 가장 마지막에 작성된 속성만 적용됩니다
따라서 현재 transform: scale(1);은 무시되고 transform: skewX(-15deg);만 적용되어 있습니다.
애니메이션의 시작점을 나타내기 위해 크기를 표시하고 싶으시다면, 여러 줄로 작성하는 대신 한 줄에 띄어쓰기로 구분하여 작성하시면 됩니다! 😄
| .container .pokemons .pokemon:hover { | ||
| background-color: #ff9c00; | ||
| transform: scale(1.3) skewX(-15deg); | ||
| border-color: #fff; |
There was a problem hiding this comment.
#fff는 이미 위에서 작성하셨던 white와 같은 색상입니다! 중복되는 코드여서 삭제하면 좋을 것 같습니다! 😸
| background-repeat: no-repeat; | ||
| background-size: 90px; | ||
| /* 그 밖에 필요한 속성 추가 */ | ||
| transform: skewX(15deg) translateX(-15%) |
There was a problem hiding this comment.
.pokemon을 기울인 것과 반대의 기울기를 이미지에 주어 잘 시각적 왜곡을 잘 보정하셨군요! 정말 수고하셨습니다 💯
| .pokemon:nth-child(29) .image { background-image: url('images/pokemon29.png'); } | ||
| .pokemon:nth-child(30) .image { background-image: url('images/pokemon30.png'); } | ||
| .pokemon:nth-child(31) .image { background-image: url('images/pokemon31.png'); } | ||
| .pokemon:nth-child(32) .image { background-image: url('images/pokemon32.png'); } |
There was a problem hiding this comment.
32마리의 포켓몬 이미지를 하나하나 수작업으로 연결하시느라 정말 고생 많으셨습니다!
앞으로 프로젝트가 커지고 코드가 길어질 때를 대비해 Prettier를 추천해드립니다
현재 코드는 패턴이 완벽하게 일치해서 보기 좋지만, 실무에서 이렇게 반복되는 코드를 복사/붙여넣기 하다 보면 띄어쓰기나 중괄호 { }의 위치 통일 등이 어렵습니다
Prettier는 코드를 저장하는 순간, 이런 띄어쓰기, 줄바꿈, 따옴표 통일 등을 정해진 규칙에 맞춰 자동으로 예쁘게 정렬해 주는 코드 포맷터입니다. VS Code를 사용 중이시라면 좌측 확장 프로그램 탭에서 설치해보세요!
| max-width: 300px; /* 이미지 요소가 너무 크네요! 요소의 최대 가로 크기를 임의로 설정해 주세요 */ | ||
| /* margin을 이용해서 요소를 가운데 정렬 해주세요 */ | ||
| margin: 0 auto; | ||
| display: block; |
There was a problem hiding this comment.
위에서 작성하신 것처럼 auto를 사용해 가운데 정렬을 잘 설정해주셨네요!
<div class="logo"> <img src="images/logo.svg" alt="Pokemon Logo"/> </div>
html 파일을 보시면 .logo는 애초에 <div> 블록 레벨 요소이므로 이 코드는 불필요해보입니다 😺
There was a problem hiding this comment.
display: block;은 img 태그에 적용하면 좋습니다 😮
img 태그는 기본적으로 inline 요소이기 때문에 텍스트의 베이스라인을 기준으로 정렬됩니다. 이로 인해 이미지 하단에 텍스트의 꼬리 부분을 위한 미세한 빈 공간이 생기는데, block으로 변경하면 이 여백이 깔끔하게 사라진답니다!
따라서 해당 방식이 실무에서 권장됩니다 ✏️
| background-repeat: no-repeat; | ||
| background-size: 90px; | ||
| /* 그 밖에 필요한 속성 추가 */ | ||
| transform: skewX(15deg) translateX(-15%) |
There was a problem hiding this comment.
살펴보니 맨 마지막 속성 끝에 세미콜론이 빠져있네요 😅
CSS에서는 중괄호 안의 맨 마지막 속성에는 세미콜론이 없어도 정상적으로 동작하긴 합니다. 하지만 나중에 그 아래에 새로운 속성을 추가하게 될 때, 윗줄에 세미콜론이 없어서 에러가 발생하는 경우가 아주 많답니다!
추천드린 Prettier에 누락된 세미콜론 자동 추가 기능도 있으니 한번 적용해보세요 😄
|
정말 정말 수고많으셨습니다! 코드 리뷰하는 내내 고심하신 게 느껴졌어요 🥹 앞으로의 성장이 정말 기대가 됩니다 마지막으로 노가다였던 32줄에 대해 3주차 BS가 끝나 발전된 팁을 하나 드리자면요! // 1. 문서 내의 모든 '.pokemon .image' 요소를 찾아 배열로 가져오기
const images = document.querySelectorAll('.pokemon .image');
// 2. for 반복문으로 반복
for (let i = 0; i < images.length; i++) {
// 이미지 파일명은 1부터 시작하는 것을 고려
const pokemonNumber = i + 1;
// 3. 백틱을 활용한 템플릿 리터럴로 문자열 안에 변수 넣기
images[i].style.backgroundImage = `url('images/pokemon${pokemonNumber}.png')`;
} |
2 participants
✨ 과제 내용
CSS와 HTML을 이용하여 계산기와 포켓몬 캐릭터창을 만드는 과제를 수행함
📸 스크린샷(필수)
📚 새로 알게된 내용 혹은 궁금한 점
:nth-child(), transform, transition 등에 대해 자세히 알게 되었고 CSS 사용에 아주조금 익숙해진 것 같다!
자꾸 git push 할 때 오류가 나는데 무엇이 문제인지 모르겠어요.