Update css practice.

yeochaeeon · Jun 26, 2024 · 989420a · 989420a
1 parent 7d11143
commit 989420a
Show file tree

Hide file tree

Showing 17 changed files with 353 additions and 112 deletions.
diff --git a/02_html/02_image/css.png → 02_html/img/css.png b/02_html/02_image/css.png → 02_html/img/css.png
diff --git a/02_html/02_image/html.png → 02_html/img/html.png b/02_html/02_image/html.png → 02_html/img/html.png
diff --git a/02_html/02_image/js.png → 02_html/img/js.png b/02_html/02_image/js.png → 02_html/img/js.png
diff --git a/02_html/02_image/react.png → 02_html/img/react.png b/02_html/02_image/react.png → 02_html/img/react.png
diff --git a/02_html/02_image/ui09.jpg → 02_html/img/ui09.jpg b/02_html/02_image/ui09.jpg → 02_html/img/ui09.jpg
diff --git a/02_html/index.html b/02_html/index.html
@@ -32,7 +32,7 @@ <h1>프론트엔드 FrontEnd</h1>
     <div id="divHtml">
       <h2>HTML</h2>
       <!-- img 는 src속성을 가져야한다 -->
-      <img src="./02_image/html.png" />
+      <img src="./img/html.png" />
       <!-- 절대경로를 절대 쓰면 안됨 ㅋㅋ -->
       <p>
         HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소로,
@@ -42,7 +42,7 @@ <h2>HTML</h2>
 
     <div id="divCss">
       <h2>CSS</h2>
-      <img src="./02_image/css.png" />
+      <img src="./img/css.png" />
       <p>
         Cascading Style Sheets(CSS)는 HTML이나 XML(XML의 방언인 SVG, XHTML
         포함)로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어
@@ -51,7 +51,7 @@ <h2>CSS</h2>
 
     <div id="divJs">
       <h2>JavaScript</h2>
-      <img src="./02_image/js.png" />
+      <img src="./img/js.png" />
       <p>
         웹 페이지를 위한 스크립트 언어로 가벼운, 인터프리터 혹은 just-in-time
         컴파일 프로그래밍 언어로, 일급 함수를 지원
@@ -60,7 +60,7 @@ <h2>JavaScript</h2>
 
     <div id="divReact">
       <h2>React</h2>
-      <img src="./02_image/react.png" />
+      <img src="./img/react.png" />
       <p>사용자 인터페이스를 만들기 위한 JavaScript 라이브러리</p>
     </div>
   </body>

diff --git a/03_Css/02.txt b/03_Css/02.txt
diff --git a/03_Css/03.css b/03_Css/03.css
@@ -0,0 +1,102 @@
+* {
+  margin: 0px;
+  padding: 0px;
+}
+/* 태그 selector */
+header {
+  background-color: rgb(255, 255, 255);
+}
+h2 {
+  color: blue;
+}
+/* .으로 시작하면 class를 찾는거  */
+/* class selector */
+.c1 {
+  background-color: rgb(244, 244, 221);
+}
+.c2 {
+  background-color: rgb(239, 216, 216);
+}
+/* id 속성을 찾고싶다면 '#'을사용 */
+/* class 속성과 id 속성이 함께 적용되었을 때에는 id속성이 우선으로 적용된다 */
+
+/* id selector */
+#d1 {
+  background-color: rgb(213, 232, 176);
+}
+/* 부모자식관계 */
+#d1 > h2 {
+  color: green;
+}
+header > ul > li {
+  color: green;
+}
+/* 자손관계 selector */
+header li {
+  color: red;
+  list-style: none;
+  margin: 5px;
+}
+/* 속성 selector */
+img[alt="html"] {
+  width: 100px;
+  height: 100px;
+}
+
+img[alt="css"] {
+  width: 100px;
+  height: 100px;
+}
+/* 가상 class selector */
+a {
+  text-decoration: none;
+  color: black;
+}
+
+a:hover {
+  padding: 3px;
+  background-color: rgb(48, 145, 112);
+  color: white;
+}
+article {
+  border: 5px dashed red;
+
+  /* 박스의 바깥영역 : margin */
+  /* 4개가 각각 '위'에서부터 시계방향으로 돈다  */
+  margin: 20px;
+
+  /* 박스의 안영역 : padding */
+  /* 2개면 각각 '위아래' , '양옆' */
+  padding: 10px 20px;
+}
+header {
+  display: flex;
+  height: 200px;
+
+  /* 가로방향 */
+  justify-content: space-between;
+
+  padding: 10px;
+
+  /* 세로방향 */
+  align-items: start;
+}
+div,
+ul {
+  border: 2px, solid, green;
+  margin: 10px;
+  padding: 20px;
+  display: flex;
+}
+/* 미디어쿼리 */
+@media screen and (min-width: 1024px) {
+  body {
+    background-color: darkkhaki;
+  }
+  header {
+    background-color: bisque;
+  }
+}
+img {
+  border-radius: 50px;
+}
diff --git a/03_Css/defaultTag.html b/03_Css/defaultTag.html
diff --git a/03_Css/02_image/css.png → 03_Css/img/css.png b/03_Css/02_image/css.png → 03_Css/img/css.png
diff --git a/03_Css/02_image/html.png → 03_Css/img/html.png b/03_Css/02_image/html.png → 03_Css/img/html.png
diff --git a/03_Css/02_image/js.png → 03_Css/img/js.png b/03_Css/02_image/js.png → 03_Css/img/js.png
diff --git a/03_Css/02_image/react.png → 03_Css/img/react.png b/03_Css/02_image/react.png → 03_Css/img/react.png
diff --git a/03_Css/02_image/ui09.jpg → 03_Css/img/ui09.jpg b/03_Css/02_image/ui09.jpg → 03_Css/img/ui09.jpg
diff --git a/03_Css/index.html b/03_Css/index.html
@@ -3,65 +3,83 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>HTML기초</title>
+    <title>CSS 기초</title>
+    <!-- 내부스타일 
+    <style>
+      section {
+        background-color: lightblue;
+        color: blue;
+      }
+    </style> -->
+    <!-- 외부 스타일 -->
+    <link rel="stylesheet" type="text/css" href="./03.css" />
   </head>
   <body>
