웹 제작 기본 단축키

HTML

html : 배우 역할로써 웹에서 보여주는 글, 이미지등을 보여준다.

태그

1) html창에 글자를 적어도 미리보기 화면에 나오지만브라우저가 인식하지 못한다.
브라우저가 인식할 수 있도록 하려면 태그라는걸 만들어서 안에다가 글자를 작성 해야한다.
2)

	<div> -> 여는 태그
    </div> -> 닫는 태그
    <div></div> -> 엘리먼트

div 태그 특징

주석

• 메모 하거나, 코드를 실행시키지 않을 때 사용(코드를 작성하는 사람만
  볼 수 있고, 브라우저를 사용 하는 사용자는 볼 수 없다.)

CSS

css : 스타일리스트로 html의 글,이미지등을 꾸며주는 역할을 한다.

선택자

선택자{속성: 속성값;}
→ div {background-color: red;}

div -> 선택자
div{속성 : 속성값}

컬러 입히기

1. 컬러 이름
   ex) Red, Green, Blue
   
2. RGB
   ex) rgb(red, green, blue)
   
3. RGBA
   ex) rgba(red, green, blue, opacity)
   
4. HAX
   ex) #red, green, blue -> #ff0000
   if) 6자리 모두 동일하면 3자리로 생략가능 -> #000
   컬러 조정할 때 5가지 방법으로 조정할 수 있다.

주석,태그 codepen

화면 반으로 가르기

• 윈도우 아이콘 + 좌우 방향키 (하단 이미지 참조)
  
  화면을 반으로 나눠 사용하기

단축키

• ctrl + W -> 탭 닫기
• ctrl + T -> 새 탭 열기
• Alt + Tap -> 화면 전환
• ctrl + V -> 붙혀넣기
• ctrl + X -> 잘라내기 후 복사
• Tap -> 자동완성
• Shift -> 글자선택
• Home -> 커서를 가장 앞으로 이동
• End -> 커서를 가장 뒷쪽으로 이동
• Ctrl -> 띄어쓰기 기준으로 이동
• Ctrl + Home -> 커서를 최상단으로 이동
• Ctrl + End -> 커서를 최하단으로 이동
• 좌우방향키 -> 한 글자를 기준으로 이동
• Ctrl + / -> 주석 자동 생성
• F6 -> 브라우저 주소 전체선택
• 윈도우 + shift + S -> 화면 캡처 (드래그하여 원하는 이미지 캡처)
• Print Screen(Prt Sc) -> 모니터 화면 캡처

부호

• () -> 소괄호
• {} -> 중괄호
• [] -> 대괄호
• , -> 콤마 (쉼표)
• ; -> 세미콜론
• . -> 점
• -> 대쉬

코드펜 설정 바꾸기

• 우측 상단에 프로필 클릭 후 Settings 클릭 하면 셋팅화면으로 들어갈 수 있다
  
• Higt Contrast Light : 배경 색을 흰색으로 변경
  
• 폰트 크기는 16 ~ 20이 가장 보기 좋음
  
• Autocomplete : 코드 입력 시 자동완성을 도와주는 키