diff --git a/README.md b/README.md index 19b0696..77830ee 100644 --- 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/\354\212\244\355\204\260\353\224\224 1\354\241\260(\354\233\224)/1\354\243\274\354\260\250/\354\262\234\354\204\261\354\234\244.md" "b/\354\212\244\355\204\260\353\224\224 1\354\241\260(\354\233\224)/1\354\243\274\354\260\250/\354\262\234\354\204\261\354\234\244.md" new file mode 100644 index 0000000..af4c3d7 --- /dev/null +++ "b/\354\212\244\355\204\260\353\224\224 1\354\241\260(\354\233\224)/1\354\243\274\354\260\250/\354\262\234\354\204\261\354\234\244.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 웹 페이지 기본 구조와 작성 방법 +''' + + + + + + Study Week 1 2과 + +

HTML CSS JavaScript 스터디

+ + + +
+

개념 정리

+

ko: 한국어 + en: 영어 + 태그와 설명 + meta 웹페이지에 추가 정보 전달 + title 페이지 제목 지정 + script 웹 페이지에 스크립트 추가 + link 웹 페이지에 다른 파일 추가 + style 웹 페이지에 스타일시트 추가 + base 웹 페이지의 기본 경로 지정 +

+
+ + +''' + +Chapter 03 HTML5 기본 태그 + +Chapter 04 HTML5 입력 양식 태그와 구조화 태그 + diff --git "a/\354\212\244\355\204\260\353\224\224 1\354\241\260(\354\233\224)/2\354\243\274\354\260\250/\354\262\234\354\204\261\354\234\244.md" "b/\354\212\244\355\204\260\353\224\224 1\354\241\260(\354\233\224)/2\354\243\274\354\260\250/\354\262\234\354\204\261\354\234\244.md" new file mode 100644 index 0000000..8b13789 --- /dev/null +++ "b/\354\212\244\355\204\260\353\224\224 1\354\241\260(\354\233\224)/2\354\243\274\354\260\250/\354\262\234\354\204\261\354\234\244.md" @@ -0,0 +1 @@ + diff --git "a/\354\212\244\355\204\260\353\224\224 1\354\241\260(\354\233\224)/3\354\243\274\354\260\250/\354\262\234\354\204\261\354\234\244.md" "b/\354\212\244\355\204\260\353\224\224 1\354\241\260(\354\233\224)/3\354\243\274\354\260\250/\354\262\234\354\204\261\354\234\244.md" new file mode 100644 index 0000000..8b13789 --- /dev/null +++ "b/\354\212\244\355\204\260\353\224\224 1\354\241\260(\354\233\224)/3\354\243\274\354\260\250/\354\262\234\354\204\261\354\234\244.md" @@ -0,0 +1 @@ + diff --git "a/\354\212\244\355\204\260\353\224\224 1\354\241\260(\354\233\224)/4\354\243\274\354\260\250/\354\262\234\354\204\261\354\234\244.md" "b/\354\212\244\355\204\260\353\224\224 1\354\241\260(\354\233\224)/4\354\243\274\354\260\250/\354\262\234\354\204\261\354\234\244.md" new file mode 100644 index 0000000..8b13789 --- /dev/null +++ "b/\354\212\244\355\204\260\353\224\224 1\354\241\260(\354\233\224)/4\354\243\274\354\260\250/\354\262\234\354\204\261\354\234\244.md" @@ -0,0 +1 @@ + diff --git "a/\354\212\244\355\204\260\353\224\224 1\354\241\260(\354\233\224)/5\354\243\274\354\260\250/\354\262\234\354\204\261\354\234\244.md" "b/\354\212\244\355\204\260\353\224\224 1\354\241\260(\354\233\224)/5\354\243\274\354\260\250/\354\262\234\354\204\261\354\234\244.md" new file mode 100644 index 0000000..8b13789 --- /dev/null +++ "b/\354\212\244\355\204\260\353\224\224 1\354\241\260(\354\233\224)/5\354\243\274\354\260\250/\354\262\234\354\204\261\354\234\244.md" @@ -0,0 +1 @@ + diff --git "a/\354\212\244\355\204\260\353\224\224 1\354\241\260(\354\233\224)/6\354\243\274\354\260\250/\354\262\234\354\204\261\354\234\244.md" "b/\354\212\244\355\204\260\353\224\224 1\354\241\260(\354\233\224)/6\354\243\274\354\260\250/\354\262\234\354\204\261\354\234\244.md" new file mode 100644 index 0000000..8b13789 --- /dev/null +++ "b/\354\212\244\355\204\260\353\224\224 1\354\241\260(\354\233\224)/6\354\243\274\354\260\250/\354\262\234\354\204\261\354\234\244.md" @@ -0,0 +1 @@ + diff --git "a/\354\212\244\355\204\260\353\224\224 1\354\241\260(\354\233\224)/README.md" "b/\354\212\244\355\204\260\353\224\224 1\354\241\260(\354\233\224)/README.md" new file mode 100644 index 0000000..1d54dd1 --- /dev/null +++ "b/\354\212\244\355\204\260\353\224\224 1\354\241\260(\354\233\224)/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/\354\212\244\355\204\260\353\224\224 2\354\241\260(\354\210\230)/README.md" "b/\354\212\244\355\204\260\353\224\224 2\354\241\260(\354\210\230)/README.md" new file mode 100644 index 0000000..3e62087 --- /dev/null +++ "b/\354\212\244\355\204\260\353\224\224 2\354\241\260(\354\210\230)/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/\354\212\244\355\204\260\353\224\224 2\354\241\260(\354\210\230)/\352\271\200\355\235\254\354\247\200.md/1\354\243\274\354\260\250.md" "b/\354\212\244\355\204\260\353\224\224 2\354\241\260(\354\210\230)/\352\271\200\355\235\254\354\247\200.md/1\354\243\274\354\260\250.md" new file mode 100644 index 0000000..7ca2c39 --- /dev/null +++ "b/\354\212\244\355\204\260\353\224\224 2\354\241\260(\354\210\230)/\352\271\200\355\235\254\354\247\200.md/1\354\243\274\354\260\250.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: 웹 페이지의 기본 경로 지정 + + + + + HTML 1주차 + + + + + + + + + +## ch3 HTML5 기본 태그 +### 글자 태그 +#### 제목 글자(heading) +- h1: 첫 번째로 큰 제목 글자 생성 +- ~ h5을 사용해서 차례대로 큰 제목 글자 생성 +#### 본문 글자 +- P(paragraph): 본문 문단 생성 +- br(break): 줄 바꿈 +- hr(horizontal rule): 수평 줄 삽입 + +#### 앵커 태그 +- a: 하이퍼링크 생성 +- chic 스터디 다음과 같이 사용 + +#### 글자 모양 태그 +- b: 굵은 글자bold +- i: 기울어진 글자italic +- small: 작은 글자 +- sub: 아래 첨자subscript) +- sup: 위 첨자superscript +- ins: 밑줄 글자insert +- del: 취소선이 그어진 글자delete + + +### 목록 태그 +#### 내비게이션 메뉴 생성 시 +- ul: 순서가 없는 목록unordered list +- ol: 순서가 있는 목록ordered list +- li: 목록 요소list item + + +### 테이블 태그 +- table: 표 삽입 +- tr: 표에 행table row 삽입 +- th: 표의 제목 셀table heading 생성 +- td: 표의 일반 셀table data 생성 + +#### 테이블 태그 속성 +##### 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 속성 입력해서 미디어 삽입하기 * +