diff --git "a/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_1/index.html" "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_1/index.html" new file mode 100644 index 0000000..90eaf34 --- /dev/null +++ "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_1/index.html" @@ -0,0 +1,38 @@ + + + + + + + Calculator + + + + +
+
+ + + + + + + + + + + + + + + + + + +
+
+ + + \ No newline at end of file diff --git "a/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_1/main.css" "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_1/main.css" new file mode 100644 index 0000000..19443ff --- /dev/null +++ "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_1/main.css" @@ -0,0 +1,77 @@ +/* 기본 박스 모델 초기화 */ +* { + margin: 0; /* 여백 제거하는 속성 */ + padding: 0; /* 내부 여백 제거하는 속성 */ + box-sizing: border-box; /* width와 height 계산에 padding과 border를 포함하도록 설정 */ +} + +body { + background-color: white; + display: flex; + justify-content: center; /* 가로 정렬 */ + align-items: center; /* 세로 정렬 */ + height: 100vh; +} + +.calculator { + width: 287px; + border-radius: 5px; /* 꼭짓점 둥글기 정도: 5px */ + background-color: #f0f3fa; + padding: 20px 10px; /* 상하 20px, 좌우 10px 내부 여백 */ + box-shadow: 0px 5px 10px rgba(6, 15, 65, 0.4); + /* x축: 0px, y축: 5px, 퍼짐: 10px, 색상: rgb(6, 15, 65), 투명도: 0.4 그림자 적용 */ +} + +.calculator form { + display: grid; /* grid 선언 */ + grid-template-columns: repeat(4, 1fr); /* 4열 균등 분배 */ + grid-auto-rows: 55px; /* 버튼 높이 55px */ + gap: 10px; /* 버튼 간격 10px */ +} + +.calculator form input { + cursor: pointer; /* 마우스 커서 포인터로 변경 */ + font-size: 19px; /* 버튼 내부 텍스트 크기 19px */ + border-radius: 10px; /* 꼭짓점 둥글기 정도: 10px */ + border: none; /* 외곽선 없음 */ + background-color: #d5deef; + 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; /* 포커스 시 나타나는 기본 외곽선 제거 */ +} + +/* 마우스를 올렸을 때 버튼 강조 효과 */ +.calculator form input:hover{ + box-shadow: 1px 1px 2px #696969; /* x축: 1px, y축: 1px, 퍼짐: 2px, 색상: #696969 그림자 적용 */ +} + +/* 버튼 색상 및 크기 설정 */ +.calculator form .clear { + color: #ed4848; + grid-column: span 3; /* `C` 버튼이 현재 위치에서 3개의 열을 차지하도록 설정 */ +} + +.calculator form .operator { + background-color: #395886; + color: white; +} + +.calculator form .dot { + background-color: #628ecb; + color: white; +} + +.calculator form input[type="text"] { + grid-column: span 4; /* 입력창이 4개의 열 전체를 차지하도록 설정 */ + text-align: left; /* 입력된 값이 어느 방향으로 정렬될지 설정 */ + padding: 10px; /* 입력창 내부 여백 10px 설정 */ + font-size: 20px; /* 텍스트 크기 20px */ + border-radius: 6px; /* 꼭짓점 둥글기 정도: 6px */ + border: 1px solid #bbb; /* 외곽선: 1px, 실선, #bbb 색상 */ + background-color: #f9f9f9; +} + +.calculator form .result { + grid-column: span 2; /* `=` 버튼이 현재 위치에서 2개의 열을 차지하도록 설정*/ +} diff --git "a/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/.vscode/settings.json" "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/.vscode/settings.json" new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/.vscode/settings.json" @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git "a/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/background.jpeg" "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/background.jpeg" new file mode 100644 index 0000000..68c8aa0 Binary files /dev/null and "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/background.jpeg" differ diff --git "a/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/logo.svg" "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/logo.svg" new file mode 100644 index 0000000..400b10c --- /dev/null +++ "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/logo.svg" @@ -0,0 +1 @@ + \ No newline at end of file diff --git "a/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/main_logo.png" "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/main_logo.png" new file mode 100644 index 0000000..35e7d3c Binary files /dev/null and "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/main_logo.png" differ diff --git "a/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon1.png" "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon1.png" new file mode 100644 index 0000000..4bc79de Binary files /dev/null and "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon1.png" differ diff --git "a/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon10.png" "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon10.png" new file mode 100644 index 0000000..0683b45 Binary files /dev/null and "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon10.png" differ diff --git "a/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon11.png" "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon11.png" new file mode 100644 index 0000000..e66693a Binary files /dev/null and "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon11.png" differ diff --git "a/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon12.png" "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon12.png" new file mode 100644 index 0000000..526d7f6 Binary files /dev/null and "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon12.png" differ diff --git "a/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon13.png" "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon13.png" new file mode 100644 index 0000000..198e145 Binary files /dev/null and "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon13.png" differ diff --git "a/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon14.png" "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon14.png" new file mode 100644 index 0000000..8ad3afc Binary files /dev/null and "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon14.png" differ diff --git "a/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon15.png" "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon15.png" new file mode 100644 index 0000000..5fd314e Binary files /dev/null and "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon15.png" differ diff --git "a/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon16.png" "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon16.png" new file mode 100644 index 0000000..d26e8cd Binary files /dev/null and "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon16.png" differ diff --git "a/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon17.png" "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon17.png" new file mode 100644 index 0000000..d659711 Binary files /dev/null and "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon17.png" differ diff --git "a/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon18.png" "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon18.png" new file mode 100644 index 0000000..78eea5c Binary files /dev/null and "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon18.png" differ diff --git "a/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon19.png" "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon19.png" new file mode 100644 index 0000000..a412548 Binary files /dev/null and "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon19.png" differ diff --git "a/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon2.png" "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon2.png" new file mode 100644 index 0000000..cf727b8 Binary files /dev/null and "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon2.png" differ diff --git "a/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon20.png" "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon20.png" new file mode 100644 index 0000000..8bec014 Binary files /dev/null and "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon20.png" differ diff --git "a/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon21.png" "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon21.png" new file mode 100644 index 0000000..4d55441 Binary files /dev/null and "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon21.png" differ diff --git "a/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon22.png" "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon22.png" new file mode 100644 index 0000000..f5d7983 Binary files /dev/null and "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon22.png" differ diff --git "a/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon23.png" "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon23.png" new file mode 100644 index 0000000..a46c443 Binary files /dev/null and "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon23.png" differ diff --git "a/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon24.png" "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon24.png" new file mode 100644 index 0000000..537412d Binary files /dev/null and "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon24.png" differ diff --git "a/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon25.png" "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon25.png" new file mode 100644 index 0000000..e5aece5 Binary files /dev/null and "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon25.png" differ diff --git "a/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon26.png" "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon26.png" new file mode 100644 index 0000000..d57faf5 Binary files /dev/null and "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon26.png" differ diff --git "a/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon27.png" "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon27.png" new file mode 100644 index 0000000..e7b0840 Binary files /dev/null and "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon27.png" differ diff --git "a/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon28.png" "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon28.png" new file mode 100644 index 0000000..4ede258 Binary files /dev/null and "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon28.png" differ diff --git "a/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon29.png" "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon29.png" new file mode 100644 index 0000000..5dc0366 Binary files /dev/null and "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon29.png" differ diff --git "a/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon3.png" "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon3.png" new file mode 100644 index 0000000..01edeef Binary files /dev/null and "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon3.png" differ diff --git "a/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon30.png" "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon30.png" new file mode 100644 index 0000000..522f278 Binary files /dev/null and "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon30.png" differ diff --git "a/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon31.png" "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon31.png" new file mode 100644 index 0000000..6b51ac3 Binary files /dev/null and "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon31.png" differ diff --git "a/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon32.png" "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon32.png" new file mode 100644 index 0000000..184c80c Binary files /dev/null and "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon32.png" differ diff --git "a/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon4.png" "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon4.png" new file mode 100644 index 0000000..68cef73 Binary files /dev/null and "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon4.png" differ diff --git "a/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon5.png" "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon5.png" new file mode 100644 index 0000000..4ece488 Binary files /dev/null and "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon5.png" differ diff --git "a/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon6.png" "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon6.png" new file mode 100644 index 0000000..6f9e76b Binary files /dev/null and "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon6.png" differ diff --git "a/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon7.png" "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon7.png" new file mode 100644 index 0000000..ee948ea Binary files /dev/null and "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon7.png" differ diff --git "a/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon8.png" "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon8.png" new file mode 100644 index 0000000..348033e Binary files /dev/null and "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon8.png" differ diff --git "a/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon9.png" "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon9.png" new file mode 100644 index 0000000..18e2255 Binary files /dev/null and "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/images/pokemon9.png" differ diff --git "a/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/index.html" "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/index.html" new file mode 100644 index 0000000..96d39cf --- /dev/null +++ "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/index.html" @@ -0,0 +1,121 @@ + + + + + + + Pokemon + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+ + + \ No newline at end of file diff --git "a/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/main.css" "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/main.css" new file mode 100644 index 0000000..1573a91 --- /dev/null +++ "b/\354\265\234\354\227\260\354\210\230/week2/\352\263\274\354\240\234_2/main.css" @@ -0,0 +1,118 @@ +body { + height: 100vh; + /* 배경 이미지를 넣어주세요 */ + background-image: url(images/background.jpeg); + background-color: #ff9c00; + background-size: cover; + background-repeat: no-repeat; + background-attachment: fixed; + display: flex; + justify-content: center; +} + +.container { + /* 내부 여백의 상하 50px, 좌우 0으로 설정하는 코드 작성해 주세요 */ + padding: 50px 0px; + display: flex; + flex-direction: column; + align-items: center; +} + +.container .pokemons { + display: flex; + flex-wrap: wrap; + /* 요소들의 메인 축을 가로로 설정하는 코드를 입력해 주세요 */ + flex-direction: row; + /* 요소의 최대 가로 크기를 700px로 설정해 주세요 */ + max-width: 700px; + /* 내부 여백에 상하 40px, 좌우 20px 적용해 주세요 */ + padding: 40px 20px; + /* 그 밖에 필요한 속성들 추가 */ + justify-content: center; + gap: 10px +} + +.container .pokemons .pokemon { + box-sizing: border-box; + /* 너비 80px, 높이 84px, 테두리를 3px 실선 하얀색으로 지정해 주는 코드를 각각 작성해 주세요 */ + width: 80px; + height: 84px; + border: 3px solid white; + border-radius: 12px; + background-color: #333; + /* transition 속성을 적용해 주세요 */ + transition: all 0.3 ease; + /* transform 속성을 적용해 주세요 */ + transform: scale(1) skewX(-15deg); + /* 그 밖에 필요한 속성 추가 */ + background-size: 100%; + +} + +/* 마우스의 포인터를 각 요소에 올렸을 때 발생하는 효과를 적용하는 코드들 작성하기 (가상 선택자 활용) */ +.container .pokemons .pokemon:hover{ + transform: scale(1.1) skewX(-15deg); + background-color: #ff9c00; + box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); + z-index: 10; +} + +.container .pokemons .pokemon .image { + width: 100%; + height: 100%; + background-position: center; + background-repeat: no-repeat; + background-size: contain; + /* 그 밖에 필요한 속성 추가 */ + transform: skewX(15deg); +} + + +/* :nth-child() 가상 클래스가 무엇인지 알아보고, 이를 적용하여 각 요소에 포켓몬 이미지 넣기 +(32개의 반복된 코드가 필요하며, 이미지는 background-image 속성 이용하기) */ +.container .pokemons .pokemon:nth-child(1) .image { background-image: url(images/pokemon1.png); } +.container .pokemons .pokemon:nth-child(2) .image { background-image: url(images/pokemon2.png); } +.container .pokemons .pokemon:nth-child(3) .image{ background-image: url(images/pokemon3.png); } +.container .pokemons .pokemon:nth-child(4) .image{ background-image: url(images/pokemon4.png); } +.container .pokemons .pokemon:nth-child(5) .image{ background-image: url(images/pokemon5.png); } +.container .pokemons .pokemon:nth-child(6) .image{ background-image: url(images/pokemon6.png); } +.container .pokemons .pokemon:nth-child(7) .image{ background-image: url(images/pokemon7.png); } +.container .pokemons .pokemon:nth-child(8) .image{ background-image: url(images/pokemon8.png); } +.container .pokemons .pokemon:nth-child(9) .image{ background-image: url(images/pokemon9.png); } +.container .pokemons .pokemon:nth-child(10) .image{ background-image: url(images/pokemon10.png); } +.container .pokemons .pokemon:nth-child(11) .image{ background-image: url(images/pokemon11.png); } +.container .pokemons .pokemon:nth-child(12) .image{ background-image: url(images/pokemon12.png); } +.container .pokemons .pokemon:nth-child(13) .image{ background-image: url(images/pokemon13.png); } +.container .pokemons .pokemon:nth-child(14) .image{ background-image: url(images/pokemon14.png); } +.container .pokemons .pokemon:nth-child(15) .image{ background-image: url(images/pokemon15.png); } +.container .pokemons .pokemon:nth-child(16) .image{ background-image: url(images/pokemon16.png); } +.container .pokemons .pokemon:nth-child(17) .image{ background-image: url(images/pokemon17.png); } +.container .pokemons .pokemon:nth-child(18) .image{ background-image: url(images/pokemon18.png); } +.container .pokemons .pokemon:nth-child(19) .image{ background-image: url(images/pokemon19.png); } +.container .pokemons .pokemon:nth-child(20) .image{ background-image: url(images/pokemon20.png); } +.container .pokemons .pokemon:nth-child(21) .image{ background-image: url(images/pokemon21.png); } +.container .pokemons .pokemon:nth-child(22) .image{ background-image: url(images/pokemon22.png); } +.container .pokemons .pokemon:nth-child(23) .image{ background-image: url(images/pokemon23.png); } +.container .pokemons .pokemon:nth-child(24) .image{ background-image: url(images/pokemon24.png); } +.container .pokemons .pokemon:nth-child(25) .image{ background-image: url(images/pokemon25.png); } +.container .pokemons .pokemon:nth-child(26) .image{ background-image: url(images/pokemon26.png); } +.container .pokemons .pokemon:nth-child(27) .image{ background-image: url(images/pokemon27.png); } +.container .pokemons .pokemon:nth-child(28) .image{ background-image: url(images/pokemon28.png); } +.container .pokemons .pokemon:nth-child(29) .image{ background-image: url(images/pokemon29.png); } +.container .pokemons .pokemon:nth-child(30) .image{ background-image: url(images/pokemon30.png); } +.container .pokemons .pokemon:nth-child(31) .image{ background-image: url(images/pokemon31.png); } +.container .pokemons .pokemon:nth-child(32) .image{ background-image: url(images/pokemon32.png); } + + + +.container .logo { + /* 이미지 요소가 너무 크네요! 요소의 최대 가로 크기를 임의로 설정해 주세요 */ + max-width: 300px; + /* margin을 이용해서 요소를 가운데 정렬 해주세요 */ + margin: 20px auto; +} + +.container .logo img { + /* width를 이용해서 로고를 부모 요소의 최대 너비에 맞춰서 출력할 수 있는 코드 작성해 주세요 */ + width: 100%; +} \ No newline at end of file