[2주차 BS] 김나윤 by nayun0083 · Pull Request #22 · APPS-sookmyung/2026-Web-Basic-Study

nayun0083 · 2026-03-30T09:46:20Z

✨ 과제 내용

계산기 css구현
포켓몬 페이지

📸 스크린샷(필수)

계산기

2.포켓몬 페이지

메인 페이지

- 호버 시

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

새로 알게된 내용

transition

프로퍼티 값의 변화가 일정 시간에 걸쳐 일어나도록 하는 것
부드럽게 전환되는 효과
관련 프로퍼티
- transition-property: 효과를 적용할 css프로퍼티 지정
- transition-duration: 효과가 진행되는 시간 지정
- transition-delay: 요청을 받은 후 실제 변형 할 때까지의 지연시간 설정
- transition-timing-function : 효과의 진행 속도( 점점 빠르게, 점점 느리게 등)

transform

초기값에 영향을 미치지 않는 요소의 변형
기본 구성: transform: scale(x,y) translate(x,y) rotate(deg) skew(xdeg, ydeg);
translate(x,y): 원래 위치를 기준으로 내가 원하는 방향으로 위치 시킨다.
scale(x,y): 숫자의 배율 만큼 사이즈를 조정(1.2 = 120%)
rotate(deg): 각도를 나타내는 deg(degree)를 넣어 시계방향으로 회전
skew(deg): 비틀기 효과, 마름모꼴

flex

부모요소인 플렉스 컨테이너와 자식요소인 플렉스 아이템이 있다.
Flex의 속성들
Flex 컨테이너에 적용하는 속성들
- display:flex;
- flex-direction:축의 방향 결정(row, column, row-reverse, column-reverse)
- flex-wrap : 줄 넘김 (wrap(넘김), nowrap(안넘김, 기본값), wrap-reverse)
- flex-flow: flex-direction과 flew-wrap을 한꺼번에 지정 할 수 있는 속성
- justify-content : 메인축 방향 정렬(가로)
- align-items: 수직축 방향 정렬(세로)
Flex 아이템에 적용하는 속성들
- flex-basis :Flex 아이템의 기본 크기 설정
- flex-grow: 유연하게 늘리기
- flex-shrink: 유연하게 줄이기

가상 클래스 선택자

요소의 상태나 조건에 따라 스타일을 적용하는 방법
html을 바꾸지 않고도 특정 상황 일때만 스타일을 바꿀 수 있음
기본 문법-> 선택자:가상클래스
가상 클래스 종류
- :hover, :active(클릭하는 순간), :focus(입력창이 선택되었을 때), :visited(방문한 링크), :first-child, last-child, nth-child(n)

궁금한 점

포켓몬 페이지에서 css에 이미지를 집어넣을 때 32개를 나열했는데 이를 반복문을 사용해서 할 수 있는지 궁금합니다! 제가 찾아봤을 땐 css에 반복문과 관련된 문법이 없는 것 같던데 이렇게 무언가 반복해야할 때 사용할 수 있는 문법이 있을까요? 또한, 여기서는 css에서 이미지를 넣었는데, html에서도 이미지를 넣을 수 있는지 궁금합니다.

tjsl0607 · 2026-04-01T17:48:00Z

나윤님! 멋진 계산기 과제 제출해주셔서 감사합니다~
꼼꼼한 개념 정리부터 질문까지 배우고자 하는 의지가 돋보이는 PR입니다!! 멋져요!!!
더 알아두면 좋을 개념과 질문에 대한 답을 달아두었으니 편하게 읽어주세요😊
확인하신 코멘트에는 이모지로 표시해 주시면 감사하겠습니다.
포켓몬 과제도 곧 코드리뷰 달겠습니다!
정말 수고하셨어요 👍

tjsl0607 · 2026-04-01T17:51:21Z

