전 개발을 할 때 vs코드로 개발을 했습니다. 물론 다른 도구들이 있지만 저한텐 vs코드가 직관적으로 느껴져서 많이 사용했어요 그래서 vscode 사용할 때 알면 좋은걸 정리했어요
vscode
컨트롤 쉽프트 피 입력창
컨트롤 오 파일, 폴더 열기
밑에 보라색의 상태바는 는 아무것도 없다는 표시
프로젝트 단위는 폴더 혹은 디렉토리라 부른다.
컨트롤 에이는 전체 선택
beautify 확장자는 지저분항 코드를 깔끔하게 작성해줌
컨트롤 쉽프트 피 누르고 HookyQR.beautify 검색후 해야함
꺽세표시 있는 것을 태그라고 하며 슬래시가 없는 앞에 있는
부분은 열린태그 슬래시가 있는 건 닫힌태그라고 함
auto rename tag 확장자는 앞에 태그를 바꾸면 뒤에 태그도 바꿔줌
라이브 서버 확장자는 오픈위드 라이브서버 로 연결
컨트롤 비 탐색기 열기 닫기
컨트롤 피 : 파일 열기
컨트롤 에프 : 찾기
컨트롤 에이치 : 찾기 바꾸기
알트 방향키 위 : 해당줄이 위로 이동
알트 방향키 아래 : 해당줄이 아래로
알트 쉽프트 방향키 아래 : 해당줄을 아래줄에 복사
컨트롤 제트 : 되돌리기
탭 : 들여쓰기
vscode는 밑에 공백을 누르고 공백을 사용한 들여쓰기를 누르면
탭키를 눌렀을때 띄어쓰기 간격을 정할 수 있음
쉽프트 탭은 내어쓰기임
알트 방향키를 좌우로 누르면 페이지를 옴길 수 있다.(혹은 컬트롤 페이지 업)
컨트롤 백슬래쉬키 : 분할 화면
폴더 생성은 소문자로 하는게 좋음
index.html로 이름을 저장하는 이유는
브라우저가 프로젝트 단위로 화면을 열때 우선적으로 index라는 이름을 가진
html파일을 찾아 연다.
html태그 영역에는 head, body영역이 있음
<!DOCTYPE html> 문서(페이지)의 HTML 버전을 지정
HTML은 총 6버전이 있고 HTML5가 최신, 표준 버전이다
DOCTYPE(DTD Document Type Definition)은
마크업 언어에서 문서 형식을 정의하며 웹브라우저가 어ㄸ너 HTML버전의 해석
방식으로 페이지를 이해하면 되는지를 알려주는 용도
ex)
<!DOCTYPE html PUBLIC "-//W3c//DTD XHTML 1.0>
이 버전은 XHTML 로써 HTML5 전버전임
<html>
은 시작태그
</html>
은 끝 태그
<html></html> 문서의 전체 범위
HTML 문서가 어디에서 시작하고 어디에서 끝나는지 알려주는 역할
lang은 language 단어의 약어이며 지정할 문서의 언어를 명시하는 html 속성
<head> 라는 태그는 문서의 정보를 나타내는 범위
웹브라우저가 해석해야 할
웹 페이지의 제목, 설명, 사용할 파일 위치, 스타일(CSS)같은,
웹페이지의 보이지 않는 정보를 작성하는 범위
<body>문서의 구조를나타내는 범위
사용자화면을 통해 보여지는
로고 헤더 푸터 내비게이션 메뉴 버튼 이미지 같은
웹페이지의 보여지는 구조를 작성하는 범위.
헤드영역에
<link rel="stylesheet" href="./main.css">
<script src="./main.js"></script>
이렇게 작성하여 연결시켜야함
<style>
div {
text-decoration: underline;
}
</style>
헤드 영역에는 크게 다섯가지가 있음
<meta>, <title>, <link><script><style>
<title></title>
HTML 문서의 제목을 정의
웹브라우저 탭에 표시됨
<link>태크는
외부문서를 가져와 연결할 때 사용(대부분 css파일임)
<link rel="stylesheet" href="./main.css"/>
가져올 문서의 관계 = rel
가져올 문서의 경로 = href
rel(relationship 단어의 약어)은 가져올 외부문서(대표적으로 css파일)가 현재의
html과 어떤 관계인지를 명시하는 html 속성(attribute)입니다.
href(hyper text reference 단어의 약어)는 브라우저가 참조할
특정 경로(path)를 지정하는 html 속성입니다
favorite icon을 줄여서 facicon(파비콘)이라고 부릅니다.
html favicon를 적용할 때는 이름을 favicon이라고 지정하시길 권장하며
favicon.ico혹은 favicon.png파일이 주로 사용됩니다.
<style> 태그
스타일(css)를 html문서 안에서 작성하는 경우에 사용.
<script src=""> 태그
src는 자바스크립트(js)파일 가져오는 경우 사용
<script>
console.log('hello world!')
</script>
자바스크립트를 html문서 안에서 작성하는 경우의 방식.
<meta>
기본적인 정보
1) name(정보의 종류)
"author" =제작자
"viewport"= 웹페이지가 출력되는 영역(모바일장치에만 해당)
2) charset="UTF-8"
(character set 단어의 약어)은 문자 인코딩 방식을 지정하는 html 속성(attribute)
문자 인코딩(encoding)이란 문자나 기호들을 컴퓨터가 이용할 수 있는 신호로 만드는 것을 말한다.
대표적으로는 한글 사용에서는 EUC-KR 혹은 UTF-* 등이 사용
웹에서는 UTF-8사용을 권장함
3)content(정보의 값)
intial-scale=1.0 (모바일에서 보여지는 크기)
메타태그는 html문서의 제작자 내용 키워드 같은 여러 정보를 검색엔진이나 브라우저에 제공
index 파일은 항상 최상위 경로로 넣고
images, css, js 폴더를 각각 만들어 넣으면 편함
바디영역에
<img src="images/logo.png" alr="">넣어준다.
alr은(alternate 단어의 약어)는 이미지가 출력되지 못하는 경우 대신 출력할 텍스트라고 해서 대체 텍스트 라고 부릅니다. 이미지 경로가 잘못되거나 네트워크가 불안정하거나 등 이미지를 출력할 수 없는 다양한 상황에 이미지 대신 화면에 나올 글자로 이해하시면 충분
alr은 필수 속성임
상대경로
./ =주변
../ = 상위 폴더
절대경로
http(https) s는원격
/ (//)= 최상위 경로(루트)
127.0.0.1:5500 = vs코드의 서버 =localhost:5500
우리 컴퓨터에서 하는걸 로컬환경이라고 함
로컬호스트란 우리의 컴퓨터 환경
./는 생략하고 바로 사용할 수 있다.
<a> 는 태그 내부에 있는 href 경로로 이동 하도록 해주는 태그
폴더경로만 잘 링크해주면 브라우저는 인덱스.html파일을 찾는다
'IT 공부하기' 카테고리의 다른 글
| 프론트엔드 CSS[운동하는IT] (1) | 2022.09.19 |
|---|---|
| 프론트엔드 기초3 (VSCODE)[운동하는IT] (0) | 2022.09.19 |
| 프론트엔드 기초1 (개념)[운동하는IT] (2) | 2022.09.19 |
| CCTV 용어정리[운동하는IT] (0) | 2022.09.15 |
| 스마트시티[운동하는IT] (0) | 2022.09.15 |