SWU-UMC · yoona24 · Mar 21, 2026 · Mar 22, 2026 · Mar 25, 2026 · Mar 25, 2026
diff --git a/.DS_Store b/.DS_Store
diff --git a/week0/.DS_Store b/week0/.DS_Store
diff --git a/week0/ch.0/.DS_Store b/week0/ch.0/.DS_Store
diff --git a/week0/ch.0/BoxSizing1.html b/week0/ch.0/BoxSizing1.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <style>
+    .box {
+      width: 100px;
+      height: 100px;
+      background-color: purple;
+      margin-bottom: 10px;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="box box1">border-box</div>
+  <div class="box box2">content-box</div>
+</body>
+
+</html>
diff --git a/week0/ch.0/BoxSizing2.html b/week0/ch.0/BoxSizing2.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <style>
+    .box {
+      width: 100px;
+      height: 100px;
+      background-color: purple;
+      margin-bottom: 10px;
+      padding: 10px;
+      border: 10px solid red;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="box box1">border-box</div>
+  <div class="box box2">content-box</div>
+</body>
+
+</html>
diff --git a/week0/ch.0/Flex.html b/week0/ch.0/Flex.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <style>
+    body {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 600px;
+      margin: 0;
+    }
+
+    .box {
+      width: 300px;
+      background-color: green;
+      padding: 20px;
+      text-align: center;
+    }
+  </style>
+</head>
+<body>
+
+  <div class="box">
+    <p>가운데 정렬</p>
+  </div>
+
+</body>
+</html>
diff --git a/week0/ch.0/Grid.html b/week0/ch.0/Grid.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <style>
+    body {
+      display: grid;
+      place-items: center;
+      height: 600px;
+      margin: 0;
+    }
+
+    .box {
+      width: 300px;
+      background-color: green;
+      padding: 20px;
+      text-align: center;
+    }
+  </style>
+</head>
+<body>
+
+  <div class="box">
+    <p>가운데 정렬</p>
+  </div>
+
+</body>
+</html>
diff --git a/week0/ch.0/Margin.html b/week0/ch.0/Margin.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <style>
+    .box {
+      width: 300px;
+      margin: 0 auto;
+      text-align: center;
+      background-color: green;
+      padding: 20px;
+    }
+  </style>
+</head>
+<body>
+
+  <div class="box">
+    <p>가운데 정렬</p>
+  </div>
+
+</body>
+</html>
diff --git a/week0/ch.0/TextAlign.html b/week0/ch.0/TextAlign.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <style>
+    .box {
+      text-align: center;
+      background-color: green;
+    }
+  </style>
+</head>
+<body>
+
+  <div class="box">
+    <p>가운데 정렬</p>
+  </div>
+
+</body>
+</html>
diff --git a/week0/ch.0/Translate.html b/week0/ch.0/Translate.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <style>
+    body {
+      height: 600px;
+      margin: 0;
+      position: relative;
+    }
+
+    .box {
+      width: 300px;
+      background-color: green;
+      padding: 20px;
+      text-align: center;
+
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  </style>
+</head>
+<body>
+
+  <div class="box">
+    <p>가운데 정렬</p>
+  </div>
+
+</body>
+</html>
diff --git a/week0/ch.0/absolute.html b/week0/ch.0/absolute.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <style>
+    /** 전체 선택자 기본적으로 설정된 마진을 없앰. */
+    * {
+      margin: 0;
+      box-sizing: border-box;
+    }
+
+    .box1 {
+      width: 500px;
+      height: 500px;
+      background-color: purple;
+      color: white;
+      position: relative;
+    }
+
+    .box2 {
+      width: 200px;
+      height: 200px;
+      background-color: yellow;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="box1">BOX1</div>
+  <h1 class="box2">BOX2</h1>
+</body>
+
+</html>
diff --git a/week0/ch.0/fixed.html b/week0/ch.0/fixed.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Position: Sticky</title>
+  <style>
+    * {
+      box-sizing: border-box;
+      margin: 0;
+    }
+
+    .container {
+      width: 100%;
+      height: 100%;
+      padding: 10px;
+      background-color: greenyellow;
+    }
+
+    .box {
+      width: 80px;
+      height: 80px;
+      margin-bottom: 20px;
+      background-color: lightgoldenrodyellow;
+    }
+
+    .box2 {
+      background-color: purple;
+      position: fixed;
+      top: 40px;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="container">
+    <div class="box box1"></div>
+    <div class="box box2"></div>
+    <div class="box box3"></div>
+    <div class="box box4"></div>
+    <div class="box box5"></div>
+    <div class="box box6"></div>
+    <div class="box box7"></div>
+    <div class="box box8"></div>
+    <div class="box box9"></div>
+    <div class="box box10"></div>
+    <div class="box box11"></div>
+    <div class="box box12"></div>
+    <div class="box box13"></div>
+    <div class="box box14"></div>
+    <div class="box box15"></div>
+    <div class="box box16"></div>
+  </div>
+</body>
+
+</html>
diff --git a/week0/ch.0/html b/week0/ch.0/html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<!--이 문서는 HTML5로 작성되었다는 선언문-->
+<html lang="en">
+<!--웹 문서의 시작을 알리는 태그, 문서의 기본 언어가 영어-->
+<head>
+    <!--문서의 설정,정보를 담는 부분-->
+    <meta charset="UTF-8">
+    <!--글자 인코딩 방식, UTF-8은 한글,영어,이모지까지 폭넓은 지원-->
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <!--인터넷 익스플로러에서도 최신 엔진을 사용하도록 지정-->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!--모바일.태블릿 화면 크기에 맞게 콘텐츠 조정-->
+    <title>내 첫 번째 웹페이지</title>
+    <!--웹 브라우저 탭에 표시되는 제목-->
+</head>
+<body>
+    <!--실제 화면에 보이는 내용/텍스트,이미지,버튼,링크 등 모든 콘텐츠 여기에-->
+    <div>나는 요나. HTML 공부 시작한다.</div>
+</body>
+</html>
+
+<!--멀티미디어 태그 예시-->
+<img src="profile.jpg" alt="프로필사진">
+<video controls>
+    <source src="movie.mp4" type="video/mp4">
+</video>
+<audio controls>
+    <source src="music.mp3" type="audio/mp3">
+</audio>
+
+<!-- p (paragraph 단락,절) 시작/종료 태그로 이루어짐-->
+<p>내용</p>
+
+<!-- <태그 속성1='값1' 속성2='값2'>콘텐츠 보이는 요소</태그> -->
+ <p class="highlight" id="intro">안녕하세요!</p>
+ <img src="matthew.jpg" alt="매튜 사진" width="200">
+ <a href="http://www.youtube.com" target="_blank"></a>
+
+ <!--태그 안에 태그 중첩 요소-->
+ <p>안녕하세요 <strong>고구마!</strong></p>
+ <div>
+    <h2>제목</h2>
+    <p>내용이 들어갑니다.</p>
+ </div>
+
+ <!--콘텐츠가 없는 태그도 사용가능-->
+ <img src="sweet-potato.png" alt="고구마" />
+ <br />
+ <hr />
+ <!--콘텐츠가 없는 태그들은 스스로 닫힘-->
diff --git a/week0/ch.0/index.html b/week0/ch.0/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+  <h1>고구마 아이스크림 맛있다.</h1>
+  <!--h1은 브라우저에서 자동으로 글자 크기를 크고 굻게 표시해줌 or 사용자가 브라우저 설정에서 바꿔둔 스타일대로 적용-->
+  <div>고구마 아이스크림 맛있다.</div>
+</body>
+</html>
diff --git a/week0/ch.0/relative.html b/week0/ch.0/relative.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <style>
+    .box {
+      width: 100px;
+      height: 100px;
+      background-color: purple;
+      color: white;
+      box-sizing: border-box;
+      position: relative;
+
+      bottom: -150px;
+      right: 0px;
+
+    }
+  </style>
+</head>
+
+<body>
+  <div class="box">BOX</div>
+  <h1>고구마 상자</h1>
+</body>
+
+</html>