DO-SOPT-WEB · Rose-my · Oct 13, 2023 · Oct 13, 2023 · Oct 13, 2023 · Oct 13, 2023
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
diff --git a/1차세미나/htmlcss(1:2)/album.html b/1차세미나/htmlcss(1:2)/album.html
diff --git a/1차세미나/htmlcss(1:2)/test.txt b/1차세미나/htmlcss(1:2)/test.txt
diff --git a/1차세미나/htmlcss(1:2)/wk3/1.png b/1차세미나/htmlcss(1:2)/wk3/1.png
diff --git a/1차세미나/htmlcss(1:2)/wk3/2.png b/1차세미나/htmlcss(1:2)/wk3/2.png
diff --git a/1차세미나/htmlcss(1:2)/wk3/3.png b/1차세미나/htmlcss(1:2)/wk3/3.png
diff --git a/1차세미나/htmlcss(1:2)/wk3/4.png b/1차세미나/htmlcss(1:2)/wk3/4.png
diff --git a/1차세미나/htmlcss(1:2)/wk3/5.png b/1차세미나/htmlcss(1:2)/wk3/5.png
diff --git a/1차세미나/htmlcss(1:2)/wk3/IMG_1962.HEIC b/1차세미나/htmlcss(1:2)/wk3/IMG_1962.HEIC
diff --git a/1차세미나/htmlcss(2:2)/account.html b/1차세미나/htmlcss(2:2)/account.html
diff --git a/Session01/.DS_Store b/Session01/.DS_Store
diff --git a/1차세미나/htmlcss(1:2)/.DS_Store → Session01/htmlcss1/.DS_Store b/1차세미나/htmlcss(1:2)/.DS_Store → Session01/htmlcss1/.DS_Store
diff --git a/1차세미나/htmlcss(1:2)/.vscode/settings.json → Session01/htmlcss1/.vscode/settings.json b/1차세미나/htmlcss(1:2)/.vscode/settings.json → Session01/htmlcss1/.vscode/settings.json
diff --git a/Session01/htmlcss1/album.html b/Session01/htmlcss1/album.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css"/>
+    <title>1차세미나 사진관 과제</title>
+</head>
+<body>
+    <header id="body-title"><h1>김밍밍 인 뉴욕</h1></header>
+
+    <!--preview-->
+    <section class="preview">
+        <img src="wk1/01.png" alt="UnitedPlatesofAmerica">
+        <img src="wk1/02.png" alt="핑크 건물">
+        <img src="wk2/02.png" alt="자유의여신상 레고">
+        <img src="wk3/01.png" alt="도서관 팻말">
+        <img src="wk3/02.png" alt="미국 플래그">
+        <img src="wk1/04.png" alt="리틀아일랜드">
+    </section>
+
+    <!--네비게이션-->
+    <nav>
+        <span>category</span>
+        <ul>
+            <li><a href="#category-1">[1] 뉴욕은 낭만이 넘치는 도시에요</a></li>
+            <li><a href="#category-2">[2] 가을맞이에 한창인 뉴욕</a></li>
+            <li><a href="#category-3">[3] 애증의 뉴욕 이놈자식 그래도 사랑해</a></li>
+        </ul>
+    </nav>
+
+    <!--category1-->
+    <section class="section-1">
+        <h4 id="category-1">뉴욕은 낭만이 넘치는 도시에요</h4>
+            <div class="images-1">
+                <img src="wk1/02.png" alt="핑크 건물">
+                <img src="wk1/08.png" alt="인턴 촬영지">          
+                <img src="wk1/03.png" alt="휘트니 뮤지엄">
+                <img src="wk1/04.png" alt="리틀 아일랜드">
+                <img src="wk1/05.png" alt="휘트니 뮤지엄">
+                <img src="wk1/11.png" alt="무지개 베이글">
+                <img src="wk1/09.png" alt="조 피자">
+                <img src="wk1/10.png" alt="스파이더맨">
+                <img src="wk1/01.png" alt="UnitedPlatesofAmerica">
+            </div>
+    </section>
+
+    <!--category2-->
+    <section class="section-2"> 
+        <h4 id="category-2">가을맞이에 한창인 뉴욕</h4>
+        <div class="images-2">
+            <div class="images-2-left">
+                <img src="wk2/04.png">
+            </div>
+            <div class="images-2-right">
+                <img src="wk2/06.png" alt="플라자호텔">
+                <img src="wk2/01.png" alt="피크닉">
+                <img src="wk2/09.png" alt="호박">
+                <img src="wk2/07.png" alt="가을 센팍">
+            </div>
+        </div>
+    </section>
+
+    <!--category3-->
+    <section class="section-3"> 
+        <h4 id="category-3">애증의 뉴욕 이놈자식 그래도 사랑해</h4>
+        <div class="container-3">
+            <img src="wk3/10.png" alt="브루클린 파크">
+            <img src="wk3/12.png" alt="타임스퀘어">
+            <img src="wk3/03.png" alt="브루클린 브릿지">
+            <img src="wk3/11.png" alt="하트">
+            <img src="wk3/01.png" alt="도서관 팻말">
+            <!-- 원하는 만큼 이미지 추가 -->
+        </div>
+    </section>
+    <a href="#body-title">
+        <button id="button-top">TOP</button>
+    </a>
+    <!--footer-->
+    <footer>
+        <span>&copy; 뉴욕에서 두 달 살면서 찍은 사진이에요**</span>
+    </footer>
+</body>
+</html>
diff --git a/1차세미나/htmlcss(1:2)/button.js → Session01/htmlcss1/button.js b/1차세미나/htmlcss(1:2)/button.js → Session01/htmlcss1/button.js
diff --git a/1차세미나/htmlcss(1:2)/sec01.css → Session01/htmlcss1/sec01.txt b/1차세미나/htmlcss(1:2)/sec01.css → Session01/htmlcss1/sec01.txt
@@ -5,8 +5,8 @@
 .flexbox01{
     flex-wrap:wrap;
     white-space: nowrap;
-     /* 아이템의 너비 설정 (여기서는 3개로 나눔) */
     display: flex;
+    flex-direction: row;
 }
 .sec01item {
     width:200px;

diff --git a/1차세미나/htmlcss(1:2)/sec02.css → Session01/htmlcss1/sec02.txt b/1차세미나/htmlcss(1:2)/sec02.css → Session01/htmlcss1/sec02.txt
@@ -8,6 +8,7 @@
     height:300px;
     justify-content: center;
     gap:10px;
+    position: relative;
 }
 .big{
     width:50%;

diff --git a/1차세미나/htmlcss(1:2)/sec03.css → Session01/htmlcss1/sec03.txt b/1차세미나/htmlcss(1:2)/sec03.css → Session01/htmlcss1/sec03.txt
@@ -1,10 +1,11 @@
 /* 그리드 컨테이너 스타일 */
 .grid-container {
   display: grid;
-  grid-template-rows: repeat(4, 110px);
+  grid-template-rows: repeat(4, 150px);
   grid-template-columns: repeat(8, 1fr);
-  grid-auto-rows: 100px;
+  grid-auto-rows: 150px;
   gap: 10px; /* 그리드 아이템 사이의 간격 설정 */
+  position: relative;
 }
 
 /* 그리드 아이템 스타일 */