[1일차] vscode 세팅부터 MBTI 테스트 프로그램만들기

일단 해보는 코딩/Project

[1일차] vscode 세팅부터 MBTI 테스트 프로그램만들기

eun_zoey2 2023. 4. 26. 21:26

728x90

프론트엔드개발 : 사용자 브라우저에 출력되는 화면

웹 사이트 동작 원리 : 웹 브라우저(크롬,엣지) <-> 서버, 데이터베이스

HTML, CSS JS 기술을 익혀 프론트엔드 개발 어떤 역할을 하는지 명확하게 이해하는 것이 목표!!!!

■ HTML (Hyper Text Markup Language)

페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 담당

■ CSS (Cascading Style Sheets)

실제 화면에 표시되는 방법(생상, 크기, 폰트, 레이아웃 등) 을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적) 을 담당

■ JS(JavaScript)

콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당

VSCODE 작업세팅 및 꿀팁 확장 프로그램 설치

1. 태그이름을 수정할때마다 앞/뒤 이름의 수정 번거로움을 해결해주는 프로그램

2. 한국어로 변역해주는 프로그램 ( 바로 적용이 되지않으면 껐다 다시 실행)

3. 검색창에 seetings -> open user setting(JSON) -> 코드 추가

{
    "workbench.colorTheme": "Default Light+",
    "editor.fontFamily": "D2Coding",
    
    "editor.tabSize": 2,
    // 들여쓰기 줄이는 코드 
    
    "liveServer.settings.donotShowInfoMsg": true,
    "emmet.triggerExpansionOnTab": true,
    
    "emmet.variables": {
        "lang": "ko"
    } // 추가해주면 en -> ko로 자동수정되어 입력됨
    
}

<html lang="ko"> // 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>

※ 단축기 모음

라인정리(열 맞추기) 단축기 ctrl+k 누르고, f

ctrl + / 누르면 자동 주석처리

4. Live Server 실제 작성한 코드를 브라우저에서 확인할 수 있는 프로그램 설치

저작자표시 비영리 변경금지

'일단 해보는 코딩 > Project' 카테고리의 다른 글

[3일차] MBTI 테스트 프로그램만들기 (0)	2023.05.10
[2일차] MBTI 테스트 프로그램만들기 (2)	2023.05.08
[Java Script] 계산기 프로젝트(2) (0)	2022.07.07
[Java Script] 스톱워치 프로젝트(1) (0)	2022.07.07

현재글[1일차] vscode 세팅부터 MBTI 테스트 프로그램만들기

잰니의 성장블로그✈