▪️ VSCODE 기본 실행
1) 왼쪽 상단 new file or 파일 끌어다놓기
2) 파일 명은 ~.html
3) !tab 으로 코드 생성
4) 초기 설정 : auto close tag / auto rename tag / live server
✔️ VSCODE 단축키
- 현재 창 닫기 ctl w
닫은 창 다시 열기 ctl sft t- 확대 ctl+
축소 ctl-- 들여쓰기 tab
내어쓰기 sft tab- 위에 행 삽입 ctl sft enter
아래에 행 삽입 ctl enter- 현재 행 이동 alt 방향키
현재 행 복사 alt sft 방향키
현재 행 삭제 ctl x- 행 다중 선택 alt ctl 방향키
- 선택 풀기 esc
- 주석 ctl l
부분주석 alt sft a- 라이브서버 열기 alt l o
- 똑같은 형태인 것 찾기 ctl d
- span class="blind" sft ctl b
- ::after{content: '';clear: both;display: block;} ctl sft 1
- 코드 한 줄로 만들기 alt j
- 해당 커서 부분 전체 선택 alt shft
✔️ 브라우저 단축키
- 개발자도구 열기 ctl sft c
✔️ 마크업 단축키
header 입력하면 <></> 태그 생성
{}안에 이름 입력하면 자동으로 태그 안 이름 생성
header{header}
<header>header</header>.을 사용하여 클래스 생성
$은 번호 매김 / *n으로 번호 줄세우기
.box
<div class="box"></div>
.box$
<div class="box1"></div>
.box$*2
<div class="box1"></div>
<div class="box2"></div>div 입력하면 태그 자동 생성
{$}으로 번호 매김 / *n으로 번호 줄세우기
div{$}
<div>1</div>
div{$}*3
<div>1</div>
<div>2</div>
<div>3</div>
div가 아닌 다른 태그에 class 넣기
section.box
<section class="box"></section>
a.box
<a href="" class="box"></a>
✔️ CSS(style) 단축키
- fi ▶️ font:inherit - 폰트 기본값으로
- cri ▶️ color:inherit - (폰트)색상 기본값으로
- m0 ▶️ margin:0 -전체바깥여백x
- ml10 ▶️ margin-left:10 - 왼쪽바깥여백10
- mr10 ▶️ margin-right:10 - 오른쪽바깥여백10
- mb10 ▶️ margin-bottom:10 - 아래바깥여백10
- p0 ▶️ padding:0 - 전체안쪽여백x
- pl10 ▶️ padding-left:10 - 왼쪽안쪽여백10
- pr10 ▶️ padding-right:10 - 오른쪽안쪽여백10
- poa ▶️ postion:absolute - 요소 위치 절대값
- por ▶️ position:relative - absolute 바깥 요소에 항상 적용
- pof ▶️ position:fixed - 브라우저 영향x 고정
- t50p ▶️ top:50% - 위쪽에서 50%위치로 내려온 위치 ⬇️
- l50p ▶️ left:50% - 오른쪽에서 왼쪽으로 50% 온 위치 ➡️
- tftl ▶️ transform:translate(x,y) - x,y축 위치 지정/ 정가운데:(-50%,-50%)
- tftx ▶️ transform:translateX(x) - x축으로 x%이동 (-일수록 왼쪽 +일수록 오른쪽)
- tfty ▶️ transform:translateY(y) - y축으로 y%이동 (-일수록 위로 +일수록 밑으로)
- w100 ▶️ width:100 - 넓이100
- h100 ▶️ height:100 - 높이100
- bgc#f00 ▶️ background-color:#f00 - 배경색
- bgr ▶️ background-repeat: no-repeat - 배경반복x
- bgs ▶️ background-size: contain - 배경 가로세로비율 유지
- bgp ▶️ background-position: 0 0; - 배경 위치 (0.0)
- fz100 ▶️ font-size:100px - 글자크기 100
- lh50 ▶️ line-height:50px - 행간격 50
- tac ▶️ text-align:center; - 글자 가운데
