vs code 환경설정
1. Extensions 설치
- javascript debugger
- beautify css
- Pytest IntelliSense
- Live Preview
- code runner
*code runner 설치시 python 한글 문자열이 깨지는걸 막기 위해 설정
2. node js 설치
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
18.16버전 설치 후 껐다 켜서 출력 되는지 확인
3. HTML 코드 작성
- test.html 파일 생성
- html : 5 또는 ! 자동완성 클릭 ←기본구조
<!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>- meta : 웹 페이지의 기본 데이터 = 검색 엔진 노출과 관련
- http-equiv : 웹브라우저 호환성 설정에 관한 내용. IE=edge>IE8 이상 버전 사용 가능
- viewport : 반응형 웹에 사용 > 가로 사이즈에 따라서 출력되는 결과의 사이즈가 달라짐
ex) 모바일과 pc의 환경 차이
2.0으로 바꾸면 모바일 화면에서 더 커보임
- 작성화면 출력→ 오른쪽 상단 preview 아이콘 클릭
- 목록 만들기
<section id="'section2">
<!-- emmit : ul>li.data${데이터$}*3 -->
<ul>
<li class="data1">데이터1</li>
<li class="data2">데이터2</li>
<li class="data3">데이터3</li>
</ul>
</section>
'KT AIVLE SCHOOL' 카테고리의 다른 글
| [KT AIVLE] 웹프로그래밍 기초 mongo DB 사용법 (0) | 2023.04.28 |
|---|---|
| [KT AIVLE] 웹프로그래밍 JAVASCRIPT 기초 문법 (0) | 2023.04.26 |
| [KT AIVLE] 세미나 특강- AI 자연어 트렌드 (0) | 2023.04.21 |
| [KT AIVLE] 미니프로젝트 5차 - 인간 행동 인식 분류 (0) | 2023.04.14 |
| [AICE Associate 자격증 준비] python 코드 공부 (0) | 2023.04.11 |
댓글