01-1 웹 페이지를 만들기 전에

• UIuser interface : 사용자 환경
• UXuser experience : 사용자 경험
• 인터랙티브 UI/UXinteractive UI/UX : 사용자와 상호 작용하는 여러 모션과 동적인 콘텐츠를 사용하는 환경
• HTML : 웹 페이지의 뼈대와 문서 정보 구현
• CSS : 웹 페이지 디자인
• 자바스크립트 : 다양한 편의성 기능

01-2 웹 브라우저와 웹 에디터

• 웹 프로그래밍에서 크롬에서 지원하는 개발자 도구가 유용하게 쓰임
• 웹 에디터 : 코드를 작성할 때 필욯한 편의 기능을 내장한 프로그램
• 비주얼 스튜디오 코드 사용

01-3 제작 속도를 2배 높여 줄 작업 도구

• 비주얼 스튜디오 코드 확장 기능 설치

1. Auto Rename Tag 확장 기능 설치
2. 나머지 확장 기능 설치
   • Auto Rename Tag : 여는 태그의 이름을 변경하면 다는 태그의 이름도 자동으로 변경함.
   • Brackets Light : 에디터의 밝은색 테마 지원 [설정 -> Color Theme -> Brackets Light]에서 변경 가능
   • CSS Navigation : 특정 HTML 영역에서 Ctrl + 마우스 왼쪽을 눌러서 연결된 CSS 확인
   • Font Awesome Auto-complete & Preview : 폰트 어썸 아이콘을 실시간으로 미리 보여줌
   • html tag wrapper : 상위 태그를 자동으로 가싸줌 그룹할 태그를 드래그해 Ctrl + i로 선택
   • Live Server : 웹 서버를 통해 결과물을 브라우저에 실시간으로 보여줌
   • Power Mode : 코드를 입력할 때 특수 효과를 적용함.(선택사항)
   • Prettier - Code formatter : 줄 바꿈 등을 자동 정렬해주는 포매터.
   • vscode-icons : 에디터의 네비게이션 아이콘 모양을 변경함.
   • ftp-simple : FTP 접속 확장 기능
   • open in browser : 브라우저 단축키 오픈 확장 기능
3. 확장 기능 설정
   • 저자 블로그 참고

01-4 웹 페이지의 필수 재료

1. 프로젝트 폴더 만들고 불러오기
2. 새로운 HTML 파일 만들기
3. 자동 완성 기능으로 HTML 코드 작성하기
   • ! 입력 후 tab or html:5 입력 후 Enter