HTML/CSS 클래스 - 1과 분석

소단원 1: 기본 HTML 복습 및 고급 HTML 요소 소개

목적:

• 기본 HTML 태그를 새로 고칩니다.
• 중급 HTML 요소를 도입하여 더욱 기능적인 웹페이지를 구축하세요.

1. HTML 구조 소개

HTML이 태그를 사용하여 웹페이지 콘텐츠를 구성하는 방법에 대한 간략한 설명부터 시작하세요. HTML(HyperText Markup Language)은 웹 페이지를 구성하는 데 사용되고 CSS는 스타일 지정에 사용된다는 점을 강조하세요.

검토할 주요 개념:

• , , : 모든 HTML 문서에는 정의된 구조가 있음을 설명합니다.
  • : 전체 웹페이지를 포함하는 루트 요소입니다.
  • : 제목, CSS 링크, 스크립트 등과 같은 메타 정보가 포함됩니다.
  • : 텍스트, 이미지, 사용자가 상호작용하는 요소 등 눈에 보이는 모든 콘텐츠를 포함합니다.

2. 기본 HTML 태그 요약

• 제목(

  ~

  ):

  제목은 가장 큰 내용(

  )에서 가장 작은 내용(

  )까지 계층적으로 콘텐츠를 구성한다는 점을 설명합니다.

예:

    
Main Heading
    
Sub Heading

• 단락(

  ):

  텍스트 또는 단락 블록을 정의하는 데 사용됩니다.

예:

    
This is a paragraph.

• 앵커(Click here
  • 이미지(): 이미지를 표시하는 데 사용됩니다. 이미지 파일 연결을 위한 src 속성과 접근성을 위한 alt 속성을 설명하세요.

  예:
  

  3. 중간 HTML 요소 소개

  3.1. 양식(, , )

  • 양식은 사용자 입력을 수집하는 데 사용됩니다.

  • 기본 양식 구조:

    • :
      양식 요소의 컨테이너입니다. 작업(양식 데이터가 전송되는 위치) 및 메서드(GET/POST)와 같은 속성을 포함할 수 있습니다.
    • : 입력 요소에 대한 레이블을 정의하고 접근성을 향상시킵니다.
    • : 텍스트, 비밀번호, 체크박스, 라디오 등과 같은 다양한 유형의 입력 필드를 정의합니다.

  텍스트 입력이 포함된 간단한 양식의 예:
  

  Name: Email:

  3.2. 목록(

  ,
  ,
  1. )
  • 순서가 지정되지 않은 목록(
    )
    및 순서가 지정된 목록(
    )
    은 글머리 기호나 번호가 매겨진 목록으로 데이터를 구성하는 데 도움이 됩니다.
  • 목록 항목(
  • )
  목록의 각 항목을 정의합니다.

  순서가 지정되지 않은 목록과 정렬된 목록의 예:
  

  • Item 1
  • Item 2
  1. Step 1
  2. Step 2

  3.3. 테이블(, , , )

  • 테이블을 사용하면 구조화된 데이터를 행과 열에 표시할 수 있습니다.

    • : 테이블의 컨테이너입니다.
      : 테이블의 행을 정의합니다.

      : 테이블의 셀을 정의합니다.

      : 테이블의 헤더 셀을 정의합니다(선택 사항). 간단한 테이블의 예: Name Age John 25 4. 수업 활동 4.1. 활동 요약: 학생들에게 다음을 포함하는 기본 웹페이지를 만들도록 지시하세요. 제목( ) 단락( ) 이미지() 예: Welcome to My Website This is my first webpage. 4.2. 안내 연습: 간단한 양식 만들기: 사용자 입력(이름 및 이메일)을 수집하기 위한 간단한 양식을 만드는 방법을 학생들에게 안내합니다. , 및 을 포함합니다. 4.3. 목록 및 테이블: 학생들에게 자신이 좋아하는 것의 순서가 지정되지 않은 목록( )과 몇 개의 데이터 행(이름, 나이, 좋아하는 색상)이 포함된 간단한 테이블을 만들도록 지시하세요. 예: Reading Coding Traveling Name Age Alice 30 5. 숙제 학생은 다음을 통해 웹페이지를 확장해야 합니다. 체크박스, 라디오 버튼, 제출 버튼과 같은 양식 요소를 추가합니다. 양식을 맞춤설정하여 추가 사용자 정보(예: 성별, 취미)를 수집합니다. 예: Gender: Male Female 6. 추가 팁 학생들에게 W3C 마크업 검증 서비스와 같은 도구를 사용하여 HTML을 검증하도록 권장하세요. 의미론적 HTML의 중요성과 올바른 태그 사용이 접근성 및 SEO에 중요한 이유를 설명합니다. 요약 학생들은 제목, 단락, 이미지, 링크와 같은 기본 HTML 태그를 검토합니다. 중급 HTML 요소인 양식, 목록, 표를 소개합니다. 실습과 숙제를 통해 좀 더 체계적인 웹페이지를 만드는 실무 경험을 쌓을 수 있습니다.