3차시 수업자료.md

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를 이용해서 파일 업로드하는 방법 학습
  • 어떻게 코딩하고 업로드하는지 전체적인 흐름을 시범

• 자신이 만든 온라인 명함을 웹서버에 업로드 + 공유하기

• 일부러 취약하게 만든 투표 시스템으로 투표
  • 추후 얼마나 취약했었는지 시연