+* {
+  margin:0; 
+  padding: 0; 
+  box-sizing: border-box; 


css의 박스 모델을 잘 이해하고 설정해주셨군요!
width와 height 계산이 border size를 기준으로 되도록 sizing을 border-box로 설정해두면 더 직관적으로 구현할 수 있어 장점이 있죠

tjsl0607 · 2026-04-01T17:51:39Z

+  background-color: white;
+  display: flex;
+  justify-content:center; 
+  align-content:center; 


Flexbox 레이아웃을 잘 이해하고 설정해야하는 부분이었습니다
아이템들이 배치되는 기본 방향이 가로인 걸 고려해서 주축을 가로 정렬로, 교차축을 세로 정렬로 잘 이해하신 것 같습니다
멋집니다! 😊

tjsl0607 · 2026-04-01T17:55:18Z

+  box-shadow:3px 3px 6px rgba(0, 0, 0, 0.15);
+
+  transition: all 0.1s ease; 
+  outline:none; 


브라우저 기본 스타일을 없애기 위해 border: none;과 outline: none;을 잘 적용해 주셨습니다 💯

한 가지 알아두면 좋은 점은, outline은 키보드 사용자에게 현재 위치를 알려주는 중요한 접근성 기능이라는 거예요. 이번 과제에서는 디자인을 위해 없앴지만, 실무에서 outline: none;을 할 때는 시각적으로 포커스 상태를 알 수 있게 배경색이나 그림자로 대체 효과를 넣어주어야 한답니다.

tjsl0607 · 2026-04-02T01:11:09Z

+  display: flex;
+  justify-content:center; 
+  align-content:center; 
+  height: 60vh;


vh가 60으로 설정되어 있네요!
vh는 현재 웹 브라우저 창에서 보이는 화면의 높이를 기준으로 크기를 정하는 단위입니다. 60vh는 화면에서 보이는 화면 높이의 60%만 보이게 하는 것이죠
따라서 원래 과제 기본 설정인 100vh로 수정하시면 좋을 것 같습니다 👍

tjsl0607 · 2026-04-02T01:12:24Z

+.calculator form {
+  display: grid;
+  grid-template-columns:repeat(4,1fr); 
+  height: 55px;


repeat을 사용해서 1fr이 4번 반복 작성되는 것을 훨씬 가독성 좋게 작성하셨네요! 👍

버튼 높이 설정은 height가 아닌 grid-auto-rows로 하신다면 주석대로 55px로 설정할 수 있습니다.
height은 전체 높이를 설정해줍니다. 따라서 행의 개수가 늘어남에 따라 높이도 증가해야 합니다.
반면 grid-auto-rows는 각 행의 고정된 높이를 설정해줍니다. 따라서 행이 추가되어도 55px로 일정하게 유지되는 확실한 이점이 있죠.
height가 아닌 grid-auto-rows를 활용해 재작성해 보시면 grid 개념 이해에 도움이 될 것 같습니다💥

tjsl0607 · 2026-04-02T01:17:00Z

+  background-color: #d5deef;
+  box-shadow:3px 3px 6px rgba(0, 0, 0, 0.15);
+
+  transition: all 0.1s ease; 


transition을 잘 사용해주셨어요! 👍

ease와 ease in out의 차이를 아시면 좋을 것 같아 정리해두겠습니다
이 두 속성은 가속과 감속에서 차이가 납니다! ease는 빠르게 빨라지고 도착지점에 가까워지면 느리게 느려집니다. ease in out도 마찬가지로 중간지점이 가장 빠르지만 ease와 달리 처음 빨라지는 속도와 마지막 느려지는 속도가 같습니다.

tjsl0607 · 2026-04-07T09:54:59Z

@@ -0,0 +1,173 @@
+body {
+  height: 100vh;
+  background-image: url(images/background.jpeg);


이미지를 잘 넣어주셨습니다 👍 참고로 따옴표가 없이도 기능상 문제는 없지만 공백이나 특수문자가 들어가는 경우를 대비해 경로 작성시 따옴표를 같이 적는 습관을 들이면 좋을 것 같습니다

tjsl0607 · 2026-04-07T10:00:29Z

+
+  display : flex;
+  flex-direction: row;
+  justify-content: center;


flex-wrap: wrap;을 보시고 display: flex;도 잘 추가해 적어주셨네요! 메인 축을 행(row)으로 둬 가로로 설정한 점도 정말 멋집니다 👍
게다가 justify-content를 center로 설정해 박스 내부의 요소도 가운데로 정렬하셨군요! CSS 속성을 잘 이해하고 레이아웃을 작성하셨네요 😃
여기에 더해 margin에 좌우 여백을 auto로 설정해 박스 자체를 가운데로 정렬시키면 더 좋을 것 같습니다!

tjsl0607 · 2026-04-07T10:45:21Z

+
+  /* transform 속성을 적용해 주세요 */ 
+  display: flex;
+  transform: skew(-10deg); /*기울이기*/


transform 속성을 활용해 잘 기울여주셨네요 👍

앞서 .pokems에서도 사용하신 대로 정렬이 필요한 각 요소의 직계 부모마다 명시적으로 display: flex;를 달아줘야합니다. 다만 현재 .pokemon의 자식 요소에는 FlexBox인 필요가 없는 것 같습니다! 따로 이유가 없다면 지워주세요 😄

그리고 과제 제출 시 주석은 지워주세요!

tjsl0607 · 2026-04-07T10:46:38Z

+  /* 그 밖에 필요한 속성 추가 */
+  border-radius: 10px;
+  margin: 5px;
+  background-color: rgb(93, 90, 90);


배경 색상이 더 어두우면 좋을 것 같습니다 ⚫ rgb(57, 54, 54)를 추천드립니다

tjsl0607 · 2026-04-07T11:36:08Z

+  transform: scale(1.1) skew(-10deg); /*크기 키우기*/
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 90px;


transform의 scale로 크기를 키우고 skew로 기울기를 잘 유지해 주셨네요! 수고하셨습니다 👏

확인해 보니 현재 hover 효과가 적용된 선택자는 .pokemon입니다. 따라서 background-position, background-size 같이 이미지에 해당하는 코드는 자식 요소인 .image에 적어주셔야 적용이 됩니다! 💡

참고로 마우스 오버 시 background-size를 바꾸는 건 브라우저가 화면을 매번 다시 그리는 방식이라 애니메이션 성능에 좋지 않습니다. 다행히 지금 코드는 이미 transform: scale(1.1)이 훌륭하게 적용되어 있기 때문에, 카드가 커지면 그 안의 .image도 알아서 예쁘게 같이 커집니다.

따라서 자잘한 배경 속성들은 전부 지우는 것이 깔끔합니다. 이대로 한번 수정해서 확인해 볼까요? 😊

tjsl0607 · 2026-04-07T11:45:33Z

+  width: 80px;
+  height: 84px;
+  background-position: center;
+  background-size: 90px;


원래 과제에 제시되어 있던 필수 코드들이 누락되어 있네요! width: 80px; height: 84px;로 임의로 수정하신 특별한 이유가 없다면, 해당 크기 지정 부분은 지우고 원래 코드였던 아래 속성들로 다시 복구해 주시면 좋을 것 같아요! 😊 width: 140%; height: 100%; background-repeat: no-repeat;

참고로 width를 140%로 설정하는 이유를 설명드리겠습니다! 앞서 부모 카드를 skew(-10deg)로 기울였습니다. 이 때 카드가 평행사변형으로 기울어지면 좌우 모서리 쪽에 빈 공간이 생기기 쉽습니다. 따라서 안쪽의 이미지를 카드보다 살짝 더 넉넉하게 깔아 기울임 효과가 들어가거나 나중에 역보정을 하더라도 이미지가 잘리거나 빈틈이 보이지 않고 꽉 차 보이게 됩니다.

tjsl0607 · 2026-04-07T11:46:36Z

+  background-size: 90px;
+}
+
+.container .pokemons .pokemon:nth-child(1) .image {


가상 클래스 nth-child를 잘 이해하고 작성해 주셨군요! 😄

선택자를 길게 작성해주셨는데 .pokemon:nth-child(1) .image만 적어도 정상적으로 작동합니다. 용이한 유지보수를 위해 특별한 이유없인 css 선택자를 길게 작성하지 않는 것을 권장하니 참고해주세요!

tjsl0607 · 2026-04-07T11:49:12Z

+}
+
+.container .logo img {
+  width: 100%;


정말 수고하셨습니다! 마지막까지 잘 작성해주셨어요 🥇

반드시 수정해야할 부분은 아니지만 추가되면 좋을 것 같은 부분 마지막으로 알려드리겠습니다 😊
img 태그에 display: block;을 적용하는 것입니다.
img 태그는 기본적으로 inline 요소이기 때문에 텍스트의 베이스라인을 기준으로 정렬됩니다. 이로 인해 이미지 하단에 텍스트의 꼬리 부분을 위한 미세한 빈 공간이 생기는데, block으로 변경하면 이 여백이 깔끔하게 사라진답니다!
따라서 해당 방식이 실무에서 권장됩니다 ✏️

tjsl0607 · 2026-04-07T11:49:37Z

정말 정말 수고많으셨습니다! 코드 리뷰하는 내내 고심하신 게 느껴졌어요 🥹 앞으로의 성장이 정말 기대가 됩니다

마지막으로 노가다였던 32줄에 대해 3주차 BS가 끝나 발전된 팁을 하나 드리자면요!
이런 노가다 같은 코드 대신 JavaScript를 활용해서 이미지를 넣어줄 수 있습니다.
3주차 BS 때 배웠던 JavaScript의 반복문과 DOM 선택자를 이용하면 됩니다 😮
아래 예제를 참고해주세요!

// 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')`;
}

nayun0083 added 2 commits March 30, 2026 10:38

1주차 과제 index.html 문법 수정

32216eb

Feat: 2주차 BS과제 및 실습코드

8d8c8ea

tjsl0607 self-assigned this Apr 1, 2026

tjsl0607 reviewed Apr 1, 2026

View reviewed changes

tjsl0607 requested changes Apr 2, 2026

View reviewed changes

tjsl0607 reviewed Apr 2, 2026

View reviewed changes

tjsl0607 reviewed Apr 7, 2026

View reviewed changes

tjsl0607 requested changes Apr 7, 2026

View reviewed changes

Conversation

nayun0083 commented Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✨ 과제 내용

📸 스크린샷(필수)

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

새로 알게된 내용

궁금한 점

Uh oh!

tjsl0607 commented Apr 1, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tjsl0607 commented Apr 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

nayun0083 commented Mar 30, 2026 •

edited

Loading