2026년 웹 프로그래밍 튜터링 자료

이 리포지토리는 EL 스터디의 2026년 웹 프로그래밍 튜터링 자료를 담고 있습니다. HTML, CSS 기초부터 실습 예제, 과제, 그리고 미니 프로젝트까지 포함되어 있습니다.

폴더 구조

• 01week/: HTML 태그 종합 예제 및 튜터링 1주차 자료

  • 웹 태그 설명.html: 다양한 HTML 태그들의 사용 예제와 설명
  • 튜터링1주차예제.html: 1주차 튜터링 실습 파일

• 02week/: CSS 포지셔닝 및 레이아웃 예제

  • absolute.html, relative.html, fixed.html, sticky.html: CSS 포지셔닝 속성 예제
  • float.html, clear.html: 플로팅 및 클리어 예제
  • border.html, z-index.html: 보더 스타일링과 z-index 예제
  • 기타: 인라인/블록 요소, 가시성 등 CSS 기초 예제

• 03week/: 표 CSS 연습 및 리스트 스타일 예제

  • 예제1.html, 표css연습.html: 테이블 스타일링 예제
  • list_style.html, list_style_type.html: 리스트 스타일 예제
  • menu.html: 메뉴 구현 예제

• 04week/: CSS 애니메이션, 트랜지션, 트랜스폼 예제

  • animation.html: CSS 애니메이션 예제
  • transition.html: 트랜지션 효과 예제
  • transform.html: 트랜스폼 속성 예제

• 07week_assignment/: 7주차 과제 파일들

  • 과제2css.css, 과제3.html: CSS 과제 관련 파일들

• 10week_assignment/: 기말 대비 실습 및 퀴즈 파일들

  • 기말대비실습.html, 기말대비실습2.html: 기말 대비 실습
  • quiz-1 기본.html, quiz-2 기본.html 등: 퀴즈 파일들

• 11week_assignment/: 11주차 과제 파일들

  • 과제1.html, 과제2.html: 최종 과제 파일들

• mini_project/: 쇼핑몰 미니 프로젝트

  • htmlFile/: HTML 파일들 (메인 페이지, 상품 페이지, 장바구니, 로그인 등)
  • CSSFile/: CSS 스타일 파일들
  • ImageFile/: 이미지 파일들 (로고, 상품 사진 등)
  • FontFile/: 폰트 파일들

사용 방법

각 HTML 파일은 웹 브라우저에서 직접 열어서 확인할 수 있습니다. 예제들은 웹 개발 기초를 학습하기 위한 목적으로 작성되었으며, HTML 태그 사용법부터 CSS 스타일링, 레이아웃 구성까지 다루고 있습니다.

미니 프로젝트

mini_project 폴더에는 간단한 쇼핑몰 웹사이트가 포함되어 있습니다. DMUF 브랜드의 의류 쇼핑몰을 모티브로 하여 메인 페이지, 상품 상세 페이지, 장바구니, 결제 페이지, 로그인/회원가입 페이지 등을 구현한 예제입니다. 실제 웹 개발 프로젝트의 구조를 이해하는 데 도움이 됩니다.

기여

이 자료는 EL 스터디의 튜터링을 위해 작성되었습니다. 개선사항이나 추가 예제가 있으시면 이슈나 풀 리퀘스트를 통해 기여해 주세요.