웹으로 나만의 명함 만들기! 2차시.md

웹으로 나만의 명함 만들기! 2차시

수업 목표

• HTML과 CSS의 기초에 대하여 학습하며 명함 만들기

수업 내용

• 수업 강사: 김화균
• 보조 강사: 전성, 강민우

액션

• 지난시간 수업내용 복습

지난 시간에 배운 HTML 태그들에 대하여 보다 정확하게 설명한다

• HTML 태그들의 옵션 알려주기 (태그 설명하면서 함께 설명하고, class, id는 나중에 설명)

• HTML 태그들을 추가적으로 더 알려준다

  • img
  • p
  • h1,h2,h3,h4,h5,h6
  • ul, ol, li
  • div, span

• HTML 태그들을 알려주면서 CSS를 적용하는 방법에 대하여 알려준다

• 태그들을 하나하나 설명하면서 선택했던 명함디자인의 형상을 갖춰 나간다

액션: 잘 따라오지 못하는 학생에 대한 대응방안

• 수업 전반적으로 뒤쳐질 경우

  • i) 수업이 지루해요: 지루함을 풀어줄 썰 풀어주기
  • ii) 너무 빨라요: 속도를 조금 늦춰서 수업 진행하기
  • iii) 이론은 싫어요: 이론 느낌을 받지 못하도록 실제로 코드를 먼저 배끼고 설명하기

• HTML / CSS / JS 전체 개념설명에서 뒤쳐질 경우

  • i) 각자 필요한 이유를 모르겠어요: HTML 없으면-> 정보를 넣을 수 없음! / CSS 없으면-> 웹페이지가 온통 검은색으로 도배됨! / JS 없으면-> 사용자와 소통할 수 없음! (JS는 필요하지 않다고 생각할 수 도 있지만, 이는 어쩔 수 없다고 생각함 (HTML, CSS도 아직 모르는데 사용자와 소통하는게 문제가 아님!))

• HTML 언어설명에서 뒤쳐질 경우

  • i) 너무 어려워요: 비유하여 셜명하기 (ex: h1태그--> 내가 첫번째 대장 할거야!(=head1 --> h1), li태그 --> 내가 리스트 할거야! (=list -> li))

• CSS 언어설명에서 뒤쳐질 경우

  • i) class와 id가 햇갈려요!: class-> 별명, id->이름으로 비유

• 하고싶은 의욕 없음: 이유 물어보기

• 문제를 잘 못풀 경우: 기초 개념을 물어보고, 기초 개념을 알고 있다면 해설만 자세하게 설명해주고, 기초가 부실하다면 상세한 기초설명 해주기

• 액션: 학생별로 시간 차이가 발생할 경우

  HTML에서 시간차이: 비슷한 역할을 하는 태그들끼리 직접 사용하며 비교해보기

  CSS에서 시간차이: CSS를 활용하여 다양하게 HTML을 가지고 놀기