Programming/Chrome10 [Chrome] 개발자 도구 - 로컬 스토리지 ● 웹 브라우저 - 사용자의 컴퓨터에 웹사이트 사용 정보들을 저장하고 필요할 때마다 그 정보들 조회 => 사용자 개인화 가능(= 사용자별로 저장 가능) => 속도 및 사용자 경험 개선 - Ex) 자동 로그인 기능, 로그인 없이 장바구니 상품 유지 ● 로컬 스토리지 - Client Side Storage 방식 (= 사용자 측에 저장) => 데이터 저장을 사용자 컴퓨터에 하겠다는 의미 => 내 컴퓨터 브라우저에만 한정적으로 적용 - 세션 스토리지에 저장된 데이터 : 페이지 닫을 때 사라짐 vs 로컬 스토리지에 저장된 데이터 : 새로고침 및 브라우저 종료 시에도 내 컴퓨터 동일 브라우저 내에.. 2024. 6. 8. [Chrome] 개발자 도구 - 콘솔 사용 시 주의사항(let, const 선언) ● 크롬 개발자 도구 - 사용자와의 원활한 상호작용과 편리한 코드 테스트를 위해 표준 문법에서 벗어난 기능을 제공 => let과 const의 재선언이 가능 HTML 삽입 미리보기할 수 없는 소스 - 이유 : 콘솔창이 REPL 모드에서 예외로 처리하기 때문 1) 스크립트에서 const 재선언하는 경우 => 오류 발생 const a = 1; const a = 2; 2) 콘솔에서 const를 따로 따로 재선언하는 경우 => 오류 미발생 3) 콘솔에서 const를 한 번에 재선언하는 경우 => 오류 발생 4) 다른 키워드로 재선언 => 오류 발생 - Ex ) const로 선언한 변수를 let으로 재선언 참고 제주코딩스베이스캠프 - 아는 만큼 보이는 크롬 개발자 도구 - 콘솔 주의사항(let, const 선언) .. 2023. 12. 10. [Chrome] 개발자 도구 - 콘솔 사용법 ● 콘솔(Console) - REPL(Read-Eval-Print-Loop) : 사용자가 입력한 명령어를 읽고(Read), 해당 명령어를 평가하고(Eval), 결과를 출력한 다음 다시 입력 상태를 기다리는 상태로 돌아가는 과정을 반복(Loop)하는 단순한 상호작용 컴퓨터 프로그래밍 환경 - 파일에 저장하지 않고도 즉시 코드를 실행 및 결과 확인이 가능 ▶ 코드 동작을 빠르게 테스트 및 디버깅 가능 ● 로그 확인 - console.log() : 일반 메세지 - console.info() : 정보 메세지 - console.debug() : 디버그 메세지 - console.warn() : 경고 메세지 - console.error() : 오류 메세지 ❕ console.debug()의 경우 수준을 상세로 바꿔주면.. 2023. 12. 3. [Chrome] 개발자 도구 - 화면 캡처 ● 용도 - 웹 페이지를 캡처할 때 - 스크롤이 생겨 한 번에 한 번에 캡처가 불가능할 때 => (구글 또는 실행) 프로그램 따로 설치 없이❕ PDF 다운로드 없이❕ 한 번에 화면 캡처를 할 수 있다✨ ● 방법 1. 명령어 실행으로 캡처 - 개발자 도구 > 우측 상단 세로 점 세 개 버튼 > 명령어 실행 또는 Ctrl + Shift + P - 원본 크기 스크린샷 캡처 검색 및 선택 · 노드 스크린샷 캡처 : 선택한 요소 영역을 캡처하고 싶을 때 요소 탭에서 요소 선택 후 캡처 실행 · 스크린샷 캡처 : 현재 보이고 있는 부분만 캡처 · 영역 스크린샷 캡처 : 드래그 영역만 캡처. 윈도우 캡처 기능 (Win + Shift + S)의 사각형 캡처와 동일 기능 - png 형태의 이미지 파일 자동 다운로드 진행.. 2023. 11. 28. [Chrome] 개발자 도구 - 요소 상태 및 Class 활용 ● 요소 상태별 스타일 확인 - 요소 상태 전환 버튼(:hov) 클릭 - active, hover, focus, visited, focus-within, focus-visible, target 체크해보며 스타일 확인 (중복 선택 가능) - active : 요소가 활성화 된 상태 (ex : 버튼 클릭 했을 때) - hover : 요소 위에 마우스를 가져다 놓은 상태 - focus : 요소가 포커스 받았을 때. 주로 폼 요소에서 사용. 키보드 또는 다른 입력 장치를 통해 포커스 발생 - visited : 링크를 방문한 후에 해당 링크 요소에 적용. 이를 통해 방문한 링크와 아직 방문하지 않은 링크 구별 가능 - focus-within : 요소 내부의 자식 요소가 포커스 받았을 때 부모 요소에 적용 - foc.. 2023. 11. 28. [Chrome] 개발자 도구 - 명도대비율 확인 ● 목적 : 웹접근성 - 색약, 저시력자, 고령자 등도 구분가능하도록 텍스트와 배경의 명도대비가 필요함 - 기본적인 비율은 텍스트 : 배경 = 4.5 : 1 - 큰 글자(24px 이상) 혹은 굵은 글자(19px 이상)의 경우, 텍스트 : 배경 = 3 :1까지 가능 ● 방법 - Ctrl + Shift+ C 또는 요소 선택 버튼 클릭 후 해당 요소 위에 마우스 올려서 확인 - 스타일에서 Color Picker를 이용하여 확인 - 펼침 버튼을 누르면 레벨 기준 통과여부도 확인 가능 (아래의 경우, AA와 AAA 기준 모두 통과한다는 뜻) - 기준을 미달하면 아이콘이 바뀌고(왼쪽), 새로고침 아이콘(오른쪽)을 누르면 해당 기준에 맞춰 색상 변경 ● 참고 - 텍스트가 있는 요소에서만 확인 가능. 텍스트가 없는 요.. 2023. 11. 24. [Chrome] 개발자 도구 - 요소 숨김 처리 단축키 ● 요소 선택 + H - ex : 빨강 > 노랑 > 초록 div 에서 노란색 div 선택 후 H를 눌렀을 때 - __web-inspector-hide-shortcut__ 이라는 class가 추가되면서 숨김 처리가 됨 - 스타일 탭에서 __web-inspector-hide-shortcut__ class의 스타일은 visibility : hidden !important; 라는 것을 확인 가능 - __web-inspector-hide-shortcut__ · Chrome에서만 사용되는 class · Edge에서 단축키는 동일하며, microsoftStartLogo __web-inspector-hide-shortcut__라는 class가 추가됨 참고 제주코딩벵스캠프 - 아는 만큼 보이는 크롬 개발자 도구 - HT.. 2023. 11. 24. [Chrome] 개발자 도구 - 눈금자 표시 ❗ 사실상 기능 개발을 주로 하는 개발자들에게는 쓸모없을 수 있지만, 퍼블리셔에게는 도움 될 수 있는 기능 - 오른쪽 상단 세로 점 3개 버튼 클릭 > Run Command 클릭 - 또는 Ctrl + Shift + P - 눈금자 입력 > "마우스를 가져가면 눈금자 표시" 선택 · 영어 사용중인 경우, "Show rulers on hover" 검색 - 요소 선택 · 요소 탭 > 왼쪽 상단 화살표 버튼 클릭 · Ctrl + Shift+ C - 눈금자 생성 참고 제주코딩벵스캠프 - 아는 만큼 보이는 크롬 개발자 도구 - 눈금자 표시하기 https://www.youtube.com/watch?v=ZwqSsekJVqU&list=PLkfUwwo13dlUJCAGcBOynazaBVgvvj4ba&index=3 2023. 11. 15. [Chrome] 개발자 도구 - 언어 변경 ● 방법 - 환경설정 이용 - 명령어 실행 1. 환경설정을 이용하는 방법 - 오른쪽 상단 톱니바퀴 버튼 클릭 - 환경설정 > 언어에서 언어 선택 - 페이지 새로고침(F5) 또는 개발자도구에서 새로고침 버튼 클릭 2. 명령어로 실행하는 방법 - 오른쪽 상단 세로 점 3개 버튼 클릭 > Run Command 클릭 - 또는 Ctrl + Shift + P - 원하는 언어 입력 후 선택 · 눈치챘겠지만 언어 설정 외 다양한 기능을 명령어를 통해 실행할 수 있다. 시간이 될 때.. 자세히 써보겠다.. - 페이지 새로고침(F5) 또는 개발자도구에서 새로고침 버튼 클릭 참고 제주코딩벵스캠프 - 아는 만큼 보이는 크롬 개발자 도구 - 언어 변경하기 https://www.youtube.com/watch?v=C7-vDqn4.. 2023. 11. 15. [Chrome] 개발자 도구 - 실행 및 레이아웃 설정 ● 실행 - F12 - 최근 사용 탭 열기 · Mac : Cmd + Opt + I · Window : Ctrl + Shift + I - 요소 탭 열기 · Mac : Cmd + Opt + C · Window : Ctrl + Shift + C - 최근 사용 탭 열기 · Mac : Cmd + Opt + J · Window : Ctrl + Shift + J ● 레이아웃 설정 - 오른쪽 상단 세로 점 3개 버튼 클릭 - 왼쪽부터 창 분리 / 좌측 고정 / 하단 고정 / 우측 고정 - 모니터가 2개 이상일 경우 창 분리 모드 추천 참고 제주코딩벵스캠프 - 아는 만큼 보이는 크롬 개발자 도구 - 실행하기 https://www.youtube.com/watch?v=4U9yRzF810Y&list=PLkfUwwo13dlUJ.. 2023. 11. 9. 이전 1 다음 반응형