-    mylogo
-    <!-- vscode 주석 단축키 == 'ctrl + /' -->
-    <ul>
-      <!-- 메뉴목록 -->
-      <!-- ul 안에는 li가 들어가야함 -->
-      <li><a href="#divHtml">HTML</a></li>
-      <li><a href="#divCss">CSS</a></li>
-      <li><a href="#divJs">JavaScript</a></li>
-      <li><a href="#divReact">React</a></li>
-      <li><a href="https://www.facebook.com/">Facebook</a></li>
-      <li><a href="https://www.instagram.com/">Instagram</a></li>
-    </ul>
+    <header>
+      <div>소프트웨어 융합기초</div>
+      <!-- vscode 주석 단축키 == 'ctrl + /' -->
+      <ul>
+        <!-- 메뉴목록 -->
+        <!-- ul 안에는 li가 들어가야함 -->
+        <li><a href="#d1">HTML</a></li>
+        <li><a href="#d2">CSS</a></li>
+        <li><a href="#d3">JavaScript</a></li>
+        <li><a href="#d4">React</a></li>
+        <li>Facebook</li>
+        <li>Instagram</li>
+      </ul>
+    </header>
+    <main>
+      <!-- 인라인 스타일  -->
+      <!-- <article style="background-color: beige; color: brown"> -->
+      <article>
+        <h1>프론트엔드 FrontEnd</h1>
+        <p>
+          웹에서 사용자에게 시각적으로 보여지는 부분을 의미한다.
+          프론트엔드쪽에서는 주로 HTML, CSS, 자바스크립트가 쓰이며, 요즘은
+          페이스북에서 개발한 자바스크립트에서 파생된 싱글 페이지 애플리케이션
+          형태의 리액트가 많이 사용된다.
+        </p>
+      </article>
+      <section id="d1" class="c1">
+        <h2>HTML</h2>
+        <!-- img 는 src속성을 가져야한다 -->
+        <img src="./img/html.png" alt="html" />
+        <!-- 절대경로를 절대 쓰면 안됨 ㅋㅋ -->
+        <p>
+          HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성
+          요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용
+        </p>
+      </section>
 
-    <div>
-      <h1>프론트엔드 FrontEnd</h1>
-      <p>
-        웹에서 사용자에게 시각적으로 보여지는 부분을 의미한다.
-        프론트엔드쪽에서는 주로 HTML, CSS, 자바스크립트가 쓰이며, 요즘은
-        페이스북에서 개발한 자바스크립트에서 파생된 싱글 페이지 애플리케이션
-        형태의 리액트가 많이 사용된다.
-      </p>
-    </div>
+      <section id="d2" class="c2">
+        <h2>CSS</h2>
+        <img src="./img/css.png" alt="css" />
+        <p>
+          Cascading Style Sheets(CSS)는 HTML이나 XML(XML의 방언인 SVG, XHTML
+          포함)로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어
+        </p>
+      </section>
 
-    <div id="divHtml">
-      <h2>HTML</h2>
-      <!-- img 는 src속성을 가져야한다 -->
-      <img src="./02_image/html.png" />
-      <!-- 절대경로를 절대 쓰면 안됨 ㅋㅋ -->
-      <p>
-        HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소로,
-        웹 콘텐츠의 의미와 구조를 정의할 때 사용
-      </p>
-    </div>
+      <section id="d3" class="c1">
+        <h2>JavaScript</h2>
+        <img src="./img/js.png" alt="js" />
+        <p>
+          웹 페이지를 위한 스크립트 언어로 가벼운, 인터프리터 혹은 just-in-time
+          컴파일 프로그래밍 언어로, 일급 함수를 지원
+        </p>
+      </section>
 
-    <div id="divCss">
-      <h2>CSS</h2>
-      <img src="./02_image/css.png" />
-      <p>
-        Cascading Style Sheets(CSS)는 HTML이나 XML(XML의 방언인 SVG, XHTML
-        포함)로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어
-      </p>
-    </div>
-
-    <div id="divJs">
-      <h2>JavaScript</h2>
-      <img src="./02_image/js.png" />
-      <p>
-        웹 페이지를 위한 스크립트 언어로 가벼운, 인터프리터 혹은 just-in-time
-        컴파일 프로그래밍 언어로, 일급 함수를 지원
-      </p>
-    </div>
-
-    <div id="divReact">
-      <h2>React</h2>
-      <img src="./02_image/react.png" />
-      <p>사용자 인터페이스를 만들기 위한 JavaScript 라이브러리</p>
-    </div>
+      <section id="d4" class="c2">
+        <h2>React</h2>
+        <p>
+          <img src="./img/react.png" alt="react" />
+        </p>
+        <p>사용자 인터페이스를 만들기 위한 JavaScript 라이브러리</p>
+      </section>
+    </main>
+    <footer>
+      <p></p>
+    </footer>
   </body>
 </html>