From 16fa52bc0add11ab62316742d06f1063901214e9 Mon Sep 17 00:00:00 2001 From: Nayujin <00nyj@sookmyung.ac.kr> Date: Fri, 27 Oct 2023 13:55:25 +0900 Subject: [PATCH 01/10] =?UTF-8?q?init:=201=EC=A3=BC=EC=B0=A8=20=EA=B3=BC?= =?UTF-8?q?=EC=A0=9C=20=EA=B0=80=EC=A0=B8=EC=98=A4=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assignment/week02/assign1/index.html | 101 ++++++++++++++ assignment/week02/assign1/style.css | 192 +++++++++++++++++++++++++++ 2 files changed, 293 insertions(+) create mode 100644 assignment/week02/assign1/index.html create mode 100644 assignment/week02/assign1/style.css diff --git a/assignment/week02/assign1/index.html b/assignment/week02/assign1/index.html new file mode 100644 index 0000000..9dac13a --- /dev/null +++ b/assignment/week02/assign1/index.html @@ -0,0 +1,101 @@ + + + + + + + 유진's 사진관 + + +
2023 여름 서유럽 여행기
+
+ 벨기에 사진 1 + 벨기에 사진 2 + 영국 사진 1 + 영국 사진 2 + 프랑스 사진 1 + 프랑스 사진 2 + 스위스 사진 1 + 스위스 사진 2 + 독일 사진 1 + 독일 사진 2 +
+ +
+
Belgium
+
+ 벨기에 사진 1 + 벨기에 사진 2 + 벨기에 사진 3 + 벨기에 사진 4 + 벨기에 사진 5 + 벨기에 사진 6 + 벨기에 사진 7 + 벨기에 사진 8 + 벨기에 사진 9 + 벨기에 사진 10 +
+
+
+
France
+
+ 프랑스 사진 1 +
+ 프랑스 사진 2 + 프랑스 사진 3 + 프랑스 사진 4 + 프랑스 사진 5 +
+
+
+
+
England
+
+ 영국 사진 1 + 영국 사진 2 + 영국 사진 3 + 영국 사진 4 + 영국 사진 5 +
+
+
+
Switzerland
+
+ 스위스 사진 1 + 스위스 사진 2 + 스위스 사진 3 + 스위스 사진 4 + 스위스 사진 5 + 스위스 사진 6 + 스위스 사진 7 + 스위스 사진 8 + 스위스 사진 9 + 스위스 사진 10 +
+
+
+
Germany
+
+ 독일 사진 1 +
+ 독일 사진 2 + 독일 사진 3 + 독일 사진 4 + 독일 사진 5 +
+
+ +
+ top버튼 + + + \ No newline at end of file diff --git a/assignment/week02/assign1/style.css b/assignment/week02/assign1/style.css new file mode 100644 index 0000000..5779a09 --- /dev/null +++ b/assignment/week02/assign1/style.css @@ -0,0 +1,192 @@ +html{ + scroll-behavior: smooth; +} + +body { + box-sizing: border-box; + margin:auto; + font-weight: 600; + /* scroll-snap-type: y mandatory; */ +} + +img{ + object-fit: cover; +} + +#title{ + background-color: palevioletred; + color:white; + padding:1.5rem 3rem; + font-size: 1.5rem; + scroll-snap-align: start; +} + +#preview{ + display: flex; + flex-wrap: nowrap; + overflow-x: scroll; + overflow-y: hidden; + background-color: lavenderblush; + gap: 0.5rem; + padding: 2rem 4rem; +} + +#preview::-webkit-scrollbar{ + width: 5px; + height: 7px; +} + +#preview::-webkit-scrollbar-thumb { + /* 스크롤바 막대 */ + background: pink; + border-radius: 20px; +} + +#preview img{ + width: 250px; + height: 350px; +} + +.navbar{ + text-align: center; + background-color: lavenderblush; + margin: 0.3rem 0; + border: 3px solid pink; + border-left: 0; + border-right: 0; + padding: 1rem; +} + +.navbar ul{ + display: flex; + justify-content: center; + padding: 1rem 0; + list-style: none; +} + +.navbar ul a{ + color:black; + margin: 0 1.5rem; + text-decoration: none; +} + +.navbar ul a:hover{ + text-decoration: underline; + color:palevioletred; +} + +section > header{ + background-color: pink; + padding: 0.5rem 2rem; + margin: 0 0 1rem; + position: sticky; + top: 0; + z-index: 1; +} + +#sec1{ + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + padding:2rem 4rem; + gap:0.5rem; +} + +#sec1 img{ + width: 250px; + height: 250px; + flex-basis: 250px; + flex-grow: 1; + flex-shrink: 1; +} + +#sec2{ + display: flex; + padding: 3rem 10rem; + gap: 2%; + position: relative; +} + +#sec2 > img, #sec2 > div{ + width: 50%; + aspect-ratio: 1/1; + +} + +#sec2 > div{ + display: flex; + gap: 4%; + position: relative; + flex-wrap: wrap; +} + +#sec2 > div > img{ + width: 48%; + aspect-ratio: 1/1; +} + +#sec3{ + display: grid; + padding: 3rem 10rem; + position: relative; + gap: 0.3rem; + grid-template-columns: repeat(8,1fr); + grid-template-rows: repeat(4,1fr); + grid-template-areas: + "first first first first second second second second" + "third third third third second second second second" + "fourth fourth fourth fourth fourth fourth fifth fifth" + "fourth fourth fourth fourth fourth fourth fifth fifth"; + /* template area 이거 말고 그냥 grid 안에 grid 주는 구조로 할걸 .. 싶은 마음이 들지만 .. + 과제 4번도 다 한 후에 .. 시간이 된다면 .. 수정을 .. + */ +} + +#sec3 > img{ + width: 100%; +} + +#sec3 > img:nth-child(1){ + grid-area: first; + aspect-ratio: 4/1; +} + +#sec3 > img:nth-child(2){ + grid-area: second; + aspect-ratio: 2/1; +} + +#sec3 > img:nth-child(3){ + grid-area: third; + aspect-ratio: 4/1; +} + +#sec3 > img:nth-child(4){ + grid-area: fourth; + aspect-ratio: 3/1; +} + +#sec3 > img:nth-child(5){ + grid-area: fifth; + aspect-ratio: 1/1; +} + + + +footer{ + background-color: lightgray; + padding: 2rem 10rem; + text-align: center; +} + +#top{ + position: fixed; + bottom:1.5rem; + right: 1.5rem; + z-index: 10; +} + +#top img{ + width: 2.5rem; +} \ No newline at end of file From c9dbfc55b56ef8501d8a25d9590e8f40bd389229 Mon Sep 17 00:00:00 2001 From: Nayujin <00nyj@sookmyung.ac.kr> Date: Fri, 27 Oct 2023 14:14:34 +0900 Subject: [PATCH 02/10] =?UTF-8?q?feat:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20hov?= =?UTF-8?q?er=EC=8B=9C=20=EB=B6=80=EB=93=9C=EB=9F=BD=EA=B2=8C=20=EC=9D=B4?= =?UTF-8?q?=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assignment/week02/assign1/style.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/assignment/week02/assign1/style.css b/assignment/week02/assign1/style.css index 5779a09..f405e47 100644 --- a/assignment/week02/assign1/style.css +++ b/assignment/week02/assign1/style.css @@ -126,6 +126,11 @@ section > header{ aspect-ratio: 1/1; } +#sec1 > img:hover , #sec2 > img:hover { + transform: translateY(-0.3rem); + transition: all 0.2s linear; +} + #sec3{ display: grid; padding: 3rem 10rem; From 78181a94a2b9f762085e7d149bcf348a3bf54b75 Mon Sep 17 00:00:00 2001 From: Nayujin <00nyj@sookmyung.ac.kr> Date: Fri, 27 Oct 2023 14:18:09 +0900 Subject: [PATCH 03/10] =?UTF-8?q?feat:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20hov?= =?UTF-8?q?er=EC=8B=9C=20=EC=96=B4=EB=91=A1=EA=B2=8C=20=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assignment/week02/assign1/style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/assignment/week02/assign1/style.css b/assignment/week02/assign1/style.css index f405e47..c111bd5 100644 --- a/assignment/week02/assign1/style.css +++ b/assignment/week02/assign1/style.css @@ -129,6 +129,7 @@ section > header{ #sec1 > img:hover , #sec2 > img:hover { transform: translateY(-0.3rem); transition: all 0.2s linear; + filter:brightness(0.5); } #sec3{ From 2946fd5435d0a6c4beab33fa342ead5606f982be Mon Sep 17 00:00:00 2001 From: Nayujin <00nyj@sookmyung.ac.kr> Date: Fri, 27 Oct 2023 18:40:03 +0900 Subject: [PATCH 04/10] =?UTF-8?q?feat:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20hov?= =?UTF-8?q?er=EC=8B=9C=20=EC=84=A4=EB=AA=85=20visible?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assignment/week02/assign1/index.html | 109 +++++++++++++++++++++++---- assignment/week02/assign1/index.js | 31 ++++++++ assignment/week02/assign1/style.css | 40 +++++++++- 3 files changed, 162 insertions(+), 18 deletions(-) create mode 100644 assignment/week02/assign1/index.js diff --git a/assignment/week02/assign1/index.html b/assignment/week02/assign1/index.html index 9dac13a..91c962b 100644 --- a/assignment/week02/assign1/index.html +++ b/assignment/week02/assign1/index.html @@ -9,8 +9,18 @@
2023 여름 서유럽 여행기
- 벨기에 사진 1 - 벨기에 사진 2 + 벨기에 사진 1 + 벨기에 사진 2 영국 사진 1 영국 사진 2 프랑스 사진 1 @@ -32,17 +42,87 @@
Belgium
-
- 벨기에 사진 1 - 벨기에 사진 2 - 벨기에 사진 3 - 벨기에 사진 4 - 벨기에 사진 5 - 벨기에 사진 6 - 벨기에 사진 7 - 벨기에 사진 8 - 벨기에 사진 9 - 벨기에 사진 10 +
+
+ 벨기에 사진 1 +
+
+ 벨기에 사진 2 +
+
+ 벨기에 사진 3 +
+
+ 벨기에 사진 4 +
+
+ 벨기에 사진 5 +
+
+ 벨기에 사진 6 +
+
+ 벨기에 사진 7 +
+
+ 벨기에 사진 8 +
+
+ 벨기에 사진 9 +
+
+ 벨기에 사진 1 +
@@ -69,7 +149,7 @@
Switzerland
-
+
스위스 사진 1 스위스 사진 2 스위스 사진 3 @@ -97,5 +177,6 @@
top버튼 + \ No newline at end of file diff --git a/assignment/week02/assign1/index.js b/assignment/week02/assign1/index.js new file mode 100644 index 0000000..66cecc9 --- /dev/null +++ b/assignment/week02/assign1/index.js @@ -0,0 +1,31 @@ +const sec1ImgList = document.querySelectorAll(".sec1wrap img"); + +sec1ImgList.forEach((img)=>{ + let title=img.getAttribute('img-title'); + let desc=img.getAttribute('img-description'); + const spantitle = document.createElement('span'); + const spandesc = document.createElement('span'); + spantitle.classList.add('title'); + spandesc.classList.add('content'); + spantitle.appendChild(document.createTextNode(title)); + spandesc.appendChild(document.createTextNode(desc)); + const wrapper=img.parentNode; + + wrapper.append(spantitle); + wrapper.append(spandesc); + img.addEventListener('mouseover', showContent); + +}) + +function showContent(event){ + console.log(event.target.nextElementSibling); + const title=event.target.nextElementSibling; + title.style.visibility="visible"; + const desc=event.target.nextElementSibling.nextElementSibling; + desc.style.visibility="visible"; +} + + + + + diff --git a/assignment/week02/assign1/style.css b/assignment/week02/assign1/style.css index c111bd5..5ef74f9 100644 --- a/assignment/week02/assign1/style.css +++ b/assignment/week02/assign1/style.css @@ -84,7 +84,7 @@ section > header{ z-index: 1; } -#sec1{ +.sec1{ display: flex; flex-wrap: wrap; justify-content: center; @@ -93,12 +93,44 @@ section > header{ gap:0.5rem; } -#sec1 img{ +.sec1wrap{ + position:relative; + +} +.sec1 img{ width: 250px; height: 250px; flex-basis: 250px; flex-grow: 1; flex-shrink: 1; + z-index: 1; +} + +.sec1 img:hover{ + filter:brightness(0.5); +} + +.title, .content{ + position: absolute; + color: white; + z-index: 2; + visibility: hidden; + +} + +.title{ + font-size: 1rem; + top: 30%; + left: 50%; + transform: translate(-50%, -50%); +} + +.content{ + font-size: 0.7rem; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-weight: 500; } #sec2{ @@ -126,10 +158,10 @@ section > header{ aspect-ratio: 1/1; } -#sec1 > img:hover , #sec2 > img:hover { +.sec1 div:hover , #sec2 img:hover { transform: translateY(-0.3rem); transition: all 0.2s linear; - filter:brightness(0.5); + } #sec3{ From 18ce6eb181a5e97395a9ac0aaad316885c508665 Mon Sep 17 00:00:00 2001 From: Nayujin <00nyj@sookmyung.ac.kr> Date: Fri, 27 Oct 2023 18:42:47 +0900 Subject: [PATCH 05/10] =?UTF-8?q?feat:=20=EC=BB=A4=EC=84=9C=20=EB=82=98?= =?UTF-8?q?=EA=B0=80=EB=A9=B4=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=84=A4?= =?UTF-8?q?=EB=AA=85=20hidden?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assignment/week02/assign1/index.js | 9 +++++++++ assignment/week02/assign1/style.css | 1 - 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/assignment/week02/assign1/index.js b/assignment/week02/assign1/index.js index 66cecc9..15025e1 100644 --- a/assignment/week02/assign1/index.js +++ b/assignment/week02/assign1/index.js @@ -14,6 +14,7 @@ sec1ImgList.forEach((img)=>{ wrapper.append(spantitle); wrapper.append(spandesc); img.addEventListener('mouseover', showContent); + img.addEventListener('mouseout', removeContent); }) @@ -25,6 +26,14 @@ function showContent(event){ desc.style.visibility="visible"; } +function removeContent(event){ + console.log(event.target.nextElementSibling); + const title=event.target.nextElementSibling; + title.style.visibility="hidden"; + const desc=event.target.nextElementSibling.nextElementSibling; + desc.style.visibility="hidden"; +} + diff --git a/assignment/week02/assign1/style.css b/assignment/week02/assign1/style.css index 5ef74f9..d94b71d 100644 --- a/assignment/week02/assign1/style.css +++ b/assignment/week02/assign1/style.css @@ -6,7 +6,6 @@ body { box-sizing: border-box; margin:auto; font-weight: 600; - /* scroll-snap-type: y mandatory; */ } img{ From 56a0796cbd32779606a269ee92ce70cd2d69269f Mon Sep 17 00:00:00 2001 From: Nayujin <00nyj@sookmyung.ac.kr> Date: Fri, 27 Oct 2023 19:03:10 +0900 Subject: [PATCH 06/10] =?UTF-8?q?feat:=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20?= =?UTF-8?q?=EB=82=B4=EB=A0=A4=EA=B0=88=EC=88=98=EB=A1=9D=20top=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=EC=84=A0=EB=AA=85=ED=95=98=EA=B2=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assignment/week02/assign1/index.js | 11 +++++------ assignment/week02/assign1/style.css | 1 + 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/assignment/week02/assign1/index.js b/assignment/week02/assign1/index.js index 15025e1..8a7f3b5 100644 --- a/assignment/week02/assign1/index.js +++ b/assignment/week02/assign1/index.js @@ -1,4 +1,5 @@ const sec1ImgList = document.querySelectorAll(".sec1wrap img"); +const topBtn = document.querySelector("#top img"); sec1ImgList.forEach((img)=>{ let title=img.getAttribute('img-title'); @@ -19,7 +20,6 @@ sec1ImgList.forEach((img)=>{ }) function showContent(event){ - console.log(event.target.nextElementSibling); const title=event.target.nextElementSibling; title.style.visibility="visible"; const desc=event.target.nextElementSibling.nextElementSibling; @@ -27,14 +27,13 @@ function showContent(event){ } function removeContent(event){ - console.log(event.target.nextElementSibling); const title=event.target.nextElementSibling; title.style.visibility="hidden"; const desc=event.target.nextElementSibling.nextElementSibling; desc.style.visibility="hidden"; } - - - - +window.addEventListener('scroll', () => { + let scrollDepth = ((window.scrollY + window.innerHeight)/document.body.scrollHeight)-0.2; + topBtn.style.opacity=scrollDepth; +}); \ No newline at end of file diff --git a/assignment/week02/assign1/style.css b/assignment/week02/assign1/style.css index d94b71d..d55a70f 100644 --- a/assignment/week02/assign1/style.css +++ b/assignment/week02/assign1/style.css @@ -226,4 +226,5 @@ footer{ #top img{ width: 2.5rem; + opacity: 0; } \ No newline at end of file From c12502290c4c7c592c519a84222147217852e7d8 Mon Sep 17 00:00:00 2001 From: Nayujin <00nyj@sookmyung.ac.kr> Date: Fri, 27 Oct 2023 19:06:57 +0900 Subject: [PATCH 07/10] =?UTF-8?q?fix:=20header=EC=9D=98=20zindex=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assignment/week02/assign1/style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assignment/week02/assign1/style.css b/assignment/week02/assign1/style.css index d55a70f..490c256 100644 --- a/assignment/week02/assign1/style.css +++ b/assignment/week02/assign1/style.css @@ -80,7 +80,7 @@ section > header{ margin: 0 0 1rem; position: sticky; top: 0; - z-index: 1; + z-index: 2; } .sec1{ @@ -112,7 +112,7 @@ section > header{ .title, .content{ position: absolute; color: white; - z-index: 2; + z-index: 3; visibility: hidden; } From 6df75dc3c0137fd42162d3045b7d6fe7f96c63ff Mon Sep 17 00:00:00 2001 From: Nayujin <00nyj@sookmyung.ac.kr> Date: Fri, 27 Oct 2023 23:59:40 +0900 Subject: [PATCH 08/10] =?UTF-8?q?feat:=20=EC=83=9D=EA=B0=81=EA=B3=BC?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assignment/week02/assign1/think.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 assignment/week02/assign1/think.md diff --git a/assignment/week02/assign1/think.md b/assignment/week02/assign1/think.md new file mode 100644 index 0000000..d413919 --- /dev/null +++ b/assignment/week02/assign1/think.md @@ -0,0 +1,12 @@ +🖤 명령형 프로그래밍과 선언형 프로그래밍에 대하여 여러분의 생각을 마음껏 작성해주세요 + +- 명령형 프로그래밍 + + - : 우리가 익히 해왔던 방식과 같이 컴퓨터가 + 수행할 명령들을 순서대로 기술해 놓은 것 + - 즉, "어떻게 구현하는가"를 디테일하게 기술하는 관점에 중점을 두는 프로그래밍 기법 + +- 선언형 프로그래밍 + - 대표적으로 SQL Query 문과 HTML + - 우리가 약속된 태그들을 쭉 나열하면서 실제로 어떻게 랜더링 되느냐에 대해서는 크게 신경 쓰지 않아도 됨 + - 즉, "무엇을 나타내야하는가"를 디테일하게 기술하는 관점에 중점을 두는 프로그래밍 기법이다. From ebe9218dff1068504399de42595e6011f3ce051f Mon Sep 17 00:00:00 2001 From: Nayujin <00nyj@sookmyung.ac.kr> Date: Thu, 2 Nov 2023 18:22:24 +0900 Subject: [PATCH 09/10] =?UTF-8?q?feat:=20=EC=82=AC=EC=A7=84=20=EC=84=A4?= =?UTF-8?q?=EB=AA=85=203=EC=A4=84=20=EC=9D=B4=EC=83=81=EC=9D=BC=EB=95=8C?= =?UTF-8?q?=20=EB=A7=90=EC=A4=84=EC=9E=84=ED=91=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assignment/week02/assign1/index.html | 2 +- assignment/week02/assign1/style.css | 6 ++++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/assignment/week02/assign1/index.html b/assignment/week02/assign1/index.html index 91c962b..f070d7e 100644 --- a/assignment/week02/assign1/index.html +++ b/assignment/week02/assign1/index.html @@ -56,7 +56,7 @@ src="../../week01/assign3/img/bel/2.jpg" alt="벨기에 사진 2" img-title="마르크트 광장" - img-description="여기서 와플이랑 감자튀김 먹었는데 맛있었당" + img-description="여기서 와플이랑 감자튀김 먹었는데 맛있었당. 감자튀김 파는 아저씨가 우리 한국인이라고 한국어로 인사해줬다" />
diff --git a/assignment/week02/assign1/style.css b/assignment/week02/assign1/style.css index 490c256..1a65162 100644 --- a/assignment/week02/assign1/style.css +++ b/assignment/week02/assign1/style.css @@ -96,6 +96,7 @@ section > header{ position:relative; } + .sec1 img{ width: 250px; height: 250px; @@ -130,6 +131,11 @@ section > header{ left: 50%; transform: translate(-50%, -50%); font-weight: 500; + display: -webkit-box; + overflow: hidden; + text-overflow: ellipsis; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; } #sec2{ From 57cf096994da866b86478345c9a7f0aad9fe238d Mon Sep 17 00:00:00 2001 From: Nayujin <00nyj@sookmyung.ac.kr> Date: Sat, 4 Nov 2023 18:53:38 +0900 Subject: [PATCH 10/10] =?UTF-8?q?feat:=20=EC=8B=AC=ED=99=94=20=EB=8D=94?= =?UTF-8?q?=EB=B3=B4=EA=B8=B0=20=EB=88=84=EB=A5=B4=EB=A9=B4=20=EC=83=81?= =?UTF-8?q?=EC=84=B8=EC=84=A4=EB=AA=85=20=ED=91=9C=EC=8B=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assignment/week02/assign1/index.html | 4 +- assignment/week02/assign1/index.js | 74 +++++++++++++++++++++------- assignment/week02/assign1/style.css | 27 ++++++---- 3 files changed, 75 insertions(+), 30 deletions(-) diff --git a/assignment/week02/assign1/index.html b/assignment/week02/assign1/index.html index f070d7e..8e10015 100644 --- a/assignment/week02/assign1/index.html +++ b/assignment/week02/assign1/index.html @@ -127,7 +127,7 @@
France
-
+
프랑스 사진 1
프랑스 사진 2 @@ -164,7 +164,7 @@
Germany
-
+
독일 사진 1
독일 사진 2 diff --git a/assignment/week02/assign1/index.js b/assignment/week02/assign1/index.js index 8a7f3b5..241b560 100644 --- a/assignment/week02/assign1/index.js +++ b/assignment/week02/assign1/index.js @@ -4,33 +4,71 @@ const topBtn = document.querySelector("#top img"); sec1ImgList.forEach((img)=>{ let title=img.getAttribute('img-title'); let desc=img.getAttribute('img-description'); - const spantitle = document.createElement('span'); - const spandesc = document.createElement('span'); - spantitle.classList.add('title'); - spandesc.classList.add('content'); - spantitle.appendChild(document.createTextNode(title)); - spandesc.appendChild(document.createTextNode(desc)); + 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(spantitle); - wrapper.append(spandesc); - img.addEventListener('mouseover', showContent); - img.addEventListener('mouseout', removeContent); + wrapper.append(divtitle); + wrapper.append(divdesc); + wrapper.addEventListener('mouseover', showContent); + wrapper.addEventListener('mouseout', removeContent); + + 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 title=event.target.nextElementSibling; - title.style.visibility="visible"; - const desc=event.target.nextElementSibling.nextElementSibling; - desc.style.visibility="visible"; + 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"; + } + }) + } function removeContent(event){ - const title=event.target.nextElementSibling; - title.style.visibility="hidden"; - const desc=event.target.nextElementSibling.nextElementSibling; - desc.style.visibility="hidden"; + 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', () => { diff --git a/assignment/week02/assign1/style.css b/assignment/week02/assign1/style.css index 1a65162..b42ac13 100644 --- a/assignment/week02/assign1/style.css +++ b/assignment/week02/assign1/style.css @@ -106,30 +106,31 @@ section > header{ z-index: 1; } + .sec1 img:hover{ filter:brightness(0.5); } -.title, .content{ +.title, .content,.showMoreBtn{ position: absolute; color: white; + left: 50%; + transform: translate(-50%, -50%); z-index: 3; visibility: hidden; - } .title{ + text-align: center; font-size: 1rem; top: 30%; - left: 50%; - transform: translate(-50%, -50%); + margin: auto; } .content{ font-size: 0.7rem; top: 50%; left: 50%; - transform: translate(-50%, -50%); font-weight: 500; display: -webkit-box; overflow: hidden; @@ -138,32 +139,38 @@ section > header{ -webkit-box-orient: vertical; } -#sec2{ +.showMoreBtn{ + top: 70%; + color: black; +} + + +.sec2{ display: flex; padding: 3rem 10rem; gap: 2%; position: relative; } -#sec2 > img, #sec2 > div{ +.sec2 > img, .sec2 > div{ width: 50%; aspect-ratio: 1/1; } -#sec2 > div{ +.sec2 > div{ display: flex; gap: 4%; position: relative; flex-wrap: wrap; } -#sec2 > div > img{ +.sec2 > div > img{ width: 48%; aspect-ratio: 1/1; } -.sec1 div:hover , #sec2 img:hover { +.sec1 > div:hover , .sec2 img:hover{ transform: translateY(-0.3rem); transition: all 0.2s linear;