[Web] VSCODE, 마크업, CSS 단축키

yenaryu·2022년 7월 10일
0

Web

목록 보기
5/24

▪️ 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; - 글자 가운데

0개의 댓글