[ 2주차 기본/생각/심화(to be continued..) ] 웨비의 사진관😋 #4
There are no files selected for viewing
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,182 @@ | ||
| <!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>유진's 사진관</title> | ||
| </head> | ||
| <body> | ||
| <header id="title">2023 여름 서유럽 여행기</header> | ||
| <section id="preview"> | ||
| <img | ||
| src="../../week01/assign3/img/bel/1.jpg" | ||
| alt="벨기에 사진 1" | ||
| img-title="여기는" | ||
| img-description="" | ||
| /> | ||
| <img | ||
| src="../../week01/assign3/img/bel/2.jpg" | ||
| alt="벨기에 사진 2" | ||
| img-title="여기는" | ||
| img-description="" | ||
| /> | ||
| <img src="../../week01/assign3/img/eng/1.jpg" alt="영국 사진 1"/> | ||
| <img src="../../week01/assign3/img/eng/2.jpg" alt="영국 사진 2"/> | ||
| <img src="../../week01/assign3/img/fra/1.jpg" alt="프랑스 사진 1"/> | ||
| <img src="../../week01/assign3/img/fra/2.jpg" alt="프랑스 사진 2"/> | ||
| <img src="../../week01/assign3/img/swi/1.jpg" alt="스위스 사진 1"/> | ||
| <img src="../../week01/assign3/img/swi/2.jpg" alt="스위스 사진 2"/> | ||
| <img src="../../week01/assign3/img/ger/1.jpg" alt="독일 사진 1"/> | ||
| <img src="../../week01/assign3/img/ger/2.jpg" alt="독일 사진 2"/> | ||
| </section> | ||
| <nav class="navbar"> | ||
| <div>⁎⁺˳✧༚ 클릭하면 이동해요 ˚✧₊⁎</div> | ||
| <ul class="nav"> | ||
| <li><a href="#Belgium" class="link"> Belgium </a></li> | ||
| <li><a href="#England" class="link"> England </a></li> | ||
| <li><a href="#France" class="link"> France </a></li> | ||
| <li><a href="#Switzerland" class="link"> Switzerland </a></li> | ||
| <li><a href="#Germany" class="link"> Germany </a></li> | ||
| </ul> | ||
| </nav> | ||
| <section id="Belgium"> | ||
| <header>Belgium</header> | ||
| <div class="sec1"> | ||
| <div class="sec1wrap"> | ||
| <img | ||
| src="../../week01/assign3/img/bel/1.jpg" | ||
| alt="벨기에 사진 1" | ||
| img-title="브뤼허 분수 공원" | ||
| img-description="브뤼허 들어가는 초입에 있는 예쁜 공원" | ||
| /> | ||
| </div> | ||
| <div class="sec1wrap"> | ||
| <img | ||
| src="../../week01/assign3/img/bel/2.jpg" | ||
| alt="벨기에 사진 2" | ||
| img-title="마르크트 광장" | ||
| img-description="여기서 와플이랑 감자튀김 먹었는데 맛있었당. 감자튀김 파는 아저씨가 우리 한국인이라고 한국어로 인사해줬다" | ||
| /> | ||
| </div> | ||
| <div class="sec1wrap"> | ||
| <img | ||
| src="../../week01/assign3/img/bel/3.jpg" | ||
| alt="벨기에 사진 3" | ||
| img-title="브루게스 성모마리아 교회 앞 운하" | ||
| img-description="여기 짱 예쁨" | ||
| /> | ||
| </div> | ||
| <div class="sec1wrap"> | ||
| <img | ||
| src="../../week01/assign3/img/bel/4.jpg" | ||
| alt="벨기에 사진 4" | ||
| img-title="브뤼헤 초입 골목길" | ||
| img-description="바닥 돌길이 예쁘고 색달랐다" | ||
| /> | ||
| </div> | ||
| <div class="sec1wrap"> | ||
| <img | ||
| src="../../week01/assign3/img/bel/5.jpg" | ||
| alt="벨기에 사진 5" | ||
| img-title="브루게스 성모마리아 교회" | ||
| img-description="외관만 봤당ㅎ" | ||
|
Comment on lines
+81
to
+83
There was a problem hiding this comment. 오 이렇게 커스텀 속성을 사용해서 하는것도 좋은 방법이다!! 나도 배워간당 이 부분이랑 관련해서, html 커스텀 데이터 속성 규칙에 대해서 더 공부해보면 좋을것 같아! 내가 알기론 사용자 지정 속성(커스텀 속성)을 사용할 때는 속성의 시작을 |
||
| /> | ||
| </div> | ||
| <div class="sec1wrap"> | ||
| <img | ||
| src="../../week01/assign3/img/bel/6.jpg" | ||
| alt="벨기에 사진 6" | ||
| img-title="사랑의 호수" | ||
| img-description="여기 짱예쁨 넓어서 산책하기도 굿" | ||
| /> | ||
| </div> | ||
| <div class="sec1wrap"> | ||
| <img | ||
| src="../../week01/assign3/img/bel/7.jpg" | ||
| alt="벨기에 사진 7" | ||
| img-title="성 바프 대성당" | ||
| img-description="겐트에 있는 대성당" | ||
| /> | ||
| </div> | ||
| <div class="sec1wrap"> | ||
| <img | ||
| src="../../week01/assign3/img/bel/8.jpg" | ||
| alt="벨기에 사진 8" | ||
| img-title="겐트의 종루" | ||
| img-description="종루라는 말 얘 덕에 알게됐당ㅎ" | ||
| /> | ||
| </div> | ||
| <div class="sec1wrap"> | ||
| <img | ||
| src="../../week01/assign3/img/bel/9.jpg" | ||
| alt="벨기에 사진 9" | ||
| img-title="겐트 운하" | ||
| img-description="운하의 도시 겐트!! 넘 예뻤다" | ||
| /> | ||
| </div> | ||
| <div class="sec1wrap"> | ||
| <img | ||
| src="../../week01/assign3/img/bel/10.jpg" | ||
| alt="벨기에 사진 1" | ||
| img-title="그라벤스틴 성" | ||
| img-description="그냥 마을 중심지에 떡하니 있어서 신기 ㅎㅎ" | ||
| /> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| <section id="France"> | ||
| <header>France</header> | ||
| <div class="sec2"> | ||
| <img src="../../week01/assign3/img/fra/1.jpg" alt="프랑스 사진 1"/> | ||
| <div> | ||
| <img src="../../week01/assign3/img/fra/2.jpg" alt="프랑스 사진 2"/> | ||
| <img src="../../week01/assign3/img/fra/3.jpg" alt="프랑스 사진 3"/> | ||
| <img src="../../week01/assign3/img/fra/4.jpg" alt="프랑스 사진 4"/> | ||
| <img src="../../week01/assign3/img/fra/5.jpg" alt="프랑스 사진 5"/> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| <section id="England"> | ||
| <header>England</header> | ||
| <div id="sec3"> | ||
| <img src="../../week01/assign3/img/eng/1.jpg" alt="영국 사진 1"/> | ||
| <img src="../../week01/assign3/img/eng/2.jpg" alt="영국 사진 2"/> | ||
| <img src="../../week01/assign3/img/eng/3.jpg" alt="영국 사진 3"/> | ||
| <img src="../../week01/assign3/img/eng/4.jpg" alt="영국 사진 4"/> | ||
| <img src="../../week01/assign3/img/eng/5.jpg" alt="영국 사진 5"/> | ||
| </div> | ||
| </section> | ||
| <section id="Switzerland"> | ||
| <header>Switzerland</header> | ||
| <div class="sec1"> | ||
| <img src="../../week01/assign3/img/swi/1.jpg" alt="스위스 사진 1"/> | ||
| <img src="../../week01/assign3/img/swi/2.jpg" alt="스위스 사진 2"/> | ||
| <img src="../../week01/assign3/img/swi/3.jpg" alt="스위스 사진 3"/> | ||
| <img src="../../week01/assign3/img/swi/4.jpg" alt="스위스 사진 4"/> | ||
| <img src="../../week01/assign3/img/swi/5.jpg" alt="스위스 사진 5"/> | ||
| <img src="../../week01/assign3/img/swi/6.jpg" alt="스위스 사진 6"/> | ||
| <img src="../../week01/assign3/img/swi/7.jpg" alt="스위스 사진 7"/> | ||
| <img src="../../week01/assign3/img/swi/8.jpg" alt="스위스 사진 8"/> | ||
| <img src="../../week01/assign3/img/swi/9.jpg" alt="스위스 사진 9"/> | ||
| <img src="../../week01/assign3/img/swi/10.jpg" alt="스위스 사진 10"/> | ||
| </div> | ||
| </section> | ||
| <section id="Germany"> | ||
| <header>Germany</header> | ||
| <div class="sec2"> | ||
| <img src="../../week01/assign3/img/ger/1.jpg" alt="독일 사진 1"/> | ||
| <div> | ||
| <img src="../../week01/assign3/img/ger/2.jpg" alt="독일 사진 2"/> | ||
| <img src="../../week01/assign3/img/ger/3.jpg" alt="독일 사진 3"/> | ||
| <img src="../../week01/assign3/img/ger/4.jpg" alt="독일 사진 4"/> | ||
| <img src="../../week01/assign3/img/ger/5.jpg" alt="독일 사진 5"/> | ||
| </div> | ||
| </div> | ||
|
|
||
| </section> | ||
| <a id="top" href="#title"><img src="../../week01/assign3/img/top.png" alt="top버튼" /></a> | ||
| <footer> 다음에는 어디로 갈지 .. !! </footer> | ||
| <script src="index.js"></script> | ||
| </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,77 @@ | ||
| const sec1ImgList = document.querySelectorAll(".sec1wrap img"); | ||
| const topBtn = document.querySelector("#top img"); | ||
|
Comment on lines
+1
to
+2
There was a problem hiding this comment. querySelector로 조작할 요소들을 가져올 때, 지금처럼 하위 요소를 찾는 방식(top버튼 밑에 Img 태그 등)도 좋지만! 나는 위 이유 등으로 css 스타일링, js selector 등에서 최대한 클래스명을 활용하려고 하는 편이라서 한 번 고려해보면 좋을것 같아 ~ |
||
|
|
||
| sec1ImgList.forEach((img)=>{ | ||
| let title=img.getAttribute('img-title'); | ||
|
There was a problem hiding this comment. 나는 이미 html에 넣어두고 숨겨놨다가 js에서 보이는 스타일 class추가하는 방식으로 하면서 html을 건들지 않으면서 js만으로 이번과제를 할 수 있는 방법이 있을까 고민을 했었는데 img태그의 요소 이용해서 js로 하위태그 추가해주는 방식이 있었어!! 코드 수정할 때 언니가 한 방법으로 해봐야겠오 |
||
| let desc=img.getAttribute('img-description'); | ||
| const divtitle = document.createElement('div'); | ||
| const divdesc = document.createElement('div'); | ||
| divtitle.classList.add('title'); | ||
| divdesc.classList.add('content'); | ||
| divtitle.appendChild(document.createTextNode(title)); | ||
| divdesc.appendChild(document.createTextNode(desc)); | ||
| const wrapper=img.parentNode; | ||
|
|
||
| wrapper.append(divtitle); | ||
| wrapper.append(divdesc); | ||
| wrapper.addEventListener('mouseover', showContent); | ||
| wrapper.addEventListener('mouseout', removeContent); | ||
|
Comment on lines
+17
to
+18
There was a problem hiding this comment.
이 자료 참고하면 한 눈에 비교하기 좋을것 같습니당 There was a problem hiding this comment. 또 이 부분은 이벤트가 들어가는 부분을 하나의 함수로 만들어줘서 캡슐화 해주면 더 좋을것 같아! |
||
|
|
||
| if(desc.length>39){ | ||
| const showMoreBtn = document.createElement('input'); | ||
| showMoreBtn.setAttribute('type','button'); | ||
| showMoreBtn.setAttribute('value','더보기'); | ||
| showMoreBtn.classList.add('showMoreBtn'); | ||
| showMoreBtn.addEventListener('click',showMoreDescription); | ||
| wrapper.appendChild(showMoreBtn); | ||
| } | ||
|
|
||
| }) | ||
|
|
||
| function showContent(event){ | ||
| const children=Array.from(event.target.parentElement.children); | ||
| children.forEach(child=>{ | ||
| if(child.hasAttribute('alt')){ | ||
| child.style.filter="brightness(0.5)" | ||
| }else if(child.getAttribute('class')=="content"){ | ||
| child.style.overflow="hidden"; | ||
| child.style.textOverflow="ellipsis"; | ||
| child.style.visibility="visible"; | ||
| }else{ | ||
| child.style.visibility="visible"; | ||
| } | ||
| }) | ||
|
Comment on lines
+34
to
+43
There was a problem hiding this comment. 지금 그리구 이미지 영역의 배경을 어둡게 하기 위해서 또 이 부분은 앞에 남긴 리뷰 참고해서 |
||
|
|
||
| } | ||
|
|
||
| function removeContent(event){ | ||
| const children=Array.from(event.target.parentElement.children); | ||
| children.forEach(child=>{ | ||
| if(child.hasAttribute('alt')) | ||
| child.style.filter="none"; | ||
| else if(child.getAttribute('class')=="content"){ | ||
| child.style.overflow="unset"; | ||
| child.style.textOverflow="unset"; | ||
| child.style.visibility="hidden"; | ||
| } | ||
| else | ||
| child.style.visibility="hidden"; | ||
| }) | ||
| } | ||
|
|
||
| function showMoreDescription(event){ | ||
| const desc=event.target.previousElementSibling; | ||
| const img=desc.previousElementSibling.previousElementSibling; | ||
| desc.style.overflow="unset"; | ||
| desc.style.textOverflow="unset"; | ||
| img.style.filter="brightness(0.5)"; | ||
|
|
||
| event.target.style.visibility="hidden"; | ||
|
|
||
|
|
||
| } | ||
|
|
||
| window.addEventListener('scroll', () => { | ||
| let scrollDepth = ((window.scrollY + window.innerHeight)/document.body.scrollHeight)-0.2; | ||
| topBtn.style.opacity=scrollDepth; | ||
| }); | ||
|
Comment on lines
+74
to
+77
|
||
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.
요소에 글을 넣어서 하는방법이 있었다니... 나는 div태그 추가해서 html이랑 css 대공사 한번 했는데... 충격먹었어
언니가 한 방법이 가독성도 훨씬 좋고 js활용해보기도 딱이댜 👍🏻