diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..f8b2a13 Binary files /dev/null and b/.DS_Store differ diff --git a/week2/.DS_Store b/week2/.DS_Store new file mode 100644 index 0000000..9cf5968 Binary files /dev/null and b/week2/.DS_Store differ diff --git a/week2/assign1/images/.DS_Store b/week2/assign1/images/.DS_Store new file mode 100644 index 0000000..e5d28b5 Binary files /dev/null and b/week2/assign1/images/.DS_Store differ diff --git a/week2/assign1/images/assign3-favicon.png b/week2/assign1/images/assign3-favicon.png new file mode 100644 index 0000000..a06d7ed Binary files /dev/null and b/week2/assign1/images/assign3-favicon.png differ diff --git a/week2/assign1/images/onboarding/1.png b/week2/assign1/images/onboarding/1.png new file mode 100644 index 0000000..4822483 Binary files /dev/null and b/week2/assign1/images/onboarding/1.png differ diff --git a/week2/assign1/images/onboarding/10.png b/week2/assign1/images/onboarding/10.png new file mode 100644 index 0000000..cac82af Binary files /dev/null and b/week2/assign1/images/onboarding/10.png differ diff --git a/week2/assign1/images/onboarding/2.png b/week2/assign1/images/onboarding/2.png new file mode 100644 index 0000000..a3f95c1 Binary files /dev/null and b/week2/assign1/images/onboarding/2.png differ diff --git a/week2/assign1/images/onboarding/3.png b/week2/assign1/images/onboarding/3.png new file mode 100644 index 0000000..93eabd1 Binary files /dev/null and b/week2/assign1/images/onboarding/3.png differ diff --git a/week2/assign1/images/onboarding/4.png b/week2/assign1/images/onboarding/4.png new file mode 100644 index 0000000..db8e0f3 Binary files /dev/null and b/week2/assign1/images/onboarding/4.png differ diff --git a/week2/assign1/images/onboarding/5.png b/week2/assign1/images/onboarding/5.png new file mode 100644 index 0000000..07359cb Binary files /dev/null and b/week2/assign1/images/onboarding/5.png differ diff --git a/week2/assign1/images/onboarding/6.png b/week2/assign1/images/onboarding/6.png new file mode 100644 index 0000000..f82b387 Binary files /dev/null and b/week2/assign1/images/onboarding/6.png differ diff --git a/week2/assign1/images/onboarding/7.png b/week2/assign1/images/onboarding/7.png new file mode 100644 index 0000000..56d78a0 Binary files /dev/null and b/week2/assign1/images/onboarding/7.png differ diff --git a/week2/assign1/images/onboarding/8.png b/week2/assign1/images/onboarding/8.png new file mode 100644 index 0000000..77f90dc Binary files /dev/null and b/week2/assign1/images/onboarding/8.png differ diff --git a/week2/assign1/images/onboarding/9.png b/week2/assign1/images/onboarding/9.png new file mode 100644 index 0000000..14fd056 Binary files /dev/null and b/week2/assign1/images/onboarding/9.png differ diff --git a/week2/assign1/images/section1/.DS_Store b/week2/assign1/images/section1/.DS_Store new file mode 100644 index 0000000..e01e46c Binary files /dev/null and b/week2/assign1/images/section1/.DS_Store differ diff --git a/week2/assign1/images/section1/1.png b/week2/assign1/images/section1/1.png new file mode 100644 index 0000000..16cd87c Binary files /dev/null and b/week2/assign1/images/section1/1.png differ diff --git a/week2/assign1/images/section1/10.png b/week2/assign1/images/section1/10.png new file mode 100644 index 0000000..0a0daeb Binary files /dev/null and b/week2/assign1/images/section1/10.png differ diff --git a/week2/assign1/images/section1/2.png b/week2/assign1/images/section1/2.png new file mode 100644 index 0000000..769a1e0 Binary files /dev/null and b/week2/assign1/images/section1/2.png differ diff --git a/week2/assign1/images/section1/3.png b/week2/assign1/images/section1/3.png new file mode 100644 index 0000000..5a6233b Binary files /dev/null and b/week2/assign1/images/section1/3.png differ diff --git a/week2/assign1/images/section1/4.png b/week2/assign1/images/section1/4.png new file mode 100644 index 0000000..69f7419 Binary files /dev/null and b/week2/assign1/images/section1/4.png differ diff --git a/week2/assign1/images/section1/5.png b/week2/assign1/images/section1/5.png new file mode 100644 index 0000000..44b11cd Binary files /dev/null and b/week2/assign1/images/section1/5.png differ diff --git a/week2/assign1/images/section1/6.png b/week2/assign1/images/section1/6.png new file mode 100644 index 0000000..c0c9ba3 Binary files /dev/null and b/week2/assign1/images/section1/6.png differ diff --git a/week2/assign1/images/section1/7.png b/week2/assign1/images/section1/7.png new file mode 100644 index 0000000..ebea234 Binary files /dev/null and b/week2/assign1/images/section1/7.png differ diff --git a/week2/assign1/images/section1/8.png b/week2/assign1/images/section1/8.png new file mode 100644 index 0000000..a54a23f Binary files /dev/null and b/week2/assign1/images/section1/8.png differ diff --git a/week2/assign1/images/section1/9.png b/week2/assign1/images/section1/9.png new file mode 100644 index 0000000..6ef09c3 Binary files /dev/null and b/week2/assign1/images/section1/9.png differ diff --git a/week2/assign1/images/section2/.DS_Store b/week2/assign1/images/section2/.DS_Store new file mode 100644 index 0000000..0e23aa2 Binary files /dev/null and b/week2/assign1/images/section2/.DS_Store differ diff --git a/week2/assign1/images/section2/1.png b/week2/assign1/images/section2/1.png new file mode 100644 index 0000000..2791c29 Binary files /dev/null and b/week2/assign1/images/section2/1.png differ diff --git a/week2/assign1/images/section2/2.png b/week2/assign1/images/section2/2.png new file mode 100644 index 0000000..4d7af47 Binary files /dev/null and b/week2/assign1/images/section2/2.png differ diff --git a/week2/assign1/images/section2/3.png b/week2/assign1/images/section2/3.png new file mode 100644 index 0000000..ea3ae76 Binary files /dev/null and b/week2/assign1/images/section2/3.png differ diff --git a/week2/assign1/images/section2/4.png b/week2/assign1/images/section2/4.png new file mode 100644 index 0000000..49c9da6 Binary files /dev/null and b/week2/assign1/images/section2/4.png differ diff --git a/week2/assign1/images/section2/5.png b/week2/assign1/images/section2/5.png new file mode 100644 index 0000000..69e922d Binary files /dev/null and b/week2/assign1/images/section2/5.png differ diff --git a/week2/assign1/images/section3/.DS_Store b/week2/assign1/images/section3/.DS_Store new file mode 100644 index 0000000..9cc9265 Binary files /dev/null and b/week2/assign1/images/section3/.DS_Store differ diff --git a/week2/assign1/images/section3/1.png b/week2/assign1/images/section3/1.png new file mode 100644 index 0000000..fe18574 Binary files /dev/null and b/week2/assign1/images/section3/1.png differ diff --git a/week2/assign1/images/section3/2.png b/week2/assign1/images/section3/2.png new file mode 100644 index 0000000..ce7098b Binary files /dev/null and b/week2/assign1/images/section3/2.png differ diff --git a/week2/assign1/images/section3/3.png b/week2/assign1/images/section3/3.png new file mode 100644 index 0000000..cc0d411 Binary files /dev/null and b/week2/assign1/images/section3/3.png differ diff --git a/week2/assign1/images/section3/4.png b/week2/assign1/images/section3/4.png new file mode 100644 index 0000000..998b5a2 Binary files /dev/null and b/week2/assign1/images/section3/4.png differ diff --git a/week2/assign1/images/section3/5.png b/week2/assign1/images/section3/5.png new file mode 100644 index 0000000..6d99ab7 Binary files /dev/null and b/week2/assign1/images/section3/5.png differ diff --git a/week2/assign1/index.html b/week2/assign1/index.html new file mode 100644 index 0000000..79ff3dc --- /dev/null +++ b/week2/assign1/index.html @@ -0,0 +1,193 @@ + + + + + + film archive + + + + +
+
film archive
+ +
+ +
+ 바다 잠수 + 노을지는 오이도 + 엉켜 자는 두 고양이 + 바닷가에서 노는 두 어린이 + 산책하는 사람과 강아지 + 카메라를 들고 거울 찍기 + 벤치 위 두 고양이 + 나무 그늘진 거리 + 스프카레를 기다리며 거울 찍기 + 산책하는 모자 +
+ +
+
+ +
+
+

