Conversation
|
주윤님! 계산기 과제 완성하시느라 정말 수고하셨어요 😄 assignments 폴더 안에 있는 style.css 파일을 삭제하신 기록이 보입니다. 그 폴더 안에 있는 파일은 아무것도 건드리지 않으셔야 합니다! 모두가 함께 계속 사용해야하는 과제 폴더입니다 😊 멋진 과제물 제출해주셔서 감사합니다~ |
| * { | ||
| 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열 균등 분배 */ | ||
| height: 350px; /* 버튼 높이 55px */ /**/ |
There was a problem hiding this comment.
repeat을 사용해서 1fr이 4번 반복 작성되는 것을 훨씬 가독성 좋게 작성하셨네요! 👍
버튼 높이 설정은 height가 아닌 grid-auto-rows로 하신다면 주석대로 55px로 설정할 수 있습니다.
height은 전체 높이를 설정해줍니다. 따라서 행의 개수가 늘어남에 따라 높이도 증가해야 합니다.
반면 grid-auto-rows는 각 행의 고정된 높이를 설정해줍니다. 따라서 행이 추가되어도 55px로 일정하게 유지되는 확실한 이점이 있죠.
height가 아닌 grid-auto-rows를 활용해 재작성해 보시면 grid 개념 이해에 도움이 될 것 같습니다💥
| box-shadow: 3px 3px 6px rgb(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 @@ | |||
| /* 기본 박스 모델 초기화 */ | |||
| .calculator form input[type="text"] { | ||
| grid-column: span 4; /* 입력창이 4개의 열 전체를 차지하도록 설정 */ | ||
| text-align: left; /* 입력된 값이 어느 방향으로 정렬될지 설정 */ | ||
| padding: 0px; /* 입력창 내부 여백 10px 설정 */ /**/ |
| .calculator form input { | ||
| cursor: pointer; /* 마우스 커서 포인터로 변경 */ | ||
| font-size: 19px; /* 버튼 내부 텍스트 크기 19px */ | ||
| border-radius: 8px; /* 꼭짓점 둥글기 정도: 10px */ /**/ |
| /**/ | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: flex-start; |
There was a problem hiding this comment.
flex-start는 아이템들을 해당 축의 시작점에 모아서 배치한다는 의미입니다. 즉 이 코드는 세로축(주축의 교차축)의 시작점은 맨 위이므로 콘텐츠를 화면 위쪽에 붙여 정렬하라는 의미가 되는 겁니다!
| @@ -0,0 +1,169 @@ | |||
| body { | |||
| height: 100vh; | |||
| background-image: url("./images/background.jpeg");/* 배경 이미지를 넣어주세요 */ | |||
There was a problem hiding this comment.
url() 안에 들어가는 경로를 "" 안에 잘 넣어주셨습니다!
따옴표가 없이도 기능상 문제는 없지만 공백이나 특수문자가 들어가는 경우를 대비해 늘 따옴표 안에 경로를 넣어 작성하는 건 좋은 습관입니다 👍
|
|
||
| .container .pokemons { | ||
| flex-wrap: wrap; | ||
| display: flex;/* 요소들의 메인 축을 가로로 설정하는 코드를 입력해 주세요 */ |
There was a problem hiding this comment.
flex-wrap: wrap;을 보시고 display: flex;도 잘 추가해 적어주셨네요!
display: flex;의 기본 설정 자체가 메인 축을 행(row)으로 둬 가로로 설정된 것도 이해하신 것 같습니다 💯
| max-width: 700px;/* 요소의 최대 가로 크기를 700px로 설정해 주세요 */ | ||
| padding: 40px 20px;/* 내부 여백에 상하 40px, 좌우 20px 적용해 주세요 */ | ||
| /* 그 밖에 필요한 속성들 추가 */ | ||
| justify-content: center; |
There was a problem hiding this comment.
justify-content를 center로 설정해 박스 내부의 요소도 가운데로 정렬하셨군요! CSS 속성을 잘 이해하고 레이아웃을 작성하셨네요 👍
여기에 더해 margin에 좌우 여백을 auto로 설정해 박스 자체를 가운데로 정렬시키면 더 좋을 것 같습니다!
| border: 3px solid white;/* 너비 80px, 높이 84px, 테두리를 3px 실선 하얀색으로 지정해 주는 코드를 각각 작성해 주세요 */ | ||
| transition: 0.3s;/* transition 속성을 적용해 주세요 */ | ||
| transform: scale(1); | ||
| transform: skew(-10deg);/* transform 속성을 적용해 주세요 */ |
There was a problem hiding this comment.
CSS에서는 같은 선택자 안에서 동일한 속성을 여러 번 작성하면, 가장 마지막에 작성된 속성만 적용됩니다
따라서 현재 transform: scale(1);은 무시되고 transform: skew(-10deg);만 적용되어 있습니다.
애니메이션의 시작점을 나타내기 위해 크기를 표시하고 싶으시다면, 여러 줄로 작성하는 대신 한 줄에 띄어쓰기로 구분하여 작성하시면 됩니다! 😄
추가로 더 명확하고 유지보수가 쉬운 코드를 위해 skew 대신 skewX를 명시해서 쓰는 것을 더 권장합니다! skewX라고 적으면 X축으로 기울이기라는 의도가 훨씬 명확하게 드러나기 때문이죠. 👍
| background-repeat: no-repeat; | ||
| background-size: 90px; | ||
| /* 그 밖에 필요한 속성 추가 */ | ||
| transform: translateX(-20%); |
There was a problem hiding this comment.
위에서 transform: skew(-10deg);를 사용해 .pokemon을 기울였습니다 💯 이에 따라 .pokemon .image도 함께 기울어진 상태입니다. 이로 인해 사진이 가려지는 걸 해결하기 위해 translateX로 이미지를 이동시켜 주셨네요 👍 여기에 더해 함께 기울여진 이미지가 똑바로 보이기 위해선 .pokemon에 줬던 기울기와 반대 방향으로 이미지의 기울기를 설정해주면 되겠죠? 추가해줍시다!
| /* :nth-child() 가상 클래스가 무엇인지 알아보고, 이를 적용하여 각 요소에 포켓몬 이미지 넣기 | ||
| (32개의 반복된 코드가 필요하며, 이미지는 background-image 속성 이용하기) */ | ||
| .container .pokemons .pokemon:nth-child(1) .image{ | ||
| background-image: url(./images/pokemon1.png) |
There was a problem hiding this comment.
가상 클래스 nth-child를 잘 이해하고 작성해 주셨군요! 😄
선택자를 길게 작성해주셨는데 .pokemon:nth-child(1) .image만 적어도 정상적으로 작동합니다. 용이한 유지보수를 위해 특별한 이유없인 css 선택자를 길게 작성하지 않는 것을 권장하니 참고해주세요!
추가로 background-image: url("./images/background.jpeg")에선 큰 따옴표 안에 경로를 작성해주셨는데, 이곳에선 따옴표 없이 경로를 작성해주셨습니다. 가독성을 위해 일관된 표기 규칙을 사용하는 습관을 들여봅시다 👍
|
|
||
| .container .logo img { | ||
|
|
||
| width: 100%;/* width를 이용해서 로고를 부모 요소의 최대 너비에 맞춰서 출력할 수 있는 코드 작성해 주세요 */ |
There was a problem hiding this comment.
정말 수고하셨습니다! 마지막까지 잘 작성해주셨어요 🥇
반드시 수정해야할 부분은 아니지만 추가되면 좋을 것 같은 부분 마지막으로 알려드리겠습니다 😊
img 태그에 display: block;을 적용하는 것입니다.
img 태그는 기본적으로 inline 요소이기 때문에 텍스트의 베이스라인을 기준으로 정렬됩니다. 이로 인해 이미지 하단에 텍스트의 꼬리 부분을 위한 미세한 빈 공간이 생기는데, block으로 변경하면 이 여백이 깔끔하게 사라진답니다!
따라서 해당 방식이 실무에서 권장됩니다 ✏️
|
정말 정말 수고많으셨습니다! 코드 리뷰하는 내내 고심하신 게 느껴졌어요 🥹 앞으로의 성장이 정말 기대가 됩니다 마지막으로 노가다였던 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
✨ 과제 내용
BS 2주차
📸 스크린샷(필수)
20260330_165948.mp4
📚 새로 알게된 내용 혹은 궁금한 점
피피티 결과물이랑 똑같이 만들려고 과제1에서 주석과 조금 다르게 작성한 부분이 있는데 calculator.form에서 버튼 높이 55px이라는 주석대로 코드를 쓸 때 다른 부분을 어떻게 해야 결과물이 피피티처럼 완성되는지 궁금합니다!!
그리고 과제2에서 로고를 HTML코드애서 이미지 넣기로 넣었는데 원래 과제에서 원했던 방식이 무엇인지도 궁금합니다.