📖 최성일, ⌈Do it! 인터랙티브 웹 페이지 만들기⌋, 이지스퍼블리싱, 2021
01장 웹 페이지 제작 준비하기
01-1 웹 페이지를 만들기 전에
💡 인터랙티브 UI/UX
사용자와 상호 작용하는 여러 모션과 동적인 콘텐츠를 사용하는 환경
01-3 제작 속도를 2배 높여 줄 작업 도구
비주얼 스튜디오 코드의 확장 기능 설치하기
- Auto Rename Tag
- Bracket Pair Colorizer 2
- CSS Peek
- Font Awesome Auto-complete & Preview
- HTML CSS Support
- html tag wrapper
- HTML to CSS autocompletion
- indent-rainbow
- Live Server
- Material Icon Theme
- Material Theme
- Prettier - Code formatter
확장 기능 설정을 한 번에 완료하기
{
"editor.wordWrap": "on",
"editor.fontFamily": "d2coding, verdana",
"editor.mouseWheelZoom":true,
"editor.lineNumbers":"on",
"editor.minimap.enabled":false,
"editor.colorDecorators": true,
"editor.codeLens": false,
"liveServer.settings.donotShowInfoMsg": true,
"workbench.iconTheme": "vscode-icons",
"vsicons.dontShowNewVersionMessage": true,
"liveServer.settings.CustomBrowser": "chrome",
"liveServer.settings.donotVerifyTags": true,
"fontAwesomeAutocomplete.triggerWord": "fa-",
"editor.tabSize": 4,
"prettier.tabWidth": 4,
"prettier.useTabs": true,
"workbench.colorTheme": "Material Theme",
"window.zoomLevel": 1,
}01-4 웹 페이지의 필수 재료
자동 완성 기능으로 HTML 코드 작성하기
html:5 입력 후 Enter 🔽
html 태그의 lang 속성값으로 언어 변경
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>이번 스터디에서 특별히 좋았던 점이나 어려웠던 점, 새로 알게 된 부분
본격적인 실습 전, 인터랙티브 UI/UX의 개념과 웹 페이지 제작에 필요한 전체적인 기본 개념들을 이론적으로 짚고 넘어가는 시간을 가졌다. 비전공자에게 특화된 책이라 전공자의 입장에서 따로 이해가 필요한 부분은 없어 이 부분은 속독하고 넘어갔다.
👩🏻💻 Web Front-end Developer