diff --git "a/\353\260\225\354\210\230\353\257\274/1\354\243\274\354\260\250 \354\213\244\354\212\265/image/img.png" "b/\353\260\225\354\210\230\353\257\274/week1/image/img.png" similarity index 100% rename from "\353\260\225\354\210\230\353\257\274/1\354\243\274\354\260\250 \354\213\244\354\212\265/image/img.png" rename to "\353\260\225\354\210\230\353\257\274/week1/image/img.png" diff --git "a/\353\260\225\354\210\230\353\257\274/1\354\243\274\354\260\250 \354\213\244\354\212\265/index.html" "b/\353\260\225\354\210\230\353\257\274/week1/index.html" similarity index 100% rename from "\353\260\225\354\210\230\353\257\274/1\354\243\274\354\260\250 \354\213\244\354\212\265/index.html" rename to "\353\260\225\354\210\230\353\257\274/week1/index.html" diff --git "a/\353\260\225\354\210\230\353\257\274/1\354\243\274\354\260\250 \354\213\244\354\212\265/style.css" "b/\353\260\225\354\210\230\353\257\274/week1/style.css" similarity index 100% rename from "\353\260\225\354\210\230\353\257\274/1\354\243\274\354\260\250 \354\213\244\354\212\265/style.css" rename to "\353\260\225\354\210\230\353\257\274/week1/style.css" diff --git "a/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_1/index.html" "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_1/index.html" new file mode 100644 index 0000000..90eaf34 --- /dev/null +++ "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_1/index.html" @@ -0,0 +1,38 @@ + + + + + + + Calculator + + + + +
+
+ + + + + + + + + + + + + + + + + + +
+
+ + + \ No newline at end of file diff --git "a/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_1/main.css" "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_1/main.css" new file mode 100644 index 0000000..0fe4d6c --- /dev/null +++ "b/\353\260\225\354\210\230\353\257\274/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 */ + grid-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 :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/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/background.jpeg" "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/background.jpeg" new file mode 100644 index 0000000..68c8aa0 Binary files /dev/null and "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/background.jpeg" differ diff --git "a/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/logo.svg" "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/logo.svg" new file mode 100644 index 0000000..400b10c --- /dev/null +++ "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/logo.svg" @@ -0,0 +1 @@ + \ No newline at end of file diff --git "a/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/main_logo.png" "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/main_logo.png" new file mode 100644 index 0000000..35e7d3c Binary files /dev/null and "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/main_logo.png" differ diff --git "a/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon1.png" "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon1.png" new file mode 100644 index 0000000..4bc79de Binary files /dev/null and "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon1.png" differ diff --git "a/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon10.png" "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon10.png" new file mode 100644 index 0000000..0683b45 Binary files /dev/null and "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon10.png" differ diff --git "a/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon11.png" "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon11.png" new file mode 100644 index 0000000..e66693a Binary files /dev/null and "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon11.png" differ diff --git "a/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon12.png" "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon12.png" new file mode 100644 index 0000000..526d7f6 Binary files /dev/null and "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon12.png" differ diff --git "a/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon13.png" "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon13.png" new file mode 100644 index 0000000..198e145 Binary files /dev/null and "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon13.png" differ diff --git "a/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon14.png" "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon14.png" new file mode 100644 index 0000000..8ad3afc Binary files /dev/null and "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon14.png" differ diff --git "a/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon15.png" "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon15.png" new file mode 100644 index 0000000..5fd314e Binary files /dev/null and "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon15.png" differ diff --git "a/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon16.png" "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon16.png" new file mode 100644 index 0000000..d26e8cd Binary files /dev/null and "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon16.png" differ diff --git "a/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon17.png" "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon17.png" new file mode 100644 index 0000000..d659711 Binary files /dev/null and "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon17.png" differ diff --git "a/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon18.png" "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon18.png" new file mode 100644 index 0000000..78eea5c Binary files /dev/null and "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon18.png" differ diff --git "a/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon19.png" "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon19.png" new file mode 100644 index 0000000..a412548 Binary files /dev/null and "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon19.png" differ diff --git "a/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon2.png" "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon2.png" new file mode 100644 index 0000000..cf727b8 Binary files /dev/null and "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon2.png" differ diff --git "a/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon20.png" "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon20.png" new file mode 100644 index 0000000..8bec014 Binary files /dev/null and "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon20.png" differ diff --git "a/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon21.png" "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon21.png" new file mode 100644 index 0000000..4d55441 Binary files /dev/null and "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon21.png" differ diff --git "a/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon22.png" "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon22.png" new file mode 100644 index 0000000..f5d7983 Binary files /dev/null and "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon22.png" differ diff --git "a/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon23.png" "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon23.png" new file mode 100644 index 0000000..a46c443 Binary files /dev/null and "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon23.png" differ diff --git "a/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon24.png" "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon24.png" new file mode 100644 index 0000000..537412d Binary files /dev/null and "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon24.png" differ diff --git "a/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon25.png" "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon25.png" new file mode 100644 index 0000000..e5aece5 Binary files /dev/null and "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon25.png" differ diff --git "a/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon26.png" "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon26.png" new file mode 100644 index 0000000..d57faf5 Binary files /dev/null and "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon26.png" differ diff --git "a/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon27.png" "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon27.png" new file mode 100644 index 0000000..e7b0840 Binary files /dev/null and "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon27.png" differ diff --git "a/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon28.png" "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon28.png" new file mode 100644 index 0000000..4ede258 Binary files /dev/null and "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon28.png" differ diff --git "a/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon29.png" "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon29.png" new file mode 100644 index 0000000..5dc0366 Binary files /dev/null and "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon29.png" differ diff --git "a/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon3.png" "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon3.png" new file mode 100644 index 0000000..01edeef Binary files /dev/null and "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon3.png" differ diff --git "a/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon30.png" "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon30.png" new file mode 100644 index 0000000..522f278 Binary files /dev/null and "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon30.png" differ diff --git "a/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon31.png" "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon31.png" new file mode 100644 index 0000000..6b51ac3 Binary files /dev/null and "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon31.png" differ diff --git "a/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon32.png" "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon32.png" new file mode 100644 index 0000000..184c80c Binary files /dev/null and "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon32.png" differ diff --git "a/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon4.png" "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon4.png" new file mode 100644 index 0000000..68cef73 Binary files /dev/null and "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon4.png" differ diff --git "a/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon5.png" "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon5.png" new file mode 100644 index 0000000..4ece488 Binary files /dev/null and "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon5.png" differ diff --git "a/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon6.png" "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon6.png" new file mode 100644 index 0000000..6f9e76b Binary files /dev/null and "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon6.png" differ diff --git "a/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon7.png" "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon7.png" new file mode 100644 index 0000000..ee948ea Binary files /dev/null and "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon7.png" differ diff --git "a/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon8.png" "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon8.png" new file mode 100644 index 0000000..348033e Binary files /dev/null and "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon8.png" differ diff --git "a/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon9.png" "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon9.png" new file mode 100644 index 0000000..18e2255 Binary files /dev/null and "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/images/images/pokemon9.png" differ diff --git "a/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/index.html" "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/index.html" new file mode 100644 index 0000000..b75f411 --- /dev/null +++ "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/index.html" @@ -0,0 +1,122 @@ + + + + + + + Pokemon + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+ + + + \ No newline at end of file diff --git "a/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/main.css" "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/main.css" new file mode 100644 index 0000000..f85e185 --- /dev/null +++ "b/\353\260\225\354\210\230\353\257\274/week2/\352\263\274\354\240\234_2/main.css" @@ -0,0 +1,104 @@ +body { + height: 100vh; + background-image: url('images/images/background.jpeg');/* 배경 이미지를 넣어주세요 */ + background-color: #ff9c00; + background-size: cover; + background-repeat: no-repeat; + background-attachment: fixed; +} + +.container { + padding: 50px 0;/* 내부 여백의 상하 50px, 좌우 0으로 설정하는 코드 작성해 주세요 */ +} + +.container .pokemons { + flex-wrap: wrap; + flex-direction: row;/* 요소들의 메인 축을 가로로 설정하는 코드를 입력해 주세요 */ + max-width: 700px;/* 요소의 최대 가로 크기를 700px로 설정해 주세요 */ + padding: 40px 20px;/* 내부 여백에 상하 40px, 좌우 20px 적용해 주세요 */ + /* 그 밖에 필요한 속성들 추가 */ + flex-wrap: wrap; + justify-content: center; + align-items: center; + margin: 0 auto; +} + +.container .pokemons .pokemon { + box-sizing: border-box; + width: 80px; + height: 84px; + border: 3px solid white; + /* 너비 80px, 높이 84px, 테두리를 3px 실선 하얀색으로 지정해 주는 코드를 각각 작성해 주세요 */ + /* transition 속성을 적용해 주세요 */ + /* transform 속성을 적용해 주세요 */ + transition: transform 0.3s ease-in-out; + /* 그 밖에 필요한 속성 추가 */ + overflow: hidden; + margin: 10px; + background-color: gray; +} + +/* 마우스의 포인터를 각 요소에 올렸을 때 발생하는 효과를 적용하는 코드들 작성하기 (가상 선택자 활용) */ +.container .pokemon .image :hover{ + transform: scale(1.1); + cursor: pointer; +} + +.container .pokemons .pokemon .image { + width: 140%; + height: 100%; + background-position: center; + background-repeat: no-repeat; + background-size: contain; + /* 그 밖에 필요한 속성 추가 */ + display: inline-block; +} + +/* :nth-child() 가상 클래스가 무엇인지 알아보고, 이를 적용하여 각 요소에 포켓몬 이미지 넣기 +(32개의 반복된 코드가 필요하며, 이미지는 background-image 속성 이용하기) */ +.container .pokemons .pokemon:nth-child(1) .image{background-image: url('images/images/pokemon1.png')} +.container .pokemons .pokemon:nth-child(2) .image{background-image: url('images/images/pokemon2.png')} +.container .pokemons .pokemon:nth-child(3) .image{background-image: url('images/images/pokemon3.png')} +.container .pokemons .pokemon:nth-child(4) .image{background-image: url('images/images/pokemon4.png')} +.container .pokemons .pokemon:nth-child(5) .image{background-image: url('images/images/pokemon5.png')} +.container .pokemons .pokemon:nth-child(6) .image{background-image: url('images/images/pokemon6.png')} +.container .pokemons .pokemon:nth-child(7) .image{background-image: url('images/images/pokemon7.png')} +.container .pokemons .pokemon:nth-child(8) .image{background-image: url('images/images/pokemon8.png')} +.container .pokemons .pokemon:nth-child(9) .image{background-image: url('images/images/pokemon9.png')} +.container .pokemons .pokemon:nth-child(10) .image{background-image: url('images/images/pokemon10.png')} +.container .pokemons .pokemon:nth-child(11) .image{background-image: url('images/images/pokemon11.png')} +.container .pokemons .pokemon:nth-child(12) .image{background-image: url('images/images/pokemon12.png')} +.container .pokemons .pokemon:nth-child(13) .image{background-image: url('images/images/pokemon13.png')} +.container .pokemons .pokemon:nth-child(14) .image{background-image: url('images/images/pokemon14.png')} +.container .pokemons .pokemon:nth-child(15) .image{background-image: url('images/images/pokemon15.png')} +.container .pokemons .pokemon:nth-child(16) .image{background-image: url('images/images/pokemon16.png')} +.container .pokemons .pokemon:nth-child(17) .image{background-image: url('images/images/pokemon17.png')} +.container .pokemons .pokemon:nth-child(18) .image{background-image: url('images/images/pokemon18.png')} +.container .pokemons .pokemon:nth-child(19) .image{background-image: url('images/images/pokemon19.png')} +.container .pokemons .pokemon:nth-child(20) .image{background-image: url('images/images/pokemon20.png')} +.container .pokemons .pokemon:nth-child(21) .image{background-image: url('images/images/pokemon21.png')} +.container .pokemons .pokemon:nth-child(22) .image{background-image: url('images/images/pokemon22.png')} +.container .pokemons .pokemon:nth-child(23) .image{background-image: url('images/images/pokemon23.png')} +.container .pokemons .pokemon:nth-child(24) .image{background-image: url('images/images/pokemon24.png')} +.container .pokemons .pokemon:nth-child(25) .image{background-image: url('images/images/pokemon25.png')} +.container .pokemons .pokemon:nth-child(26) .image{background-image: url('images/images/pokemon26.png')} +.container .pokemons .pokemon:nth-child(27) .image{background-image: url('images/images/pokemon27.png')} +.container .pokemons .pokemon:nth-child(28) .image{background-image: url('images/images/pokemon28.png')} +.container .pokemons .pokemon:nth-child(29) .image{background-image: url('images/images/pokemon29.png')} +.container .pokemons .pokemon:nth-child(30) .image{background-image: url('images/images/pokemon30.png')} +.container .pokemons .pokemon:nth-child(31) .image{background-image: url('images/images/pokemon31.png')} +.container .pokemons .pokemon:nth-child(32) .image{background-image: url('images/images/pokemon32.png')} + + + +.container .logo { + max-width: 700px;/* 이미지 요소가 너무 크네요! 요소의 최대 가로 크기를 임의로 설정해 주세요 */ + margin: 0 auto;/* margin을 이용해서 요소를 가운데 정렬 해주세요 */ +} + +.container .logo img { + max-width: 100%; + width: 100%; + height: auto; + display: block;/* width를 이용해서 로고를 부모 요소의 최대 너비에 맞춰서 출력할 수 있는 코드 작성해 주세요 */ +} \ No newline at end of file diff --git "a/\353\260\225\354\210\230\353\257\274/week2/\354\213\244\354\212\265/images.zip" "b/\353\260\225\354\210\230\353\257\274/week2/\354\213\244\354\212\265/images.zip" new file mode 100644 index 0000000..044b9da Binary files /dev/null and "b/\353\260\225\354\210\230\353\257\274/week2/\354\213\244\354\212\265/images.zip" differ diff --git "a/\353\260\225\354\210\230\353\257\274/week2/\354\213\244\354\212\265/images/freediving.jpeg" "b/\353\260\225\354\210\230\353\257\274/week2/\354\213\244\354\212\265/images/freediving.jpeg" new file mode 100644 index 0000000..6c5641a Binary files /dev/null and "b/\353\260\225\354\210\230\353\257\274/week2/\354\213\244\354\212\265/images/freediving.jpeg" differ diff --git "a/\353\260\225\354\210\230\353\257\274/week2/\354\213\244\354\212\265/index.html" "b/\353\260\225\354\210\230\353\257\274/week2/\354\213\244\354\212\265/index.html" new file mode 100644 index 0000000..8eaaf34 --- /dev/null +++ "b/\353\260\225\354\210\230\353\257\274/week2/\354\213\244\354\212\265/index.html" @@ -0,0 +1,30 @@ + + + + + + + Document + + + + + +
+
+ 프리다이빙 +
+
+
+
freediving
+

Into the deep!

+
+ Freediving is breath-hold diving, being in and under the water while + holding one's breath. +
+
+
+
+ + + \ No newline at end of file diff --git "a/\353\260\225\354\210\230\353\257\274/week2/\354\213\244\354\212\265/main.css" "b/\353\260\225\354\210\230\353\257\274/week2/\354\213\244\354\212\265/main.css" new file mode 100644 index 0000000..c412826 --- /dev/null +++ "b/\353\260\225\354\210\230\353\257\274/week2/\354\213\244\354\212\265/main.css" @@ -0,0 +1,63 @@ +/* 📌 body에 배경색 #d2f3f8 과 가운데 정렬 */ +body { + /* 5. Flexbox 활성화 */ + display: flex; + /* 5. 가로 정렬 */ + justify-content: center; + /* 5. 세로 정렬 */ + align-items: center; + height: 100vh; + /* 4. 배경색 적용 */ + background-color: #B2f3f8; +} + +/* 📌 .container 구조와 박스 스타일링 */ +.container { + /* 5. 가로 정렬 */ + display: flex; + /* 4. 10px만큼 둥글게 */ + border-radius: 10px; + overflow: hidden; + /* 2. 가로 500px 세로 300px */ + width: 500px; + height: 300px; + /* 4. 배경색 설정하기 (container가 무엇인지 확인하면 바로 알 수 있어요)*/ + background-color: white; + +} + +/* 📌 .item 구성 */ +.container .item { + flex: 1; +} + +/* 📌 이미지 삽입 및 스타일링 */ +.container .item img { + width: 100%; +} + +/* 📌 텍스트 영역 스타일링 */ +.container .item .content-wrapper { + box-sizing: border-box; + /* 1. 패딩값 20px */ + padding: 20px; + /* 2. 너비 스스로 정해보기! */ +} + +.container .item .content-wrapper .tag { + /* 3. 색 설정하기! */ + color: purple; +} + +.container .item .content-wrapper .title { + /* 3. 글자 크기 30px */ + font-size: 30px; + margin-top: 2px; + font-weight: 600; +} + +.container .item .content-wrapper .description { + /* 3. 색상 gray, */ + color: gray; + margin-top: 20px; +} \ No newline at end of file