완료된 이미지는 '서론'에 있다.

1강

1. VS Code 다운로드
   https://code.visualstudio.com/Download 이동
   운영체제 버전에 따른 다운로드

다운로드가 완료되면
좌측 메뉴바에서 Extensions

• korean 검색, 한국어팩 설치
• live 검색, Live Server 설치

Visual Studio 종료 후 재실행 (설치파일 적용을 위해)

사전에 전용 폴더 생성 (경로는 최소화, 이름은 영문(아마도?))
파일-폴더열기 '신뢰합니다' 클릭!

프로그램 및 개발환경 준비 끝
(줠) 알고보니 Visual Studio. 많이 들어봤다 했더니 여기서 보게되는군요 비쥬얼스튜디오.
(줠) 줠은 주절주절의 줄임말 mibi버전. 주석으로서의 의미가 전혀 없다.

2강

html(뼈대), CSS(꾸미기)순서로 진행

VS 실행
탐색기(좌측 두번째 공간) 아무데서나 마우스 우클릭
새파일 생성
index.html(배포시 알아보기 쉽게 이름을 통일합시다.)

작업창
html - html:5 선택
[저장 ctrl+s] (자주 해줍시다)
우클릭 - open with live server
인터넷 창 실행(결과창)

• title 변경

  (내용입력) [저장] [결과확인] (방금 실행한 인터넷 창)

• 짝 찾아보기

  한번 훑어보기

• body 내용 넣기 - 뼈대 먼저 세우기
  h1, p, div

  전체 제목, H1태그
  강의에서 p태그는 문단 div태그는 묶음 정도로 설명함. 맛보기이니까아~
  (줠) 저 사이에 내용을 넣으니 결과창 처럼 나오는 벨로그의 기능을 보아서 살짝 놀랐음. (줠) 어느새 다시보니 별표로 작성하면 불릿으로 표기됨 와우;;; 그래서 작성할 때 오른쪽에 창이 별도로 있는것이구먼!

• 스타일 적용을 위한 이름 지정하기
  class="(이름)"

  (줠) 태그가 안보여서 캡쳐 해야함에 대해 일단 작성하고 다음에 기회가 되면 추가해야겠다 생각함(이대로 잊혀질 가능성 101%)

• 지정된 이름을 바탕으로 스타일 적용

• h1 글씨 빨간색으로 만들기
  (줠) 뭐여 이건 또 왜 사라져;;;;
  head - title 밑에

.title{
  color: red;
  }
</style>

(줠)상단의 <>아이콘이 코드를 보여주는 기능이였다. 실시간으로 발전해가는 mibi이다.(사전에 공부를 안해 스샷과 같은 삽질을 진행할 뻔 했다.) 역시 벨로그 멋있다.

작성관계상 나누어서...