HTMl/CSS/JS 커리큘럼

HTML: 웹 구조화

---

HTML 기본

• 요소, 태그, 속성 및 값
• Doctype 및 메타데이터
• Root, head, body, & title
• 중첩 요소
• 특수 문자
• HTML 주석
  
  

문서 구조

• div 및 span
• Headers, nav, article, section, aside, & footer
  
  

텍스트 요소 및 서식

• Headings, paragraphs, em, & strong
  
  
  

멀티미디어 및 임베딩

• 이미지
• 오디오 및 비디오
• 인라인 프레임
• 반응형 이미지
  
  

목록 및 테이블

LIinks

• 상대 및 절대 경로
• 이메일 링크
• 새 창에서 열기
• Anchor tags
  
  

Forms

• Input types
• Form, fieldset, legend & label
• Placeholder
  
  

Accessibility

• Semantic markup
• Alt text
• Tab index
• ARIA attributes

 

 

CSS: 웹 스타일 지정

---

CSS 기초

• Selectors, declarations, properties, & values
• Embedding CSS in HTML
• Cascade & inheritance
• Selectors & specificity

Colors

• Color & background color
• Gradients
• Background images
  
  

Typography

• Font size, family, style, variant, & weight
• Line height
• Text decoration & transform
• Letter spacing
  
  

Box model

• Display
• Width & height
• Margin & padding
• Border & border radius
• Box sizing
  
  

Layout & positioning

• Position
• Float
• Flexbox : https://11001.tistory.com/157
• Grid : https://11001.tistory.com/159

Transforms

Transitions & animations

Media queries

Vaiables

JavaScript: 웹 스크립팅

---

자바스크립트 기본

• 변수 및 할당
• 부울 및 비교
• 숫자, 연산자 및 수학
• 문자열
• 배열

조건문

• if/else
• 스위치
• break/continue
• 삼항 연산자
  
  

반복문

• For, while, do/while
  
  

Functions 함수

• Arguments & return values
• Default & rest parameters
• Scope
• Functional programming

Obejcts 객체

• Properties & methods
• 구조 분해 할당
• 객체 지향 프로그래밍
• 프로토타입 & 상속
• 클래스 & 생성자
• JSON

 

이벤트

비동기 자바스크립트

• Timeouts 및 intervals
• Promises
• Async & await
  
  

Browser APIs

• DOM 조작
• AJAX & fetch
• Canvas
• Video & audio APIs
• Canvas

 

출처: https://codepip.com/curriculum/