3chasi su-up commit

Author: ch4n3-yoon

3차시 수업자료.md

@@ -0,0 +1,107 @@
+# 3차시 수업자료 초안
+
+## 수업 목표
+
+- 2차시에 배웠던 기본적인 태그를 응용할 줄 안다.
+- HTML에서 ```id```와 
+- CSS란 무엇인지 알고, CSS로 배경색을 지정하거나 Text Decoration을 적용할 줄 안다.
+- HTML과 CSS를 이용해서 자신의 온라인 명함을 만들 줄 안다.
+
+## 수업 순서
+
+1. 2차시 수업 복습
+2. 2차시에 배웠던 HTML 태그 외의 태그 학습
+3. CSS란 무엇인지 학습
+   - CSS 를 적용한 페이지와 CSS를 적용하지 않은 페이지를 동시에 비교하며 어떤 것인지 유추해보기
+   - 가장 기본적인 텍스트 데코레이션 CSS 코드 배우기
+4. HTML로 자신의 명함을 만들어보기
+5. **Dothme**을 이용하여 실제 웹서버에 자신의 온라인 명함 올려 공유하기
+
+
+
+## 교육 일정 소개
+
+### 2차시 수업 복습
+
+2차시에 배웠던 HTML tag 복습
+
+- p, pre, textarea 등 텍스트를 다루는 태그
+- img 이미지를 불러오는 태그
+- br, marquee 등 여러가지 기능을 하는 태그
+
+
+
+### 2차시에 배웠던 태그 외의 다른 태그 학습
+
+- fieldset, legend 
+- table, caption, tr, td
+- form, input
+
+- *id와 class가 무엇인지 학습하기*
+
+  - id는 ```#```을 사용하여 정의함
+
+  - class는 ```.```을 사용하여 정의함
+
+  - 공통점 : 태그에 특정성을 부여할 수 있다. 
+
+    * 예시 : 
+
+      | Tags | id, class |
+      | ---- | --------- |
+      | 생물 | 동물 이름 |
+
+      ***(예리한  비유가 떠오르지 않습니다. 피드백에 추천해주시면 감사하겠습니다.)***
+
+  - 차이점 : ```id```는 한 페이지당 하나의 id만 사용할 수 있지만 
+
+    ​		```class```는 여러 개의 tag에 지정할 수 있음
+
+    * 예시 : 
+
+      | class | id           |
+      | ----- | ------------ |
+      | 이름  | 주민등록번호 |
+
+### CSS란 무엇인지 학습
+
+- 헬렌들의 호기심 유발 : 
+
+  CSS 를 적용한 페이지와 CSS를 적용하지 않은 페이지를 동시에 비교하며 어떤 것인지 유추해보기
+
+- 기본적인 Text Decoration을 위한 CSS 코드 학습
+  * font-family, font-weigh, font-strech 등의 텍스트 데코레이션 코드 배우기
+  * ```w3schools.com```을 이용해서 CSS를 혼자 검색하고 적용하는 방법 배우기
+
+
+
+### 설리번배 CSS 한석봉대회
+
+- ```CSS란 무엇인지 학습```하는 단계에서 찾은 재미있는 Decoration 등을 이용해 개성있는 서체를 겨루는 간이대회
+- 적어도 **3개 이상**의 CSS 코드를 사용해야함.
+
+
+
+### 설리번배 CSS 명함만들기 대회
+
+* 2차시에 배운 태그들과 3차시에 배운 태그 + CSS 코드를 사용해서 온라인 명함만들기
+
+- 기본 요구사항: 
+
+  1. ```<img>``` 태그를 사용하여 자신의 프로필 사진 적용하기
+
+  2. ```<a>``` 태그를 사용해서 자신의 블로그 링크하기
+
+  3. ``CSS`` 를 적용해 자신의 이름을 개성있게 꾸미기
+
+- 추후 웹프로그래밍 개발을 위해 웹서버에 자신이 만든 파일을 어떻게 업로드하는지 학습
+  * ```Dothome`` 무료 호스팅 서버를 이용해서 웹서버 설정
+  * ```FTP```를 이용해서 파일 업로드하는 방법 학습
+  * 어떻게 코딩하고 업로드하는지 전체적인 흐름을 시범
+- 자신이 만든 온라인 명함을 웹서버에 업로드 + 공유하기
+
+* 일부러 취약하게 만든 투표 시스템으로 투표
+  * 추후 얼마나 취약했었는지 시연
+
+
+