APPS-sookmyung · juyoon0620 · Mar 30, 2026 · tjsl0607 · Apr 1, 2026 · tjsl0607
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
diff --git a/1주차.md b/1주차.md
@@ -0,0 +1,18 @@
+### 1주차 실습
+
+#### 배운점
+- 링크를 추가하는 방법을 배웠다.
+- 사진, 동영상 넣는 방법을 배웠다.
+- <br>을 사용해 줄을 바꾸는 방법을 알게 되었다.
+
+#### 어려웠던 점
+- 요소들 대칭이나 배경이 여백을 남게 하는 부분이 어려웠다.
+- 사진 옆에 글을 쓸 때 내가 생각한 위치가 아닌곳에 생성되는 등 구성 요소들의 집합?에 대해 어려운 부분이 많았다.
+- css에서 색상을 바꾸고 싶었는데 바꾸니까 Go Live를 할 때 이상하게 나와서 제대로 적용하지 못했다.
+
+#### 느낀점
+- 직접 만들어보니까 Go Live할 때마다 긴장되었다.
+- 익숙해진 거 같아서 생각한 거 막상 해보면 다르게 나와서 흠... 빨리 익숙해지고 싶다!!
+
+
+
diff --git a/assignment/week1/style.css b/assignment/week1/style.css
diff --git a/하주윤/week1/1주차.md b/하주윤/week1/1주차.md
diff --git a/하주윤/week2/과제1/index.html b/하주윤/week2/과제1/index.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="ko">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Calculator</title>
+    <link rel="stylesheet" href="main.css" />
+</head>
+
+<body>
+    <div class="calculator">
+        <form name="forms">
+            <input type="text" name="output" readonly />
+            <input type="button" class="clear" value="C" onclick="document.forms.output.value = ''" />
+            <input type="button" class="operator" value="/" onclick="document.forms.output.value += '/'" />
+            <input type="button" value="1" onclick="document.forms.output.value += '1'" />
+            <input type="button" value="2" onclick="document.forms.output.value += '2'" />
+            <input type="button" value="3" onclick="document.forms.output.value += '3'" />
+            <input type="button" class="operator" value="*" onclick="document.forms.output.value += '*'" />
+            <input type="button" value="4" onclick="document.forms.output.value += '4'" />
+            <input type="button" value="5" onclick="document.forms.output.value += '5'" />
+            <input type="button" value="6" onclick="document.forms.output.value += '6'" />
+            <input type="button" class="operator" value="+" onclick="document.forms.output.value += '+'" />
+            <input type="button" value="7" onclick="document.forms.output.value += '7'" />
+            <input type="button" value="8" onclick="document.forms.output.value += '8'" />
+            <input type="button" value="9" onclick="document.forms.output.value += '9'" />
+            <input type="button" class="operator" value="-" onclick="document.forms.output.value += '-'" />
+            <input type="button" class="dot" value="." onclick="document.forms.output.value += '.'" />
+            <input type="button" value="0" onclick="document.forms.output.value += '0'" />
+            <input type="button" class="operator result" value="=" onclick="
+            document.forms.output.value = eval(document.forms.output.value)
+          " />
+        </form>
+    </div>
+</body>
+
+</html>
diff --git a/하주윤/week2/과제1/main.css b/하주윤/week2/과제1/main.css
@@ -0,0 +1,77 @@
+/* 기본 박스 모델 초기화 */
+* {
+  margin: 0; /* 여백 제거하는 속성 */
+  padding: 0; /* 내부 여백 제거하는 속성 */
+  box-sizing: border-box; /* width와 height 계산에 padding과 border를 포함하도록 설정 */
+}
+
+body {
+  background-color: white;
+  display: flex;
+  justify-content: center; /* 가로 정렬 */
+  align-items: center; /* 세로 정렬 */
+  height: 100vh;
+}
+
+.calculator {
+  width: 287px; 
+  border-radius: 5px; /* 꼭짓점 둥글기 정도: 5px */
+  background-color: #f0f3fa;
+  padding: 20px 10px; /* 상하 20px, 좌우 10px 내부 여백 */
+  box-shadow: 0px 5px 10px rgb(6, 15, 65, 0.4);
+  /* x축: 0px, y축: 5px, 퍼짐: 10px, 색상: rgb(6, 15, 65), 투명도: 0.4 그림자 적용 */
+}
+
+.calculator form {
+  display: grid; /* grid 선언 */
+  grid-template-columns: repeat(4,1fr); /* 4열 균등 분배 */
+  height: 350px; /* 버튼 높이 55px */ /**/
+  gap: 10px; /* 버튼 간격 10px */
+}
+
+.calculator form input {
+  cursor: pointer; /* 마우스 커서 포인터로 변경 */
+  font-size: 19px; /* 버튼 내부 텍스트 크기 19px */ 
+  border-radius: 8px; /* 꼭짓점 둥글기 정도: 10px */ /**/
+  border: none; /* 외곽선 없음 */
+  background-color: #d5deef;
+  box-shadow: 3px 3px 6px rgb(0, 0, 0, 0.15);
+  /* x축: 3px, y축: 3px, 퍼짐: 6px, 색상: rgb(0, 0, 0), 투명도: 0.15 그림자 적용 */
+  transition: all 0.1s ease-in-out; /* 모든 속성 변화를 0.1초에 걸쳐 전환(천천-빠름-천천) */
+  outline: none; /* 포커스 시 나타나는 기본 외곽선 제거 */
+}
+
+/* 마우스를 올렸을 때 버튼 강조 효과 */
+.calculator form :{
+  box-shadow: 1px 1px 2px #696969; /* x축: 1px, y축: 1px, 퍼짐: 2px, 색상: #696969 그림자 적용 */
+}
+
+/* 버튼 색상 및 크기 설정 */
+.calculator form .clear {
+  color: #ed4848;
+  grid-column: span 3; /* `C` 버튼이 현재 위치에서 3개의 열을 차지하도록 설정 */
+}
+
+.calculator form .operator {
+  background-color: #395886;
+  color: white;
+}
+
+.calculator form .dot {
+  background-color: #628ecb;
+  color: white;
+}
+
+.calculator form input[type="text"] {
+  grid-column: span 4; /* 입력창이 4개의 열 전체를 차지하도록 설정 */
+  text-align: left; /* 입력된 값이 어느 방향으로 정렬될지 설정 */
+  padding: 0px; /* 입력창 내부 여백 10px 설정 */ /**/
+  font-size: 20px; /* 텍스트 크기 20px */
+  border-radius: 6px; /* 꼭짓점 둥글기 정도: 6px */
+  border: 1px solid #bbb; /* 외곽선: 1px, 실선, #bbb 색상 */
+  background-color: #f9f9f9;
+}
+
+.calculator form .result {
+  grid-column: span 2; /* `=` 버튼이 현재 위치에서 2개의 열을 차지하도록 설정*/
+}
diff --git a/하주윤/week2/과제2/images/background.jpeg b/하주윤/week2/과제2/images/background.jpeg