들어가기
사전캠프에서 제공하는 웹 개발 강의에 들어가기전에 알면 도움되는 크롬 개발툴에 대해
간단한 사용법을 정리했다
크롬 개발자툴
웹개발을 할 때 많이 도움되는 크롬 기능이다 불러오는 방법은
1. 우클릭 후 검사
2. F12 누르기
2가지 인데 1번은 우클릭 막힌 경우도 있고 F12가 훨 편해서 F12 사용했다
> 개발자툴
> 위치 조정
2번 항목에서 팝업,오른쪽 배치 등등 위치를 조정 가능하다
> 요소 찾기
저걸 클릭 하면 마우스가 위치한 곳의 요소들이 가진 영역이 보이고 클릭하면 클릭한 요소들의 구조와 적용된 css을 볼 수있다
> 예시 화면
1번은 내가 클릭한 부분의 구조를 볼 수 있다
2번은 내가 클릭한 부분의 css가 나온다 저 부분에서 직접 css를 수정하고 우클릭 -> copy rule해서 내가 만들던 웹의 Style에 붙여넣기하면 갠적으로 편했다
예시로 display flex 같은 경우 저길 클릭 하면 쉽게 설정가능하다
추가로 화면에 보이는 여러 색을가진 영역들은
파랑 > 실제로 적용된 크기
보라색 > 여백 추가로 더 활용 가능한 공간
초록색 > padding
주황색 > margin
연노랑색?? > border
가 있다
> 함수 실행 & 로그출력
html의 script영역처럼 함수를 실행가능하다 테스트 용으로도 사용하며 웹개발중 console.log를 통해 내가 원하는 값이 잘 나오는지 출력도 가능하다