heexji · heexji · Jan 11, 2024 · Jan 11, 2024 · Jan 11, 2024 · Jan 11, 2024
diff --git a/README.md b/README.md
@@ -1,28 +1,42 @@
-	# CHIC_24_HTML_CSS_JavaScript-study
-24년도 겨울방학 CHIC HTML-CSS-JavaScript 스터디
-
-#CHIC STUDY
-
-(1) 1/8 - OT
-	스터디 진행 방식 회의
-
-(2) 1/15 - HTML (1) 
-	chapter 1, 2, 3, 4 학습
-
-(3) 1/22 - HTML (2) & CSS (1)
-	학습 검토 후 HTML을 활용한 파일 제작 실습, 5, 6, 7, 8 예습
-
-(4) 1/29 - CSS (2) 
-	학습 검토 후 HTML과 CSS를 활용한 페이지 제작 실습
-
-(5) 2/5 - JavaScript (1)
-	chapter 9, 10, 11, 12 학습
-
-(6) 2/12 (설날 대체 공휴일) - JavaScript (2)
-	학습 검토 및 프로젝트 진행 회의
-
-(7) 2/19 Project (1)
-	프로젝트 진행
-
-(8) 2/26 Project (2)
-	프로젝트 마무리 및 회고
+# 24년도 겨울방학 CHIC HTML-CSS-JavaScript 스터디
+
+## 스터디 1조 (월요일 16시 분반)
+**스터디장: 천성윤**
+
+ 김가연, 이은강, 전서연, **천성윤**, 김태민
+
+
+## 스터디 2조 (수요일 16시 분반)
+**스터디장: 정송희**
+
+ 김희연, 김희지, **정송희**, 이재근, 정유빈
+
+ # 교재 HTML5 웹프로그래밍 입문
+단원 구성
+Chapter 01 웹 개요와 실습 환경 구축
+
+Chapter 02 웹 페이지 기본 구조와 작성 방법
+
+Chapter 03 HTML5 기본 태그
+
+Chapter 04 HTML5 입력 양식 태그와 구조화 태그
+
+Chapter 05 CSS3 기초: 선택자와 단위
+
+Chapter 06 CSS3 속성
+
+Chapter 07 다양한 레이아웃의 구성과 기능
+
+Chapter 08 반응형 웹
+
+Chapter 09 자바스크립트 기본 문법
+
+Chapter 10 문서 객체 모델
+
+Chapter 11 jQuery 라이브러리
+
+Chapter 12 자바스크립트와 jQuery 라이브러리 응용
+
+chapter 13 프로젝트: 모바일 페이지 제작
+
+chapter 13 프로젝트: 핀터레스트 스타일의 웹페이지 제작
diff --git a/스터디 1조(월)/1주차/천성윤.md b/스터디 1조(월)/1주차/천성윤.md
@@ -0,0 +1,74 @@
+# 교재 HTML5 웹프로그래밍 입문
+단원 구성
+Chapter 01 웹 개요와 실습 환경 구축
+
+Chapter 02 웹 페이지 기본 구조와 작성 방법
+
+Chapter 03 HTML5 기본 태그
+
+Chapter 04 HTML5 입력 양식 태그와 구조화 태그
+
+Chapter 05 CSS3 기초: 선택자와 단위
+
+Chapter 06 CSS3 속성
+
+Chapter 07 다양한 레이아웃의 구성과 기능
+
+Chapter 08 반응형 웹
+
+Chapter 09 자바스크립트 기본 문법
+
+Chapter 10 문서 객체 모델
+
+Chapter 11 jQuery 라이브러리
+
+Chapter 12 자바스크립트와 jQuery 라이브러리 응용
+
+chapter 13 프로젝트: 모바일 페이지 제작
+
+chapter 14 프로젝트: 핀터레스트 스타일의 웹페이지 제작
+
+## 1주차 공부
+Chapter 01 웹 개요와 실습 환경 구축
+
+Chapter 02 웹 페이지 기본 구조와 작성 방법
+'''
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Study Week 1 2과</title>
+  <style>
+    h1 {
+      color: white;
+    background: rgb(94, 94, 94);
+  }
+  </style>
+  <h1>HTML CSS JavaScript 스터디 </h1>
+  </head>
+<body>
+  <script>
+    alert('이것이 바로 alert 경고창!');
+  </script>
+  <div>
+    <h2>개념 정리</h2>
+    <p>ko: 한국어 
+      en: 영어
+      태그와 설명
+      meta 웹페이지에 추가 정보 전달
+      title 페이지 제목 지정
+      script 웹 페이지에 스크립트 추가
+      link 웹 페이지에 다른 파일 추가
+      style 웹 페이지에 스타일시트 추가
+      base 웹 페이지의 기본 경로 지정
+    </p>
+  </div>
+</body>
+</html>
+'''
+
+Chapter 03 HTML5 기본 태그
+
+Chapter 04 HTML5 입력 양식 태그와 구조화 태그
+
diff --git a/스터디 1조(월)/2주차/천성윤.md b/스터디 1조(월)/2주차/천성윤.md
@@ -0,0 +1 @@
+
diff --git a/스터디 1조(월)/3주차/천성윤.md b/스터디 1조(월)/3주차/천성윤.md
@@ -0,0 +1 @@
+
diff --git a/스터디 1조(월)/4주차/천성윤.md b/스터디 1조(월)/4주차/천성윤.md
@@ -0,0 +1 @@
+
diff --git a/스터디 1조(월)/5주차/천성윤.md b/스터디 1조(월)/5주차/천성윤.md
@@ -0,0 +1 @@
+
diff --git a/스터디 1조(월)/6주차/천성윤.md b/스터디 1조(월)/6주차/천성윤.md
@@ -0,0 +1 @@
+
diff --git a/스터디 1조(월)/README.md b/스터디 1조(월)/README.md
@@ -0,0 +1,79 @@
+# 스터디 일정 계획
+
+(1) 1/8 - OT
+
+	스터디 진행 방식 회의
+
+
+(2) 1/15 - HTML (1) 
+
+	chapter 1, 2, 3, 4 학습
+
+
+(3) 1/22 - HTML (2) & CSS (1)
+
+	학습 검토 후 HTML을 활용한 파일 제작 실습, 5, 6, 7, 8 예습
+
+
+(4) 1/29 - CSS (2) 
+
+	학습 검토 후 HTML과 CSS를 활용한 페이지 제작 실습
+
+
+(5) 2/5 - JavaScript (1)
+
+	chapter 9, 10, 11, 12 학습
+
+
+(6) 2/12 (설날 대체 공휴일) - JavaScript (2)
+
+	학습 검토 및 프로젝트 진행 회의
+
+
+(7) 2/19 Project (1)
+
+	프로젝트 진행
+
+
+(8) 2/26 Project (2)
+
+	프로젝트 마무리 및 회고
+
+
+# 수정 참고 사항
+각 주차별로 "이름.md"파일 생성 후에 본인이 공부한 내용을 요약(정리)하시면 됩니다.
+
+
+## 담당 챕터
+3 - HTML5 기본 태그 (전서연)
+
+
+4 - HTML5 입력 양식 태그와 구조화 태그 (이은강)
+
+
+5 - CSS3 기초: 선택자와 단위 (김가연)
+
+
+6 - CSS3 속성 (김태민)
+
+
+7 - 다양한 레이아웃의 구성과 기능 (전서연)
+
+
+8 - 반응형 웹 (천성윤)
+
+
+9 - 자바스크립트 기본 문법 (이은강)
+
+
+10 - 문서 객체 모델 (김가연)
+
+
+11 - jQuery 라이브러리 (천성윤)
+
+
+12 자바스크립트와 jQuery 라이브러리 응용 (김태민)
+
+
+프로젝트 최종 목표: 새로운 홈페이지 만들기
+
diff --git a/스터디 2조(수)/README.md b/스터디 2조(수)/README.md
@@ -0,0 +1,37 @@
+# 스터디 일정 계획
+
+1주차 - 1/10  
+
+	교재 Chapter2, 3 학습 및 스터디 진행방식 회의
+
+2주차 - 1/17
+
+	교재 Chapter 4, 5, 6 학습 후 질의 응답
+
+3주차 - 1/24
+
+	교재 Chapter 7, 8, 9 학습 후 질의 응답
+
+4주차 - 1/31
+
+	교재 Chapter 10, 11, 12 학습 후 질의 응답
+
+5주차 - 2/7
+
+	각자 원하는 페이지 만드는 프로젝트 진행(Chapter13,14참고하여)
+
+6주차 - 2/14
+
+	프로젝트 진행
+
+7주차 - 2/21
+
+	프로젝트 진행
+
+8주차 - 2/28
+
+	프로젝트 마무리
+
+
+
+
diff --git a/스터디 2조(수)/김희지.md/1주차.md b/스터디 2조(수)/김희지.md/1주차.md
@@ -0,0 +1,107 @@
+# 📍**1주차 (chapter2, 3)**
+
+## ch2 태그와 속성
+### html 태그에서 lang 속성
+- ko: 한국어
+- en: 영어
+- ja: 일본어
+- ru: 러시아어
+- zh: 중국어
+- de: 독일어
+
+### 내용을 가질 수 없는 요소
+- img 태그
+- br 태그
+- hr 태그 
+
+### head 태그 내부에 넣을 수 있는 태그
+-  meta: 웹 페이지에 추가 정보 전달
+-  title: 페이지 제목 지정
+-  script: 스크립트 추가
+-  link: 다른 파일 추가
+-  style: 스타일시트 추가
+-  base: 웹 페이지의 기본 경로 지정
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>HTML 1주차</title>
+    <style>
+      h1{
+        color: white;
+        background: black;
+        }
+    </style>
+  </head>
+  <body>
+    <!-- 첫 실습 코드 부분 -->
+  </body>
+</html>
+
+
+
+## ch3 HTML5 기본 태그
+### 글자 태그
+#### 제목 글자(heading)
+- h1: 첫 번째로 큰 제목 글자 생성
+- ~ h5을 사용해서 차례대로 큰 제목 글자 생성
+#### 본문 글자
+- P(paragraph): 본문 문단 생성
+- br(break): 줄 바꿈
+- hr(horizontal rule): 수평 줄 삽입
+
+#### 앵커 태그
+- a: 하이퍼링크 생성
+- <a href="http://github.com">chic 스터디</a> 다음과 같이 사용
+
+#### 글자 모양 태그
+- b: 굵은 글자<sub>bold</sub>
+- i: 기울어진 글자<sub>italic</sub>
+- small: 작은 글자
+- sub: 아래 첨자<sub>subscript)</sub>
+- sup: 위 첨자<sub>superscript</sub>
+- ins: 밑줄 글자<sub>insert</sub>
+- del: 취소선이 그어진 글자<sub>delete</sub>
+
+
+### 목록 태그
+#### 내비게이션 메뉴 생성 시
+- ul: 순서가 없는 목록<sub>unordered list</sub>
+- ol: 순서가 있는 목록<sub>ordered list</sub>
+- li: 목록 요소<sub>list item</sub>
+
+
+### 테이블 태그
+- table: 표 삽입
+- tr: 표에 행<sub>table row</sub> 삽입
+- th: 표의 제목 셀<sub>table heading</sub> 생성
+- td: 표의 일반 셀<sub>table data</sub> 생성
+
+#### 테이블 태그 속성
+##### table
+- border: 표의 테두리 두께 지정
+- table border="1"과 같이 사용
+
+##### th, td
+- colspan: 셀의 너비 지정
+- rowspan: 셀의 높이 지정
+
+### 미디어 태그
+#### img 태그
+- src
+- alt: 이미지가 없을 때 나오는 글자 지정
+- width
+- height
+
+#### audio, video 태그
+- src
+- preload: 음악, 비디오 준비 중일 때 데이터 모두 불러올지 여부 지정
+- autoplay: 자동 재생 여부 지정
+- loop: 반복 여부 지정
+- controls: 재생 도구 출력 여부 지정
+
+#### video 태그
+- width
+- height
+##### * type 속성 입력해서 미디어 삽입하기 *
+