BlockChain

1. 깃 다운로드 

2. 깃허브 레포지토리 생성

3. 폴더 vscode로 열기 

4. 깃허브 사용 코드

1. 깃 다운로드 

구글 크롬에서 git이라고 치고 사이트에 들어가서 깃 다운로드 for window를 누른다. 맥북 유저는 macos를 누른다.

자신의 운영체제에 맞는 설치파일을 클릭해서 다운로드

2. 깃허브 레포지토리 생성

3. 폴더 vscode로 열기 

vscode에서 사용할 폴더를 열고 (ctrl + ~) 키를 입력하여 터미널을 연다. 

4. 깃허브 사용 코드

4-1 git init : 깃 init으로 사용할 폴더를 초기화한다.
4-2 git add . : 내가 작업한 작업파일을 동시에 올려주는 코드이다.
4-3 git commit -m "first commit" : 커밋메시지를 올리는 코드이다.

빨강 동그라미를 눌러 복사를 하고 자신의 git 레포지토리를 원격저장소에 등록한다.

4-4 git remote add origin https://github.com~~~

4-5 git push origin master : 자신이 설정한 마스터브랜치에 자신의 코드를 푸시하는 코드이다. 

푸시가 완료되면, 자신의 코드가 깃허브에 올라가게 된다.

1. 웹 브라우저란?

2. 웹 브라우저의 종류

1. 웹 브라우저란?

    1-1. 브라우저는 html이란 문서를 읽어서 화면에 출력해주는 역할을 한다.  뷰어라고 생각하면 쉽다.
    1-2. 왜 브라우저가 많을까? >> 자기 서비스를 많이 이용하게 하려고..
    1-3. chrome이 가장 빠르기 때문에 인기가 많다. 
    1-4. node.js에서도 chrome에서 사용하는 js 환경과 같은 것을 사용하고 있다.
    1-5. 간단한 용어 정리 
         local : 자기 컴퓨터 안에 있는 것을 의미한다.
         server : 인터넷 환경이 잘 셋팅 되어 있는지, cost를 최소화 하는 것이 중요하다. cpu의 연산량 문제

         >>> cpu, 하드디스크 최소한의 컴퓨터 사양을 셋팅한다. 모니터같은 것들이 필요없음. 자기자신의 컴퓨터 로컬과             서 버 컴퓨터를 분리하여 코스트비용과 속도 및 컴퓨터 사양을 셋팅해야한다.
         gpu : 단순 계산에 있어서 빠름. 채굴할 때 사용하는 이유 >> 머클트리 증명에서 데이터를 암   호환하고 빠르게 찾           는  데 최적화 되어있기 때문에 사용한다.

2. 웹 브라우저의 종류 

    chrome, safari, edge, firefox, samsung, google,brave 브라우저 등이 있다.

    >> 유투브 프리미엄 비구독자라면 브레이브 브라우저로 유투브 보는 것을  강력히 추천한다. 브레이브의 경우 모든           광 고   를 막아주고 브레이브 내에 자체 광고를 보게 되면 bat (베이직 어텐션 토큰) 을 인센티브로 주고 있다. -> 토          큰 은   별로 안주니까 유투브만 보는 것을 추천

1.HTML

2. Element

3. Element의 속성

4. 기타 vscode 설정

 1. HTML

        1-1. HyperText MarkUp Language : 구조를 나타내기 위한 단순한 언어
        1-2. HyperText : 문서끼리의 연결을 의미, 다른 문서로의 이동과 다른 문서를 가져오는 것
 