2023

+
+
+
+

Sogang Univ North Gate

+

+ Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem + ipsum dolor sit amet. Lorem +

+
+ 서강대학교 남문 +
+
+
+

Hangang Park

+

+ Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem + ipsum dolor sit amet. Lorem +

+
+ 뚝섬 한강공원 +
+
+
+

Artist GrandFa

+

+ Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem + ipsum dolor sit amet. Lorem +

+
+ 오타루 운하를 그리는 할아버지 +
+
+
+

Japan Bridge

+

Lorem ipsum dolor sit amet consectetur adipisicing.

+
+ 일본 육교 +
+
+
+

Self Camera

+

Lorem ipsum dolor sit amet consectetur adipisicing.

+
+ 강가에서 셀프 카메라 +
+
+
+

Otaru Street

+

Lorem ipsum dolor sit amet consectetur adipisicing.

+
+ 오타루 거리 +
+
+
+

Cats on the Bench

+

Lorem ipsum dolor sit amet consectetur adipisicing.

+
+ 벤치 위 두 고양이 +
+
+
+

Japan Street

+

Lorem ipsum dolor sit amet consectetur adipisicing.

+
+ 일본 거리 신호등 앞 +
+
+
+

Japan Bridge

+

Lorem ipsum dolor sit amet consectetur adipisicing.

