안내
확인
U
회원관리
로그인
가입
찾기
회원아이디
패스워드
로그인유지
회원아이디
이름
이메일
휴대폰번호
패스워드
패스워드 재입력
회원이용약관 및 개인정보 취급방침에 동의 합니다
회원이용약관 보기
개인정보처리방침 보기
본인 이름 입력
회원가입시 이메일 입력
HTML,CSS,JavaScript기초가이드-이 책 한 권이면 끝!
4. HTML 요소와 속성 개념
와이웨이브이퍼블리싱
|
박빈
|
2025-02-13
11
읽음
0
0
0
9 / 166 목차보기
이전
9 / 166 목차
다음
로그인
회원가입
와
와이드웨이브
저자 소개
서평
출판사 서평
캔버스 1부: HTML (웹 페이지의 구조)
Chapter 1: 웹 개발 개요 및 HTML 기본
1. 웹의 역사와 HTTP 프로토콜
2. 웹 브라우저와 HTML의 역할
3. HTML 문서의 기본 구조
4. HTML 요소와 속성 개념
5. 개발 환경 구축
설치 및 실행 방법:
Chapter 2: HTML 텍스트 및 멀티미디어 요소
1. 텍스트 요소
2. 목록과 표
3. 이미지 및 오디오/비디오 삽입
4. 시맨틱 태그
5. 접근성을 고려한 HTML 작성법
Chapter 3: HTML 폼과 사용자 입력 처리
1. form과 input의 기본
2. 다양한 입력 타입
3. label, select, textarea, button 활용
4. 폼 유효성 검사 (HTML5 내장 검증)
5. POST vs GET 방식과 보안 고려 사항
6. 폼 제출 후 처리 및 서버 연동
Chapter 4: 링크와 네비게이션, SEO 최적화
1. 하이퍼링크 (
태그)와 네비게이션
2. 앵커 링크와 외부 링크 활용
3. SEO(검색 엔진 최적화) 기초
4. Open Graph와 메타 태그 (
)
5. 사이트맵과 웹 접근성 고려
Chapter 5: HTML5 API 활용
1. 웹 저장소 (LocalStorage, SessionStorage)
2. Web Workers와 백그라운드 처리
3. Geolocation API
4. Canvas API를 이용한 그래픽 렌더링
5. HTML5 Drag & Drop 기능
2부: CSS (웹 페이지 스타일링)
Chapter 6: CSS 기본 개념과 선택자
1. CSS의 기본 개념과 적용 방법
2. CSS 기본 선택자
3. 속성 선택자와 가상 클래스
4. 우선순위와 상속 개념
5. 개발자 도구를 활용한 CSS 디버깅
Chapter 7: 박스 모델과 레이아웃 디자인
1. 박스 모델
2. Flexbox 레이아웃 시스템
3. Grid 레이아웃 시스템
4. 반응형 디자인
5. CSS 변수를 이용한 스타일 재사용
Chapter 8: CSS 애니메이션과 트랜지션
1. transition을 이용한 부드러운 효과
2. @keyframes를 이용한 애니메이션
3. transform을 활용한 효과 (scale, rotate, translate)
4. clip-path와 마스크 효과
5. 성능 최적화와 GPU 가속
6. 애니메이션과 인터랙티브 디자인
Chapter 9: CSS 프레임워크 및 SASS/SCSS 활용
1. CSS 프레임워크 소개 (Bootstrap, Tailwind CSS)
Bootstrap
Tailwind CSS
2. Sass와 SCSS 문법 (variables, mixin, nesting)
변수(Variables)
믹스인(Mixin)
중첩(Nesting)
3. CSS 모듈과 컴포넌트 기반 스타일링
4. 다크 모드 구현 (CSS Variables)
5. BEM(Block Element Modifier) 방식 소개
구조:
예제:
Chapter 10: CSS와 접근성(A11Y)
1. 웹 접근성을 고려한 스타일링
2. 컬러 콘트라스트와 가독성
예제:
3. 키보드 내비게이션 지원 (:focus, tabindex)
주요 CSS 속성:
예제:
4. ARIA 속성과 스크린 리더 지원
주요 ARIA 속성:
예제:
5. CSS를 활용한 다크모드 및 고대비 모드 지원
다크모드 예제:
고대비 모드 예제:
Chapter 11: JavaScript 기본 개념과 문법
1. 변수와 상수 (var, let, const)
예제:
2. 데이터 타입 (Primitive, Reference)
예제:
3. 연산자와 제어문
연산자
제어문
4. 함수 (function, arrow function, callback)
함수 선언
화살표 함수
콜백 함수
5. ES6+ 문법
구조 분해 할당 (Destructuring)
전개 연산자 (Spread Operator)
나머지 매개변수 (Rest Parameter)
Chapter 12: DOM 조작과 이벤트 핸들링
1. document.querySelector()와 getElementById()
예제:
2. 요소 추가, 수정, 삭제 (appendChild, removeChild, innerHTML)
요소 추가
요소 수정
요소 삭제
3. 이벤트 리스너 (addEventListener, Event Delegation)
이벤트 리스너 추가
이벤트 위임 (Event Delegation)
4. 폼과 사용자 입력 이벤트 처리 (keyup, submit, change)
키보드 입력 감지 (keyup)
폼 제출 처리 (submit)
선택 값 변경 감지 (change)
5. setTimeout과 setInterval 활용
일정 시간 후 실행 (setTimeout)
일정 간격마다 실행 (setInterval)
Chapter 13: 비동기 처리와 Fetch API
1. 동기 vs 비동기 개념
2. Promise와 async/await
Promise
async/await
3. Fetch API를 활용한 데이터 가져오기
기본 Fetch 요청
async/await을 사용한 Fetch 요청
4. JSON 데이터 처리 및 응답 파싱
JSON 변환
객체를 JSON 문자열로 변환
5. 에러 핸들링 (try/catch, .catch())
try/catch를 사용한 에러 핸들링
.catch()를 사용한 에러 핸들링
Chapter 14: 객체 지향 JavaScript 및 모듈화
1. 객체 리터럴과 생성자 함수
객체 리터럴
생성자 함수
2. 프로토타입과 클래스
프로토타입을 활용한 객체 생성
ES6 클래스
클래스 상속 (extends, super)
3. 모듈 시스템 (import, export)
모듈 내보내기 (export)
모듈 가져오기 (import)
4. 클로저와 고차 함수 (Higher-order Functions)
클로저 (Closure)
고차 함수 (Higher-order Function)
5. SOLID 원칙과 설계 패턴 기초
Chapter 15: 프론트엔드 개발 실전 프로젝트
1. To-Do List 애플리케이션 만들기
주요 기능:
2. API를 이용한 날씨 앱 개발
주요 기능:
3. 로컬 저장소를 활용한 데이터 저장
4. Drag & Drop 기능 추가
5. 배포 및 최적화 (GitHub Pages, Netlify 활용)
GitHub Pages 배포
Netlify 배포
📌 부록: 추가 학습 자료
1. 웹 표준과 W3C 권장 사항
주요 웹 표준 요소:
2. 최신 웹 트렌드 및 도구
최신 개발 도구:
기타 최신 기술:
3. 성능 최적화 및 보안
성능 최적화:
보안 강화:
4. 면접 대비 JavaScript 심화 문제
예제 문제:
판 권