diff --git a/assignment/week02/assign1/index.html b/assignment/week02/assign1/index.html
new file mode 100644
index 0000000..8e10015
--- /dev/null
+++ b/assignment/week02/assign1/index.html
@@ -0,0 +1,182 @@
+
+
+
+
+
+
+ 유진's 사진관
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ 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..241b560
--- /dev/null
+++ b/assignment/week02/assign1/index.js
@@ -0,0 +1,77 @@
+const sec1ImgList = document.querySelectorAll(".sec1wrap img");
+const topBtn = document.querySelector("#top img");
+
+sec1ImgList.forEach((img)=>{
+ let title=img.getAttribute('img-title');
+ 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);
+
+ 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";
+ }
+ })
+
+}
+
+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;
+});
\ 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..b42ac13
--- /dev/null
+++ b/assignment/week02/assign1/style.css
@@ -0,0 +1,243 @@
+html{
+ scroll-behavior: smooth;
+}
+
+body {
+ box-sizing: border-box;
+ margin:auto;
+ font-weight: 600;
+}
+
+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: 2;
+}
+
+.sec1{
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+ padding:2rem 4rem;
+ gap:0.5rem;
+}
+
+.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,.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%;
+ margin: auto;
+}
+
+.content{
+ font-size: 0.7rem;
+ top: 50%;
+ left: 50%;
+ font-weight: 500;
+ display: -webkit-box;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+}
+
+.showMoreBtn{
+ top: 70%;
+ color: black;
+}
+
+
+.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;
+}
+
+.sec1 > div:hover , .sec2 img:hover{
+ transform: translateY(-0.3rem);
+ transition: all 0.2s linear;
+
+}
+
+#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;
+ opacity: 0;
+}
\ No newline at end of file
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
+ - 우리가 약속된 태그들을 쭉 나열하면서 실제로 어떻게 랜더링 되느냐에 대해서는 크게 신경 쓰지 않아도 됨
+ - 즉, "무엇을 나타내야하는가"를 디테일하게 기술하는 관점에 중점을 두는 프로그래밍 기법이다.
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+