홈

데이터사이언스아카데미(DSA) 비전공자를 위한 웹 프론트엔드 입문 강의 자료입니다.

#강의 개요

이 강의는 HTML / CSS / JavaScript의 기초부터 실무에서 활용 가능한 수준까지를 단계적으로 다룹니다. 일본 ICT 취업을 준비하는 수강생을 대상으로 하되, 한국어로 작성되었으며 누구나 자유롭게 학습에 활용할 수 있습니다.

#학습 로드맵

graph LR
    A[HTML] --> B[CSS]
    B --> C[JavaScript<br/>문법 기초]
    C --> D[객체·배열·ES6]
    D --> E[DOM·이벤트·BOM]
    E --> F[비동기·모듈]

#학습 내용

#HTML

• HTML 기본 다지기 & 텍스트 관련 태그
  웹 동작 원리, HTML 구조, 텍스트·목록·표 태그

• 이미지와 하이퍼링크 & 폼 관련 태그
  <img>, <a>, <form>, <input>의 다양한 타입과 속성

#CSS

• CSS 기초 & 텍스트 관련 스타일
  CSS 적용 방법, 선택자와 우선순위, 폰트와 텍스트 스타일

• 색상과 배경 & CSS 박스 모델
  색상 표현 방식, 배경, 그라데이션, 박스 모델, 여백

• CSS 포지셔닝 & HTML5와 시맨틱 태그
  position, float, z-index, 시맨틱 태그

• HTML5 멀티미디어 & CSS3 선택자 & 플렉스 박스
  <audio>, <video>, 고급 선택자, Flexbox, 미디어 쿼리

#JavaScript

• 소개 & 변수와 데이터 타입
  자바스크립트란, 실행 환경, console, var/let/const, 기본형·참조형 타입

• 연산자 & 문자열 & 제어문
  산술·비교·논리·타입 연산자, 템플릿 리터럴, 조건문, 반복문

• 함수
  함수 정의와 호출, 기본 매개변수, 익명·화살표 함수, 콜백 함수

• 객체 & 배열 & ES6 문법
  객체와 클래스, this, 프로토타입, 배열 메소드(map·filter·reduce), 구조 분해, 스프레드/rest

• 내장 객체 (Built-in Objects)
  Number, Math, Date, JSON, 전역 함수(parseInt·parseFloat·isNaN)

• DOM & 이벤트 & BOM
  요소 선택·변경·생성, 이벤트 처리, 브라우저 객체 모델

• 비동기 처리 & 모듈
  동기 vs 비동기, Promise, async/await, fetch, 모듈 시스템

#이 강의 자료의 특징

• 코드 중심: 모든 개념은 실행 가능한 예시 코드와 함께 제공됩니다.

• 실무 팁 포함: 단순한 문법 설명을 넘어 현장에서 자주 사용되는 패턴과 주의사항을 박스 형태로 강조했습니다.

• 접근성 고려: 스크린 리더, SEO, 시맨틱 마크업 등 모던 웹의 필수 요소를 자연스럽게 다룹니다.

• 검색 가능: 우측 상단 검색창에서 키워드로 빠르게 찾을 수 있습니다.

#라이선스 및 활용

자유롭게 학습에 활용하시고, 오타·오류·개선 제안은 GitHub Issues 또는 Pull Request로 보내주세요.