(CSS 학습 기록) : 개발자 도구 (크롬), 숭고한 단축키 작업 emmet 구문

• 앞에 쓴 글 : Bilibili 다크호스 프로그래머 핑크 선생님의 튜토리얼 참조 
• 주소 : https://www.bilibili.com/video/BV14J4114768?t=328&p=26

개발자 도구 (Chrome)

• 이 도구는 우리의 필수 도구입니다. 향후 코드에 문제 가 발생하면 첫 번째 반응은 다음과 같습니다.
  • 개발자 도구를 열려면 "F12를 누르십시오"또는 "shift + ctrl + i"를 누르십시오.
  • 메뉴 : 웹 페이지를 마우스 오른쪽 버튼으로 클릭하여 비워 둡니다.

• 개발자 도구 작은 포인터 도구를 통해 페이지 요소 찾기
• 왼쪽은 html 페이지 구조이고 오른쪽은 CSS 스타일입니다.

기술:

• ctrl + wheel은 개발자 도구 코드의 크기를 확대 할 수 있습니다.
• 왼쪽은 HTML 요소 구조이고 오른쪽은 CSS 스타일입니다.
• 오른쪽의 CSS 스타일은 값과 색상을 변경하여 변경 후 효과를 볼 수 있습니다.
• ctrl + 0 복원 브라우저 크기

숭고한 바로 가기 작업 emmet 구문

• Emmet의 전신은 Zen 코딩으로, 약어를 사용하여 html / css의 쓰기 속도를 향상시킵니다.
  • 태그 생성 태그 이름을 직접 입력하고 탭 키를 누릅니다. 예를 들어 div를 누른 다음 탭 키를 누르면 <div> </ div>를 생성 할 수 있습니다.
  • 예를 들어 동일한 태그를 여러 개 생성하고 *를 추가 하려는 경우 div * 3은 3 개의 div를 빠르게 생성 할 수 있습니다.
  • 부모-자식 관계 태그 가있는 경우 ul> li와 같은 >를 사용할 수 있습니다 .
  • 형제 레이블 이있는 경우 div + p와 같이 +를 사용하십시오.
  • 클래스 이름 또는 ID 이름 을 생성하는 경우 .demo 또는 #two 탭을 작성하십시오.
  • 는 IF 생성 DIV 클래스 이름은 순서대로, 당신은 자동 증가 기호 $를 사용할 수 있습니다

.demo$*3        
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>