-
Notifications
You must be signed in to change notification settings - Fork 1
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[ 1주차 기본/심화 ] 웨비의 사진관 😋 #1
Merged
Merged
Changes from all commits
Commits
Show all changes
25 commits
Select commit
Hold shift + click to select a range
7b94875
init : 파일 생성
Yeonseo-Jo 830b9f6
feat : 기본 구조 세팅
Yeonseo-Jo 6e61c86
feat : 이미지 추가
Yeonseo-Jo d00aa76
feat : reset css 추가
Yeonseo-Jo c5d719b
feat : 미리보기 이미지 추가
Yeonseo-Jo 157301c
feat : 폰트 추가
Yeonseo-Jo a7f4d91
feat : 헤더 구현
Yeonseo-Jo 9c24f0b
feat : 미리보기 섹션 구현
Yeonseo-Jo ddcc0b7
feat : 스크롤바 커스텀
Yeonseo-Jo 0912616
feat : nav 영역 스타일링
Yeonseo-Jo ef8e981
feat : 목차 hover 구현
Yeonseo-Jo a3bc1fc
feat : 목차 이동 구현
Yeonseo-Jo e234d63
feat : 갤러리 섹션 헤더 스타일링 및 sticky position 구현
Yeonseo-Jo 545ea9c
feat : 첫번째 갤러리 섹션 구현 완료
Yeonseo-Jo 3b71cc5
feat : 첫번째 갤러리 섹션 반응형 및 사진 추가
Yeonseo-Jo 071d209
feat : 이미지 높이 수정
Yeonseo-Jo 974b042
feat : 두 번째 갤러리 섹션 구현(반응형까지)
Yeonseo-Jo fd8d42f
feat : 세 번째 갤러리 섹션 구현
Yeonseo-Jo 82a43bd
feat : 푸터 구현
Yeonseo-Jo f500ecb
feat : top 버튼 구현
Yeonseo-Jo 4878038
feat : 스크롤, hover 애니메이션 부드럽게 구현
Yeonseo-Jo ace3f65
fix : 스타일 수정
Yeonseo-Jo 1e2e62c
fix : reset css 수정, 배경색 적용
Yeonseo-Jo 50d66b0
refactor : 코드리뷰 반영 - footer 클래스명 수정
Yeonseo-Jo aa63355
refactor : 코드리뷰 반영 - top 부분 감쌌던 button 태그 제거
Yeonseo-Jo File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
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.
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.
This file contains 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,112 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="ko"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <link rel="stylesheet" href="style.css" /> | ||
| <title>연서의 갤러리</title> | ||
| </head> | ||
| <body> | ||
| <header class="header"> | ||
| <h1 class="header__title">📸 연서의 갤러리 📸</h1> | ||
| </header> | ||
|
|
||
| <main> | ||
| <!-- 미리보기 섹션 --> | ||
| <section class="preview-section"> | ||
| <img src="./assets/image/Jeju/jeju_1.jpg" alt="제주_여행_사진_1" /> | ||
| <img src="./assets/image/Jeju/jeju_2.jpg" alt="제주_여행_사진_2" /> | ||
| <img src="./assets/image/Jeju/jeju_3.jpg" alt="제주_여행_사진_3" /> | ||
| <img src="./assets/image/Tokyo/tokyo_1.jpg" alt="도쿄_여행_사진_1" /> | ||
| <img src="./assets/image/Tokyo/tokyo_2.jpg" alt="도쿄_여행_사진_2" /> | ||
| <img src="./assets/image/Tokyo/tokyo_3.jpg" alt="도쿄_여행_사진_3" /> | ||
| <img src="./assets/image/Busan/busan_1.jpg" alt="부산_여행_사진_1" /> | ||
| <img src="./assets/image/Busan/busan_2.jpg" alt="부산_여행_사진_2" /> | ||
| <img src="./assets/image/Busan/busan_3.jpg" alt="부산_여행_사진_3" /> | ||
| </section> | ||
|
|
||
| <!-- 목차 --> | ||
| <nav class="nav-section"> | ||
| <p class="nav-section__detail">✨ 클릭하면 이동해요! ✨</p> | ||
| <ul class="nav-section__items"> | ||
| <li><a href="#jeju-section">In Jeju</a></li> | ||
| <li><a href="#tokyo-section">In Tokyo</a></li> | ||
| <li><a href="#busan-section">In Busan</a></li> | ||
| </ul> | ||
| </nav> | ||
|
|
||
| <!--목차 별 이미지--> | ||
| <section id="jeju-section"> | ||
| <header class="jeju-section__header"> | ||
| <h2>In JeJu</h2> | ||
| </header> | ||
| <article class="jeju-section__img-container"> | ||
| <img src="./assets/image/Jeju/jeju_1.jpg" alt="제주_여행_사진_1" /> | ||
| <img src="./assets/image/Jeju/jeju_2.jpg" alt="제주_여행_사진_2" /> | ||
| <img src="./assets/image/Jeju/jeju_3.jpg" alt="제주_여행_사진_3" /> | ||
| <img src="./assets/image/Jeju/jeju_4.jpg" alt="제주_여행_사진_4" /> | ||
| <img src="./assets/image/Jeju/jeju_5.jpg" alt="제주_여행_사진_5" /> | ||
| <img src="./assets/image/Jeju/jeju_6.jpg" alt="제주_여행_사진_6" /> | ||
| <img src="./assets/image/Jeju/jeju_7.jpg" alt="제주_여행_사진_7" /> | ||
| <img src="./assets/image/Jeju/jeju_8.jpg" alt="제주_여행_사진_8" /> | ||
| </article> | ||
| </section> | ||
|
|
||
| <section id="tokyo-section"> | ||
| <header class="tokyo-section__header"> | ||
| <h2>In Tokyo</h2> | ||
| </header> | ||
| <article class="tokyo-section__img-container"> | ||
| <div class="img-container__left"> | ||
| <img | ||
| src="./assets/image/Tokyo/tokyo_1.jpg" | ||
| alt="도쿄_여행_사진_1" | ||
| /> | ||
| </div> | ||
| <div class="img-container__right"> | ||
| <img | ||
| src="./assets/image/Tokyo/tokyo_6.jpg" | ||
| alt="도쿄_여행_사진_2" | ||
| /> | ||
| <img | ||
| src="./assets/image/Tokyo/tokyo_3.jpg" | ||
| alt="도쿄_여행_사진_3" | ||
| /> | ||
| <img | ||
| src="./assets/image/Tokyo/tokyo_4.jpg" | ||
| alt="도쿄_여행_사진_4" | ||
| /> | ||
| <img | ||
| src="./assets/image/Tokyo/tokyo_5.jpg" | ||
| alt="도쿄_여행_사진_5" | ||
| /> | ||
| </div> | ||
| </article> | ||
| </section> | ||
|
|
||
| <section id="busan-section"> | ||
| <header class="busan-section__header"> | ||
| <h2>In Busan</h2> | ||
| </header> | ||
|
|
||
| <article class="busan-section__img-container"> | ||
| <img src="./assets/image/Busan/busan_1.jpg" alt="부산_여행_사진_1" /> | ||
| <img src="./assets/image/Busan/busan_2.jpg" alt="부산_여행_사진_2" /> | ||
| <img src="./assets/image/Busan/busan_3.jpg" alt="부산_여행_사진_3" /> | ||
| <img src="./assets/image/Busan/busan_4.jpg" alt="부산_여행_사진_4" /> | ||
| <img src="./assets/image/Busan/busan_5.jpg" alt="부산_여행_사진_5" /> | ||
| </article> | ||
| </section> | ||
| </main> | ||
|
|
||
| <a class="to-top" href="#"><img src="./assets//icon/icon_top.png" /></a> | ||
|
|
||
| <footer class="Info-footer"> | ||
| <p>📷 Pic by Yeonseo</p> | ||
| <p class="Info-footer__more"> | ||
| <span> 🎞 More Pics : </span> | ||
| <a href="https://www.instagram.com/ooesny/">@ooesny</a> | ||
| </p> | ||
| </footer> | ||
| </body> | ||
| </html> | ||
This file contains 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,133 @@ | ||
| /* http://meyerweb.com/eric/tools/css/reset/ | ||
| v2.0 | 20110126 | ||
| License: none (public domain) | ||
| */ | ||
|
|
||
| * { | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| html, | ||
| body, | ||
| div, | ||
| span, | ||
| applet, | ||
| object, | ||
| iframe, | ||
| h1, | ||
| h2, | ||
| h3, | ||
| h4, | ||
| h5, | ||
| h6, | ||
| p, | ||
| blockquote, | ||
| pre, | ||
| a, | ||
| abbr, | ||
| acronym, | ||
| address, | ||
| big, | ||
| cite, | ||
| code, | ||
| del, | ||
| dfn, | ||
| em, | ||
| img, | ||
| ins, | ||
| kbd, | ||
| q, | ||
| s, | ||
| samp, | ||
| small, | ||
| strike, | ||
| strong, | ||
| sub, | ||
| sup, | ||
| tt, | ||
| var, | ||
| b, | ||
| u, | ||
| i, | ||
| center, | ||
| dl, | ||
| dt, | ||
| dd, | ||
| ol, | ||
| ul, | ||
| li, | ||
| fieldset, | ||
| form, | ||
| label, | ||
| legend, | ||
| table, | ||
| caption, | ||
| tbody, | ||
| tfoot, | ||
| thead, | ||
| tr, | ||
| th, | ||
| td, | ||
| article, | ||
| aside, | ||
| canvas, | ||
| details, | ||
| embed, | ||
| figure, | ||
| figcaption, | ||
| footer, | ||
| header, | ||
| hgroup, | ||
| menu, | ||
| nav, | ||
| output, | ||
| ruby, | ||
| section, | ||
| summary, | ||
| time, | ||
| mark, | ||
| audio, | ||
| video { | ||
| margin: 0; | ||
| padding: 0; | ||
| border: 0; | ||
| font-size: 100%; | ||
| /* font: inherit; */ | ||
| vertical-align: baseline; | ||
| } | ||
| /* HTML5 display-role reset for older browsers */ | ||
| article, | ||
| aside, | ||
| details, | ||
| figcaption, | ||
| figure, | ||
| footer, | ||
| header, | ||
| hgroup, | ||
| menu, | ||
| nav, | ||
| section { | ||
| display: block; | ||
| } | ||
| body { | ||
| line-height: 1; | ||
| } | ||
| ol, | ||
| ul { | ||
| list-style: none; | ||
| } | ||
| blockquote, | ||
| q { | ||
| quotes: none; | ||
| } | ||
| blockquote:before, | ||
| blockquote:after, | ||
| q:before, | ||
| q:after { | ||
| content: ""; | ||
| content: none; | ||
| } | ||
| table { | ||
| border-collapse: collapse; | ||
| border-spacing: 0; | ||
| } |
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.
여기서 jeju-section에 관해서 section에는 id를 주고 header에는 class를 준 이유가 있나용?
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.
스타일링만을 위한 속성에는 class를, a 태그의 href에 사용될 부분은 고유해야 한다고 생각하여 id를 사용했습니당 !