academind · echi0517 · Feb 15, 2023
diff --git a/01_challenges-page/full-week.html b/01_challenges-page/full-week.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+    <meta charset="UTF-8">
+    <title>My Uplcomig Challenges</title>
+    <link rel="stylesheet" href="style/shared.css">
+    <link rel="stylesheet" href="style/full-week.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;700&family=Oswald:wght@700&display=swap"
+        rel="stylesheet">
+    <link rel="icon" href="images/favicon.ico" type="image/x-icon">
+</head>
+
+<body>
+    <header>
+        <h1>My Uplcomig Challenges</h1>
+        <p id="description">이것이 내 다음 날의 목표다.</p>
+        <a href="index.html">나도챌린지 로 이동</a>
+    </header>
+    <main>
+        <ol>
+            <li>
+                <h2>1월 18일 수요일</h2>
+                <p>html&css에 대해 배운 내용 복습</p>
+            </li>
+            <li class="highlight-goal">
+                <h2>1월 19일 목요일</h2>
+                <p>html & css에서 연습하기</p>
+            </li>
+            <li class="highlight-goal">
+                <h2>1월 20일 금요일</h2>
+                <p>html 및 css에 대해 자세히 알아보고 더 복잡한 웹사이트 구축</p>
+            </li>
+            <li>
+                <h2>1월 21일 토요일</h2>
+                <p>고급 html 및 css 개념 연습</p>
+            </li>
+
+        </ol>
+    </main>
+
+
+
+
+</body>
+
+</html>
diff --git a/01_challenges-page/git.txt b/01_challenges-page/git.txt
@@ -0,0 +1 @@
+https://github.com/academind/100-days-of-web-development
diff --git a/01_challenges-page/images/challenges-trophy.jpg b/01_challenges-page/images/challenges-trophy.jpg
diff --git a/01_challenges-page/images/favicon.ico b/01_challenges-page/images/favicon.ico
diff --git a/01_challenges-page/index.html b/01_challenges-page/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;700&family=Oswald:wght@700&display=swap"
+        rel="stylesheet">
+    <title>나도챌린지</title>
+    <link rel="stylesheet" href="style/shared.css">
+    <link rel="stylesheet" href="style/daily-challenge.css">
+    <link rel="icon" href="images/favicon.ico" type="image/x-icon">
+</head>
+
+<body>
+    <main>
+        <img src="/images/challenges-trophy.jpg" alt="이미지로드">
+        <h1>박수영 챌린지 <span>2023년 1월 15일</span></h1>
+        <p id="todays-challenge">웹 개발의 기초 배우기 - html 과 css에 대한 공부</p>
+    </main>
+    <footer>
+        <p>
+            두번째 <a href="full-week.html">페이지</a>로 이동합니다.
+        </p>
+    </footer>
+
+</body>
+
+
+</html>
+
+
+
+
+
+<!-- html 소스를 가져오고 css 를 가져와서 입힌다 -->
+<!-- id 값은 소문자와 -문자를 이용하여 사용 -->
+<!--  css 박스모델 -->
+
+<!--  header main footer 방식을 추천 -->
+
+<!-- inline block , 마진상세 
+block 요소의 더 큰 여백으로 마진으로 설정된다-->
diff --git a/01_challenges-page/practice/index81.html b/01_challenges-page/practice/index81.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="./style_81/index81.css">
+</head>
+
+<body>
+    <header>
+        <h1>HTML & CSS Basics Summary</h1>
+        <img src="https://github.com/academind/100-days-of-web-development/blob/04-html-css-first-practice-summary/extra-files/html-css.png?raw=true"
+            alt="이미지주소">
+    </header>
+
+    <main>
+        <section>
+
+            <h2>HTML Summary</h2>
+            <p> HTML (HyperText Markup Language) is used to define our page content,
+                structure and meaning. You <strong>don't</strong> use it for styling
+                purposes. Use CSS for that instead!
+            </p>
+            <ul id = "html-list">
+                <li class = "extra-important">
+                    HTML uses "elements" to describe (annotate) content
+                </li>
+                <li>
+                    HTML elements typically have an opening tag, content and then a
+                    closing tag
+                </li>
+                <li class = "extra-important">
+                    You can also have void (empty) elements like images
+                </li>
+                <li class = "extra-important">
+                    You can also configure elements with attributes
+                </li>
+                <li>
+                    There's a long list of available elements but you'll gain experience
+                    over time, no worries.
+                </li>
+            </ul>
+            <p>
+                Learn more about all available HTML elements on
+                <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">the MDN HTML element reference</a>.
+            </p>
+        </section>  
+
+        <section>
+            <h2>
+                CSS Summary
+            </h2>
+            <p>
+                CSS (Cascading Style Sheets) is used for styling your page content.
+            </p>
+            <ul id="css-list">
+                <li>Styles are assigned via property-value pairs</li>
+                <li>You can assign styles via the "style" attribute</li>
+                <li class="extra-important">
+                    To avoid code duplication, you typically use global styles (e.g. via
+                    the "style" element) instead
+                </li>
+                <li>
+                    Alternatively, you can work with external stylesheet files which you
+                    "link" to
+                </li>
+                <li class="extra-important">
+                    When working with CSS, concepts like "inheritance", "specificity"
+                    and the "box model" should be understood.
+                </li>
+            </ul>
+
+        </section>
+        <p>
+            Learn more about all available CSS properties and values on
+            <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference" target="_blank">the MDN CSS property reference</a>.
+        </p>
+    </main>
+    <footer>
+        <a href="https://github.com/academind/100-days-of-web-development/blob/04-html-css-first-practice-summary/extra-files/html-css-basics-summary.pdf" target="_blank"
+        >Download PDF Summary</a>
+      <p>(c) Academind GmbH</p>
+    </footer>
+
+
+
+</body>
+
+</html>
diff --git a/01_challenges-page/practice/style_81/index81.css b/01_challenges-page/practice/style_81/index81.css
@@ -0,0 +1,79 @@
+body {
+  background-color: rgb(243, 234, 255);
+  font-family: "Roboto", sans-serif;
+}
+
+header {
+  text-align: center;
+  padding: 32px;
+}
+header img {
+  width: 300px;
+}
+
+h1 {
+  color: rgb(88, 49, 196);
+  font-size: 52px;
+}
+main {
+  background-color: rgb(122, 74, 218);
+  width: 700px;
+  margin: 32px auto;
+  padding: 32px;
+  border-radius: 8px;
+  color: rgb(248, 241, 255);
+}
+ul {
+  margin: 0;
+  list-style: none;
+  padding: 0;
+}
+
+li {
+  margin: 14px 0;
+  padding-left: 10px;
+  border-left: 5px solid transparent;
+}
+
+a {
+  background-color: rgb(254, 238, 176);
+  text-decoration: none;
+  border-radius: 4px;
+  /* font-family: 'Roboto', sans-serif; */
+  color: rgb(36, 3, 102);
+  padding: 2px 6px;
+}
+
+a:hover,
+a:active {
+  background-color: rgb(250, 201, 39);
+}
+
+.extra-important {
+  color: rgb(255, 237, 177);
+  /* border-left: 5px solid rgb(249,201,39); */
+  border-color: rgb(249, 201, 39);
+}
+
+footer {
+  text-align: center;
+  margin-bottom: 100px;
+}
+
+footer a {
+  background-color: rgb(249, 201, 39);
+  text-decoration: none;
+  border-radius: 8px;
+  font-family: "Roboto", sans-serif;
+  color: rgb(82, 54, 0);
+  padding: 12px 20px;
+}
+
+footer a:hover,
+footer a:active {
+  background-color: rgb(255, 186, 58);
+}
+footer p {
+  color: rgb(131, 113, 149);
+  margin-top: 30px;
+}
diff --git a/01_challenges-page/style/daily-challenge.css b/01_challenges-page/style/daily-challenge.css
@@ -0,0 +1,51 @@
+main{ /*내가*/
+  width:800px;
+  margin: 200px auto 72px auto;
+  background-color: rgb(219, 108, 94);
+  padding: 24px;
+  border-radius: 8px;
+  border: 5px solid rgb(44, 44, 44);
+  box-shadow: 1px 2px 8px rgba(0,0,0,0.3);
+
+
+}
+
+img {
+  width: 200px;
+  height: 200px;
+  border-radius: 100px;
+  margin: -134px 0 0 0;  /*내가*/
+  border: 5px solid rgb(44, 44, 44); /*내가*/
+
+}
+
+h1{
+  font-size: 30px;
+  color: rgb(31, 25, 25);
+}
+
+a{
+  color: rgb(73, 29, 50);
+}
+
+span { /*내가*/
+  color: rgb(66, 2, 2);
+
+}
+
+#todays-challenge {
+  color: rgb(75, 59, 59);
+  font-weight: bold;
+  font-size: 52px;
+}
+
+/* Absolute : 디바이스별 절대적  -> px
+ Realative : 디바이스별 상대적  -> rm %
+
+ 폴백 폰트 : 처음 폰트를 찾고 불러오는데 실패하면 자동으로 글꼴
+
+ 대체 인라인, 비대체인라인
+ */
+
+
+
diff --git a/01_challenges-page/style/full-week.css b/01_challenges-page/style/full-week.css
@@ -0,0 +1,58 @@
+header {
+  margin-bottom: 64px;
+}
+
+h1 {
+  font-size: 48px;
+  color: rgb(71, 62, 62);
+  margin: 0;
+}
+
+#description {
+  margin: 12px;
+}
+/* header p {
+  margin-bottom: 36px;
+} */
+a {
+  padding: 12px 48px;
+  background-color: rgb(167, 1, 78);
+  color: white;
+  border-radius: 4px;
+  border: 1px solid rgb(167, 1, 78);
+  font-size: 24px;
+  display: inline-block;
+  margin: 0;
+}
+a:hover {
+  background-color: rgb(180, 12, 90);
+  text-decoration: none;
+}
+
+ol {
+  list-style: none;
+  width: 500px;
+  margin: 36px auto 0 auto;
+  padding: 0;
+}
+
+li {
+  padding: 16px;
+  box-shadow: 1px 1px 4px rgb(0, 0, 0, 0.2);
+  background-color: rgb(223, 136, 124);
+  border-radius: 6px;
+  margin: 32px;
+}
+
+h2 {
+  color: rgb(78, 13, 5);
+  font-family: "Oswald", sans-serif;
+}
+main p {
+  margin: 12px;
+  color: rgb(71, 29, 22);
+}
+.highlight-goal {
+  background-color: rgb(226, 115, 101);
+}
+
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		https://github.com/academind/100-days-of-web-development