+
+ 일본 육교 위 +
+
+
+

Sapporo Stream

+

+ Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem + ipsum dolor sit amet. Lorem +

+
+ 삿포로 하천 +
+
+
+
+

2022

+
+ 예쁜 커튼과 침구의 방 +
+ 빛이 비친 팔과 손 + 카메라를 들고 친구와 거울 찍기 + 오사카 밤거리 + 걸터 앉아 셀프카메라 +
+
+
+
+

2021

+
+ 빛이 비치는 송내역 + 크리스마스 케이크 + 책 읽는 두 사람 + 잔디밭 고양이 + 롯데월드에서 친구들과 셀프카메라 +
+
+
+ + + + + + + diff --git a/week2/assign1/reset.css b/week2/assign1/reset.css new file mode 100644 index 0000000..743c759 --- /dev/null +++ b/week2/assign1/reset.css @@ -0,0 +1,115 @@ +/*** + The new CSS reset - version 1.11 (last updated 20.9.2023) + GitHub page: https://github.com/elad2412/the-new-css-reset +***/ + +/* + Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property + - The "symbol *" part is to solve Firefox SVG sprite bug + - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) + */ +*:where( + :not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *) + ) { + all: unset; + display: revert; +} + +/* Preferred box-sizing value */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Fix mobile Safari increase font-size on landscape mode */ +html { + -moz-text-size-adjust: none; + -webkit-text-size-adjust: none; + text-size-adjust: none; +} + +/* Reapply the pointer cursor for anchor tags */ +a, +button { + cursor: revert; +} + +/* Remove list styles (bullets/numbers) */ +ol, +ul, +menu { + list-style: none; +} + +/* For images to not be able to exceed their container */ +img { + max-inline-size: 100%; + max-block-size: 100%; +} + +/* removes spacing between cells in tables */ +table { + border-collapse: collapse; +} + +/* Safari - solving issue when using user-select:none on the text input doesn't working */ +input, +textarea { + -webkit-user-select: auto; +} + +/* revert the 'white-space' property for textarea elements on Safari */ +textarea { + white-space: revert; +} + +/* minimum style to allow to style meter element */ +meter { + -webkit-appearance: revert; + appearance: revert; +} + +/* preformatted text - use only for this feature */ +:where(pre) { + all: revert; + box-sizing: border-box; +} + +/* reset default text opacity of input placeholder */ +::placeholder { + color: unset; +} + +/* remove default dot (•) sign */ +::marker { + content: initial; +} + +/* fix the feature of 'hidden' attribute. + display:revert; revert to element instead of attribute */ +:where([hidden]) { + display: none; +} + +/* revert for bug in Chromium browsers + - fix for the content editable attribute will work properly. + - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ +:where([contenteditable]:not([contenteditable="false"])) { + -moz-user-modify: read-write; + -webkit-user-modify: read-write; + overflow-wrap: break-word; + -webkit-line-break: after-white-space; + -webkit-user-select: auto; +} + +/* apply back the draggable feature - exist only in Chromium and Safari */ +:where([draggable="true"]) { + -webkit-user-drag: element; +} + +/* Revert Modal native behavior */ +:where(dialog:modal) { + all: revert; + box-sizing: border-box; +} diff --git a/week2/assign1/script.js b/week2/assign1/script.js new file mode 100644 index 0000000..c1b8978 --- /dev/null +++ b/week2/assign1/script.js @@ -0,0 +1,47 @@ +/* 스크롤에 따른 topBtn 투명도 */ + +const windowHeight = window.innerHeight; +const topBtn = document.getElementById("top-btn"); + +document.addEventListener("scroll", () => { + topBtn.style.opacity = window.scrollY / windowHeight / 2; +}); + +/* 글자수에 따른 더보기 버튼 활성화 및 작동 */ + +const contents = document.querySelectorAll(".content"); +contents.forEach((content) => { + const contentDescription = content.children[1]; + if (contentDescription.innerText.length >= 85) { + const moreBtn = document.createElement("button"); //button 요소 생성 + moreBtn.innerText = "more"; + moreBtn.setAttribute("class", "content-more-btn"); //button 클래스명 지정 + + content.appendChild(moreBtn); //button 붙이기 + + /* 클릭 이벤트시 버튼 사라짐 */ + content.addEventListener("click", () => { + contentDescription.style.display = "block"; //말줄임 표시를 없앰 + moreBtn.style.display = "none"; + }); + } +}); + +/* 미리보기 섹션 스크롤 버튼 */ +const scrollLeftBtn = document.getElementById("scroll-left-btn"); +const scrollRightBtn = document.getElementById("scroll-right-btn"); + +const onboardingScroll = document.getElementById("onboarding-scroll"); +const maxScrollWidth = onboardingScroll.scrollWidth; + +scrollLeftBtn.addEventListener("click", () => { + onboardingScroll.scrollTo({ top: 0, left: 0, behavior: "smooth" }); +}); + +scrollRightBtn.addEventListener("click", () => { + onboardingScroll.scrollTo({ + top: 0, + left: maxScrollWidth, + behavior: "smooth", + }); +}); diff --git a/week2/assign1/style.css b/week2/assign1/style.css new file mode 100644 index 0000000..0c7a8e3 --- /dev/null +++ b/week2/assign1/style.css @@ -0,0 +1,380 @@ +@import url("reset.css"); + +@font-face { + font-family: "EF_jejudoldam"; + src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2210-EF@1.0/EF_jejudoldam.woff2") + format("woff2"); + font-weight: normal; + font-style: normal; +} +:root { + --light-gray-color: #f3f3f3; + --gray-color: #7d7d7d; + --green-color: #648057; + --white-color: #ffffff; +} + +html { + scroll-behavior: smooth; +} + +html, +body { + font-size: 62.5%; + line-height: 1.285; +} + +body { + padding: 2rem; + font-family: "EF_jejudoldam"; +} + +/* onboarding */ + +.onboarding { + margin-bottom: 4rem; +} + +header { + padding: 0.7rem 0.5rem; + margin-bottom: 2rem; + width: fit-content; + + border-bottom: 0.4rem solid var(--green-color); + border-style: none none dotted none; + color: var(--green-color); + + font-size: 2rem; + font-weight: 800; +} + +img { + height: 20rem; + + border: 0.3rem solid var(--green-color); + + object-fit: cover; +} + +#onboarding-scroll { + width: 100%; + + display: flex; + justify-content: space-between; + gap: 1rem; + + overflow-x: scroll; +} + +#onboarding-scroll::-webkit-scrollbar { + width: 1rem; +} + +#onboarding-scroll::-webkit-scrollbar-thumb { + background-color: var(--light-gray-color); + border-radius: 1rem; +} + +#onboarding-scroll::-webkit-scrollbar-track { + background-color: var(--gray-color); +} + +#onboarding-scroll::-webkit-scrollbar-button { + background-color: var(--light-gray-color); + width: 1rem; +} + +.onboarding-scroll-wrapper { + display: flex; + align-items: center; + gap: 1.5rem; + + font-size: 2rem; + + color: var(--green-color); + + margin-top: 5rem; + + scroll-behavior: smooth; +} + +.onboarding-scroll-wrapper > button { + cursor: pointer; +} + +.onboarding-nav { + width: 100%; + height: 3rem; + + display: flex; + justify-content: center; + gap: 8rem; + + margin-bottom: 5rem; +} + +.nav-category { + padding: 0.4rem; + + font-size: 1.5rem; + + color: var(--green-color); +} + +.nav-category:hover { + color: var(--gray-color); + + border-bottom: 0.2rem solid var(--gray-color); + border-style: none none dotted none; + + cursor: pointer; +} + +section > h1 { + font-size: 2rem; + + color: var(--green-color); + background-color: var(--white-color); + + border: 0.3rem solid var(--green-color); + padding: 1.5rem 2rem; + + position: sticky; + top: 0; + z-index: 1; +} + +.halftone { + --dotSize: 0.2rem; + --bgSize: 5rem; + --bgPosition: calc(var(--bgSize) / 2); + background-image: radial-gradient( + circle at center, + var(--green-color) var(--dotSize), + transparent 0 + ), + radial-gradient( + circle at center, + var(--green-color) var(--dotSize), + transparent 0 + ); + background-size: var(--bgSize) var(--bgSize); + background-position: 0 0, var(--bgPosition) var(--bgPosition); + padding: 2rem 0; +} + +/* first section */ + +.first-section-gallery { + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 2rem; + + padding: 3rem 0; +} + +.first-section-gallery img { + width: 100%; +} + +/* image overlay */ +.overlay-wrapper { + position: relative; + flex-grow: 1; + flex-shrink: 1; +} + +.overlay-wrapper > .content { + position: absolute; + display: none; + + width: 100%; + height: 98%; + + padding: 2rem; + + background-color: #0000005e; + color: var(--white-color); +} + +.overlay-wrapper .content > h3 { + font-size: 1.4rem; +} + +.overlay-wrapper:hover .content { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + gap: 1rem; + justify-content: center; +} + +/* ellipsis */ +.overlay-wrapper > .content > p { + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + + width: 20rem; +} + +.content-more-btn { + background-color: var(--white-color); + color: var(--green-color); + + padding: 0.5rem 1rem; + border-radius: 1rem; + + cursor: pointer; +} + +/* second section */ + +.second-section-gallery { + display: flex; + justify-content: center; + align-items: center; + gap: 1rem; +} + +.second-section-gallery img { + flex-shrink: 1; + flex-grow: 1; +} + +.second-section-gallery > .first-img { + width: 41rem; + height: 41rem; +} + +.second-section-gallery > .right-side { + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + flex: 0 0 calc(50% - 10px); + gap: 1rem; +} + +@media (max-width: 879px) { + .second-section-gallery > .first-img, + .second-section-gallery > .right-side > .last-img { + width: 62rem; + height: 20rem; + } + + .second-section-gallery { + flex-wrap: wrap; + } + .second-section-gallery > .right-side { + flex: auto; + } +} + +@media (max-width: 659px) { + .second-section-gallery > .right-side > .last-img { + width: 20rem; + } + .second-section-gallery > .first-img { + width: 41rem; + } +} + +/* third section */ +.third-section-gallery { + height: 60rem; + + display: grid; + gap: 1rem; + grid-template-rows: 25% 25% 25% 25%; + grid-template-columns: 25% 25% 25% 25%; + grid-template-areas: + "item1 item1 item2 item2" + "item3 item3 item2 item2" + "item4 item4 item4 item5" + "item4 item4 item4 item5"; + + padding-right: 3rem; + padding-bottom: 3rem; +} + +.third-section-gallery > img { + width: 100%; + height: 100%; +} + +.grid-item:nth-child(1) { + grid-area: item1; +} +.grid-item:nth-child(2) { + grid-area: item2; +} +.grid-item:nth-child(3) { + grid-area: item3; +} +.grid-item:nth-child(4) { + grid-area: item4; +} +.grid-item:nth-child(5) { + grid-area: item5; +} + +/* footer */ + +footer { + height: 10rem; + padding: 5rem 0; + margin-top: 3rem; + + display: flex; + justify-content: center; + align-items: center; + + border-top: 0.4rem dotted var(--green-color); + border-bottom: 0.4rem dotted var(--green-color); + + color: var(--green-color); + + font-size: 1.5rem; +} + +/* animation */ +.overlay-wrapper:hover, +.second-section-gallery img { + transition: transform 500ms; +} + +.overlay-wrapper:hover, +.second-section-gallery img:hover { + transform: translateY(-0.5rem); +} + +/* top button */ +#top-btn { + opacity: 0; + + background-color: var(--green-color); + color: var(--white-color); + + display: flex; + justify-content: center; + align-items: center; + + width: 5rem; + height: 5rem; + + font-size: 2rem; + + border-radius: 50%; + + position: fixed; + right: 3rem; + bottom: 3rem; + z-index: 2; + + cursor: pointer; +}