[ 1주차 기본/심화/생각 과제 ] 웨비의 사진관과 가계부 #3
There are no files selected for viewing
Binary file not shown.
Binary file not shown.
Binary file not shown.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| { | ||
| "liveServer.settings.port": 5501 | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="ko"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <link rel="stylesheet" href="style.css"/> | ||
| <link rel="stylesheet" href="sec01.css"/> | ||
| <link rel="stylesheet" href="sec02.css"/> | ||
| <link rel="stylesheet" href="sec03.css"/> | ||
|
|
||
| <title>김밍밍</title> | ||
| </head> | ||
| <body> | ||
| <h2>NewYork</h2> | ||
| <div class="container"> | ||
| <section class="prSction"> | ||
|
||
| <!-- 이미지 미리보기 항목 --> | ||
|
||
| <div class="prItem"> | ||
| <img src="wk1/01.png" alt="Photo"> | ||
| </div> | ||
| <div class="prItem"> | ||
| <img src="wk1/02.png" alt="Photo"> | ||
| </div> | ||
| <div class="prItem"> | ||
| <img src="wk2/01.png" alt="Photo"> | ||
| </div> | ||
| <div class="prItem"> | ||
| <img src="wk2/02.png" alt="Photo"> | ||
| </div> | ||
| <div class="prItem"> | ||
| <img src="wk3/01.png" alt="Photo"> | ||
| </div> | ||
| <div class="prItem"> | ||
| <img src="wk3/02.png" alt="Photo"> | ||
| </div> | ||
| <div class="prItem"> | ||
| <img src="wk1/04.png" alt="Photo"> | ||
| </div> | ||
| <!-- 추가 이미지 항목들 추가 가능 --> | ||
| </section> | ||
| </div> | ||
| <nav> | ||
| <h3>category</h3> | ||
| <ul> | ||
| <li><a href="#sec01">[1] 뉴욕은 낭만이 넘치는 도시에요</a></li> | ||
| <li><a href="#sec02">[2] 가을맞이에 한창인 뉴욕</a></li> | ||
| <li><a href="#sec03">[3] 애증의 뉴욕 이놈자식 그래도 사랑해</a></li> | ||
| </ul> | ||
| </nav> | ||
| <section id="sec01" class="sec01img"> | ||
| <h4>뉴욕은 낭만이 넘치는 도시에요</h4> | ||
| <div class="flexbox01"> | ||
| <div class="sec01item"><img src="wk1/02.png"></div> | ||
| <div class="sec01item"><img src="wk1/08.png"></div> | ||
| <div class="sec01item"><img src="wk1/03.png"></div> | ||
| <div class="sec01item"><img src="wk1/04.png"></div> | ||
| <div class="sec01item"><img src="wk1/05.png"></div> | ||
| <div class="sec01item"><img src="wk1/11.png"></div> | ||
| <div class="sec01item"><img src="wk1/09.png"></div> | ||
| <div class="sec01item"><img src="wk1/10.png"></div> | ||
| <div class="sec01item"><img src="wk1/01.png"></div> | ||
| </div> | ||
| </section> | ||
| <section id="sec02" class="sec02img"> | ||
| <h4>가을맞이에 한창인 뉴욕</h4> | ||
| <div class="flexbox02"> | ||
| <div class="big"><img src="wk2/04.png"></div> | ||
| <div class="small"> | ||
| <img src="wk2/06.png"> | ||
| <img src="wk2/01.png"> | ||
| <img src="wk2/09.png"> | ||
| <img src="wk2/07.png"> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| <section id="sec03" class="sec03img"> | ||
| <h4>애증의 뉴욕 이놈자식 그래도 사랑해</h4> | ||
| <div class="grid-container"> | ||
| <div class="grid-item"><img src="wk3/10.png"></div> | ||
| <div class="grid-item"><img src="wk3/12.png"></div> | ||
| <div class="grid-item"><img src="wk3/03.png"></div> | ||
| <div class="grid-item"><img src="wk3/11.png"></div> | ||
| <div class="grid-item"><img src="wk3/01.png"></div> | ||
| <!-- 원하는 만큼 이미지 추가 --> | ||
| </div> | ||
| </section> | ||
| <footer> | ||
| <div class="footerContent"> | ||
| <p>© 2023 Sopt</p> | ||
| <button id="topButton"><div style="cursor:pointer;" onclick="window.scrollTo(0,0);">Top</div> | ||
|
||
| </button> | ||
| </div> | ||
| </footer> | ||
| </div> | ||
| </body> | ||
| </html> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| document.addEventListener("DOMContentLoaded", function () { | ||
| var topButton = document.getElementById("topButton"); | ||
|
|
||
| window.addEventListener("scroll", function () { | ||
| if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { | ||
| topButton.style.display = "block"; | ||
| } else { | ||
| topButton.style.display = "none"; | ||
| } | ||
| }); | ||
|
|
||
| topButton.addEventListener("click", function () { | ||
| document.body.scrollTop = 0; // Safari | ||
| document.documentElement.scrollTop = 0; // Chrome, Firefox, IE, Opera | ||
| }); | ||
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| .sec01img{ | ||
| justify-content: center; /* 이미지를 가운데 정렬 */ | ||
| align-items: center; | ||
|
There was a problem hiding this comment. 이 속성같은 경우에 |
||
| } | ||
| .flexbox01{ | ||
| flex-wrap:wrap; | ||
| white-space: nowrap; | ||
|
There was a problem hiding this comment.
|
||
| /* 아이템의 너비 설정 (여기서는 3개로 나눔) */ | ||
| display: flex; | ||
| } | ||
| .sec01item { | ||
| width:200px; | ||
| height: 200px; | ||
| flex-grow: 1; | ||
| border: 1px solid #ddd; | ||
| margin-right: 10px; | ||
| margin-bottom: 10px; | ||
| /* 이미지 간 간격 설정 */ | ||
| } | ||
|
|
||
| .sec01item img{ | ||
| width:100%; | ||
| height: 100%; | ||
| } | ||
|
|
||
|
|
||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| .sec02img{ | ||
| width:100%; | ||
| } | ||
| .flexbox02{ | ||
| display: flex; flex-direction: row; | ||
| white-space: nowrap; | ||
| width:100%; | ||
| height:300px; | ||
| justify-content: center; | ||
| gap:10px; | ||
| } | ||
| .big{ | ||
| width:50%; | ||
| height:100%; | ||
| border: 1px ; | ||
| } | ||
| .big img{ | ||
| width:100%; | ||
| height:100%; | ||
| } | ||
| .small{ | ||
| flex-wrap:wrap; | ||
| width:50%; | ||
| display:flex; | ||
| height:100%; | ||
| gap:10px; | ||
| } | ||
| .small img{ | ||
| width: calc(50% - 6px); /* 간격을 뺀 크기로 설정합니다 */ | ||
| height: calc(50% - 6px); /* 간격을 뺀 크기로 설정합니다 */ | ||
|
|
||
| } | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| /* 그리드 컨테이너 스타일 */ | ||
| .grid-container { | ||
| display: grid; | ||
| grid-template-rows: repeat(4, 110px); | ||
| grid-template-columns: repeat(8, 1fr); | ||
| grid-auto-rows: 100px; | ||
| gap: 10px; /* 그리드 아이템 사이의 간격 설정 */ | ||
| } | ||
|
|
||
| /* 그리드 아이템 스타일 */ | ||
| .grid-item { | ||
| border: 1px solid #ccc; /* 그리드 아이템 테두리 스타일 설정 */ | ||
| text-align: center; | ||
| } | ||
| .grid-item:first-child { | ||
|
|
||
| grid-row: 1/ 2; | ||
| grid-column: 1/5; | ||
| } | ||
| .grid-item:nth-child(2) { | ||
| grid-row: 2 / 3; | ||
| grid-column: 1/5; | ||
| } | ||
| .grid-item:nth-child(3) { | ||
| grid-row: 1 / 3; | ||
| grid-column: 5/9; | ||
| } | ||
| .grid-item:nth-child(4) { | ||
| grid-row: 3 / 5; | ||
| grid-column: 1/7; | ||
| } | ||
| .grid-item:nth-child(5) { | ||
| grid-row: 3 / 5; | ||
| grid-column: 7/9; | ||
| } | ||
| /* 이미지 크기 조절 */ | ||
| .grid-item img { | ||
| width: 100%; /* 그리드 아이템 내의 이미지 최대 너비 설정 */ | ||
| height: 100%; /* 비율에 맞게 이미지 높이 조절 */ | ||
| } | ||
|
There was a problem hiding this comment.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| h2 { | ||
| background-color: palegoldenrod; | ||
| color: black; | ||
| text-align: center; | ||
| line-height: 2; | ||
|
||
| } | ||
| h3{ | ||
| color:black; | ||
| line-height: 2; | ||
| margin-bottom: 0%; | ||
| } | ||
| h4{ | ||
| position: sticky; | ||
| background-color: rgb(245, 208, 214); | ||
| line-height: 2; | ||
| } | ||
| /*position: sticky;*/ | ||
|
||
| body { | ||
| padding: 0; /*안쪽 여백 0*/ | ||
| font-family: meiryo, sans-serif; | ||
| } | ||
|
|
||
| .prSction{ | ||
|
||
| overflow-x: scroll; | ||
| display: flex; | ||
| width: 100%; height: 100%; | ||
|
||
| white-space: nowrap; | ||
| } | ||
|
|
||
| .prItem { | ||
| width: 100%; | ||
| height: 100%; | ||
| /* 각 이미지의 너비 설정 */ | ||
| margin-right: 10px; | ||
| /* 이미지 간 간격 설정 */ | ||
| } | ||
|
|
||
|
|
||
| /* 추가적인 스타일링을 위한 예시 */ | ||
| .prItem img { | ||
| width: 200px; | ||
| height: 200px; | ||
| border: 1px solid #ddd; | ||
| /*border-radius: 5px;*/ | ||
| } | ||
|
|
||
| ul { | ||
| list-style-type: none; /* 목록 스타일 제거 */ | ||
| padding: 0; /* 목록 내부 패딩 제거 */ | ||
| margin: 0; /* 목록 주변 여백 제거 */ | ||
| /*position: sticky;*/ | ||
| } | ||
| ul li{ | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| ul li a { | ||
| text-decoration: none; | ||
| color: #333; | ||
| transition: color 0.3s, text-decoration 0.3s; | ||
| } | ||
|
|
||
| ul li a:hover { | ||
| color: rgb(106, 166, 223); /* hover 시 텍스트 색상 변경 */ | ||
| text-decoration: underline; /* hover 시 밑줄 표시 */ | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .footerContent p{ | ||
| text-align: center; | ||
| } | ||
|
|
||
| /* Top 버튼 스타일 */ | ||
| #topButton { | ||
| position:fixed; | ||
| bottom: 10px; | ||
| right: 10px; | ||
| background-color: #c8def5; | ||
| color: #000000; | ||
| border: none; | ||
| padding: 10px 20px; | ||
| border-radius: 5px; | ||
| font-size: 16px; | ||
| } | ||
|
|
||
| #topButton:hover { | ||
| background-color: #efc9e6; | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| <div class="b"><img src="wk3/05.png"></div> | ||
| <div class="c"><img src="wk3/07.png"></div> | ||
| <div class="d"><img src="wk3/04.png"></div> | ||
| <div class="e"><img src="wk3/01.png"></div> | ||
|
|
||
| <section id="sec03" class="sec03img"> | ||
| <h4>애증의 뉴욕 이놈자식 그래도 사랑해</h4> | ||
| <div class="green"> | ||
| <img src="wk3/05.png"> | ||
| <img src="wk3/07.png"> | ||
| <img src="wk3/04.png"> | ||
| </div> | ||
| <div class="apple"> | ||
| <div class="d">d</div> | ||
| <div class="e">e</div> | ||
| </div> | ||
| </section> |
|
There was a problem hiding this comment. 레포에 안 올라가는 이런 파일들은 .gitignore 파일을 추가해서 깔끔하게 관리하는 걸 추천드려요😊 |
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Binary file not shown.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
별명이 밍밍인가요..? 너무 귀엽다,,💛