7주차 회의록 - Sieun1126/Final_projects GitHub Wiki

7주차 회의록

  • 홈페이지 구현을 위해 필요한 부분들 공부

목표

  • HTML의 기본 문법과 구조를 이해하고 간단한 웹페이지 제작.
  • CSS를 이용해 스타일링 기초를 익히기.

일정 및 학습 내용

HTML 기본

HTML 문서 구조

  • <!DOCTYPE>: 문서 유형 선언.
  • <html>: HTML 문서의 루트 요소.
  • <head>: 메타정보, 제목, 스타일, 스크립트를 포함.
  • <body>: 화면에 표시될 콘텐츠를 포함.

시맨틱 태그

  • <header>: 문서나 섹션의 헤더.
  • <footer>: 문서나 섹션의 푸터.
  • <main>: 주요 콘텐츠 영역.
  • <section>: 문서의 주제를 구분하는 섹션.

기본 태그 연습

  • <p>: 단락을 나타냄.
  • <h1>~<h6>: 제목 계층.
  • <ul>, <ol>: 목록 (순서 없는/있는 목록).
  • <img>: 이미지를 표시.
  • <a>: 하이퍼링크 생성.
  • <div>: 블록 요소 컨테이너.
  • <span>: 인라인 요소 컨테이너.

HTML 폼

폼 태그

  • <form>: 사용자 입력을 위한 양식.
  • <input>: 다양한 유형의 사용자 입력 (텍스트, 체크박스, 라디오 등).
  • <textarea>: 여러 줄의 텍스트 입력.
  • <button>: 버튼 생성.
  • <select>: 드롭다운 메뉴.
  • <option>: 드롭다운의 선택 항목.

폼 속성

  • required: 필수 입력 항목 지정.
  • placeholder: 입력 필드에 힌트 텍스트 표시.
  • pattern: 입력 값의 정규 표현식 패턴 지정.

실습

  • 간단한 회원가입 폼 제작: 
    <form>
  <label for="username">Username:</label>
  <input type="text" id="username" placeholder="Enter your name" required>
  
  <label for="email">Email:</label>
  <input type="email" id="email" placeholder="Enter your email" required>
  
  <label for="password">Password:</label>
  <input type="password" id="password" required>
  
  <button type="submit">Sign Up</button>
</form>
⚠️ **GitHub.com Fallback** ⚠️