Frontend Study Log: 프론트엔드 학습 기록

이 저장소는 프론트엔드 개발 학습을 기록하고, 이론 정리 및 실행 가능한 예제 코드를 포함합니다.
HTML, CSS, JavaScript, TypeScript, React 등 프론트엔드 기술에 대한 학습 자료가 단계적으로 추가될 예정입니다.

📌 더 자세한 학습 기록은 아래 노션 링크에서 확인하세요.
👉 FrontEnd TIL 노션 링크

📂 디렉터리 구조

• html/ : HTML 학습 자료 (이론 정리 및 실행 코드 포함)
  • docs : HTML 이론 정리 파일
  • examples : HTML 실행 코드 파일
• css/: (추가 예정) CSS 학습 자료
• javascript/ : (추가 예정) JavaScript 학습 자료
• typescript/ : (추가 예정) TypeScript 학습 자료
• react/ : (추가 예정) React 학습 자료

📘 현재 학습 목차 (HTML)

📄 이론 정리 (docs)

1. HTML 기본 개념
   • HTML 문서의 기본 구조와 주요 태그 설명
2. HTML 요소 구조
   • HTML 요소의 구조와 다양한 태그 예제
3. HTML 주석 활용법
   • HTML에서 주석을 사용하는 방법과 활용 사례
4. HTML 문서 구조
   • HTML 문서의 기본 구조와 주요 태그 설명
5. HTML 글로벌 속성
   • HTML 글로벌 속성의 정의 및 주요 속성 설명
6. HTML 미디어 속성
   • HTML 미디어 속성의 정의 및 주요 속성 설명
7. HTML 입력 폼 속성
   • HTML 입력 폼 속성의 정의 및 주요 속성 설명
8. HTML 텍스트 관련 태그
   • HTML 텍스트 관련 태그 설명
9. HTML 목록 관련 태그
   • HTML 목록 관련 태그 설명
10. HTML 하이퍼 링크 태그
    • HTML 하이퍼 링크 태그 설명
11. HTML 내비게이션 메뉴 태그
    • HTML 내비게이션 메뉴 태그 설명
12. HTML 미디어 태그
    • HTML 미디어 태그 설명

🔗 실행 코드 (examples)

1. HTML 기본 개념 실행 예제
   • HTML 문서의 기본 구조를 보여주는 예제 코드
2. HTML 요소 구조 실행 예제
   • HTML 요소 및 태그 사용 예제 코드
3. HTML 주석 활용 실행 예제
   • HTML 주석 활용 예제 코드
4. HTML 문서 구조 실행 코드
   • HTML 문서의 기본 구조를 보여주는 예제 코드
5. HTML 글로벌 속성 실행 코드
   • HTML 글로벌 속성을 다양한 태그에 적용한 예제 코드
6. HTML 미디어 속성 실행 코드
   • HTML 미디어 속성을 다양한 태그에 적용한 예제 코드
7. HTML 입력 폼 속성 실행 코드
   • HTML 입력 폼 속성을 다양한 태그에 적용한 예제 코드
8. HTML 텍스트 관련 태그 실행 코드
   • HTML 텍스트 관련 태그를 사용한 예제 코드
9. HTML 목록 관련 태그 실행 코드
   • HTML 목록 관련 태그를 사용한 예제 코드
10. HTML 하이퍼 링크 태그 실행 코드
    • HTML 하이퍼 링크 태그를 사용한 예제 코드
11. HTML 내비게이션 메뉴 태그 실행 코드
    • HTML 내비게이션 메뉴 태그를 사용한 예제 코드
12. HTML 미디어 태그 실행 코드
    • HTML 미디어 태그를 사용한 예제 코드

🔍 사용 방법

1. 이론 정리 확인:

   • 각 기술의 docs 폴더에서 학습 내용을 정리한 파일을 확인하세요.

2. 코드 실행:

   • 각 기술의 examples 폴더에 포함된 .html 또는 관련 파일을 실행해 학습 결과를 확인하세요.

📌 앞으로 추가될 내용

• CSS : 스타일링 기법과 예제
• JavaScript : 동적 웹 페이지를 만드는 핵심 로직
• TypeScript : 타입 안전성을 추가한 자바스크립트
• React : 컴포넌트 기반 프론트엔드 라이브러리

📌 참고 자료

• MDN Web Docs
• W3C HTML & CSS