2. Element

       : <>를 사용하여 시작하고 </>를 사용하여 끝나는 전체를 뜻한다. 엘리먼트 항상 열고 닫는 것이 있어야 한다.
        2-1. head 엘리먼트 :  브라우저에게 넘겨 줘야할 파일을 head 엘리먼트에 작성
               헤더엘리먼트에 들어가는 제목 : <title></title>
        2-2. body 엘리먼트 : 실제로 html 파일에 출력될 부
              <div></div> : 영역을 나누는 엘리먼트, 가장 많이 사용하는 엘리먼트

  3. Element의 속성

        3-1. <p></p> : 의 경우 좌우를 모두 차지하는 것을 블록 속성이라고 한다.

        3-2.<span></span> : 의 경우 자신의 것만 차지하는 것이라 인라인 속성이라고 한다.

        3-3. 인라인 : 한줄안에서 사용한다

        3-4. 블록 : 욕심이 가득해서 전부 차지하고 싶어하는 속성이 있다.

4. 기타 vscode 설정

      - vscode extension :
      - Liver Server
      - prettier - Code formatter  :  extension settings 에서 자세한 프리티어에 관한 설정을 할 수 있다.
      - Print Width : 한 줄에 몇 글자까지 입력할 것 인가
      - Tab Width : 몇 칸을 띄어 쓸 것인지
      - Default Formatter : Prettier - Code formatter 설정 하면 형식에 맞게 저장된다.
          
    - vscode 설치 방법 :
        - vscode 란 : 텍스트 편집기 , 어떤 언어를 사용함에 따라서 사용할 수 있는 편집
        - vscode 특징 :  폴더기준으로 많이 사용한다.
        - vscode 구글 검색
        - window 버젼이나 ios 버젼에 맞는 installer 설치

1. 웹 브라우저란 ?

2. 웹 브라우저의 종류

3. HTML

4. Element

1. 웹브라우저란 ?

브라우저는 사용자와 서버를 연결시켜 데이터를 주고받는 것이다. 

브라우저는 파일을 읽어 파일 입출력을 해줄 수 있다. 

2. 웹 브라우저의 종류 

chrome, edge, safari, firefox 등이 있다. 

왜 chrome 일까?  >> 가장 빨라서 많이 사용한다.

3. HTML (Hypertext Markup Language)

HTML 웹브라우저에서 가장많이 사용하는 문서이다. 

하이퍼링크를 통해서 다른 문서로 이동할 수 있다.

메모장에 hello를 입력하고 html 확장자로 변경해주면 자신의 브라우저에 맞는 브라우저로 읽어준다.

F12 를 통핵 개발자 도구를 열 수 있다. 

메모장 형식의 텍스트 편집기를 사용하면 MACOS에서 사용되지 않기 때문에 VSCODE 텍스트 편집기를 통해 개발한다. 

VSCODE를 통해 자동완성과 확장프로그램들을 통해 여러언어와 편리성을 추구할 수 있다.

4. Element

<> 를 사용하여  </> 요소를 나타낸다. 

4-1. div

<div>
            앞으로 가장 많이 사용하는 엘리먼트 입니다. 
            이렇게 입력하면 어떻게 뜰까요?
</div>

위와 같은 형식으로 띄어 써도 실제로는 줄바꿈 되지 않고 연결되어 나온다. 

<div></div> 는 줄바꿈 형식으로 사용된다. 

<div>
            부모 엘리먼트입니다.
            <div>자식 엘리먼트입니다.</div>
            <div>자식 엘리먼트입니다.</div>
</div>

위와 같은 형태로 부모와 자식 관계로 감싸고 있는 형태로 구현할 수 있다.  

4-2. p

<p>
            문단을 작성하는 엘리먼트입니다. 
            줄바꿈이 될까요? 
</p>

<p></p> 엘리먼트의 경우  문단이 한칸 띄어져서 나온다. 

<p></p> 의경우 문단안에 p나 div는 들어갈 수 없다. 

4-3. span

<span>가</span>
<span>나</span>
<span>다</span>

<span></span> 의 경우 한칸 띄어쓰기 형태로 출력이 된다. 

4-4. 주석

<!-- ctrl 슬래시를 하면 주석이 된다. 출력이 되지 않는다. 단 개발자 도구에선 보인다. 배포전엔 주석 제거 필수-->

4-5 기본적인  vscode 프리티어 설정 

default formatter : Prettier - Code formatter

format on save : 켜기