• 윈도우 기준

📌에디터 창 제어

현재 창 닫기 -> ctrl + w
닫은 창 다시 열기 -> ctrl + shift + t
사이드바 토글 -> ctrl + b
사이드바 - 탐색기 -> ctrl + shift + e
사이드바 - 전체 검색 -> ctrl + shift + f
에디터 확대 -> ctrl + +
에디터 축소 -> ctrl + -
개발자 모드 열기 -> ctrl + shift + c

📌Vscode 소스코드 편집

현재 창 닫기 -> ctrl + w
닫은 창 다시 열기 -> ctrl + shift + t
들여쓰기 -> tab 혹은 ctrl + ]
내어쓰기 -> shift + tab 혹은 ctrl + [
아래에 행 삽입 -> ctrl + Enter
위에 행 삽입 -> ctrl + shift + Enter
현재 행 이동 -> alt + 방향키⬆⬇
현재 행 복사 -> alt + shift + 방향키⬆⬇
현재 행 삭제 -> ctrl + shift + k
주석 -> ctrl + /
부분 주석 -> ctrl + shifta
코드 한줄 정렬 -> ctrl + j
다중 선택 -> alt + 마우스 클릭

📌Vscode 약자

코드칠때 약자로 치는게 좋다.

아무리 영문이 빠른 사람이라도 약자로 치는 사람보다 빠를 순 없다!!!

by -> body
hdr -> header
fi -> font : inherit /(기본 폰트 사이즈는 16, 컬러 검정, 두께 노말)/
cri -> color : inherit

m0 -> margin:0
ml10 -> margin-left:10
mr10 -> margin-right:10

p0 -> padding:0
pl10 -> padding-left:10
pr10 -> padding-right:10

poa -> postion:absolute
por -> position:relative
pof -> position:fixed
t50p -> top:50%
l50p -> left:50%

tftl -> transform:translate(x,y)
tftx -> transform:translateX(x)
tfty -> transform:translateY(y)
psf -> position: fixed
df -> display: flex
fx1 -> flex: 1

bdrs50% -> border-radius: 50%;
w:100 -> width:100
h:100 -> height:100

bgc#f00 -> background-color:#f00
bgr -> background-repeat: no-repeat;
bgs -> background-size:
bgp -> background-position:

fz100 -> font-size:100px
lh50 -> line-height:50px
tac -> text-align:center;
lisn -> list-style: none;
tdn -> text-decoration: none;

📌마크업 단축키 / zen coding

참고링크

✏ 태그안에 내용바로 입력하기

• 텍스트
  hdr(header) 입력하면 <></> 태그 생성
  { }안에 이름 입력하면 자동으로 태그 안 이름 생성

header{header}

<header>header</header>

✏ 클래스 생성

• . 을 사용하여 클래스 생성 할 수 있다.
  ex) .클래스 이름

.box

<div class="box"></div>

• 넘버링 $

$ 위치에 값이 1부터 1씩 증가 (1,2,3,4...)
$은 _번호 매김_이다.

.box$*2

<div class="box1"></div>
<div class="box2"></div>

• 엘리먼트 복제

li*3
<li></li> <li></li> <li></li>

• div안 내용을 순차적으로 쓰는법.

div{$}*3

<div>1</div>
<div>2</div>
<div>3</div>

• 태그와 함께 쓰는 법

> → 태그 안
+ → 중첩

• 그룹핑

h1.logo>a

<h1 class="logo"><a href=""></a></h1>

• 여러 클래스명 추가

a.btn.prev

<a href="" class="btn prev">이전</a>

• 반복 복제하기

ul>(li>a>img+p)*4
→ ul 안에 (li>a>img+p)태그를 반복해서 4번쓰겠다

<ul>
	<li>
		<a href="">
			<img src="" alt="">
			<p>Lorem ipsum dolor</p>
		</a>
	</li>
	<li>
		<a href="">
			<img src="" alt="">
			<p>Lorem ipsum dolor</p>
		</a>
	</li>![](https://velog.velcdn.com/images/kimjiji_0/post/045c4742-68cc-4483-a4da-0cab4d4cc806/image.png)

.
.

```

📌색상표

#000 검정
#f00 빨강
#fff 흰색
#ccc 밝은회색
#00f 파랑