개발자 도구15

• 

  [Chrome]크롬 개발자 도구 실행 방법 크롬 개발자 도구 실행 방법 일반적으로 F12 단축키를 통해 크롬 개발자 도구를 실행할 수 있지만, 특정 웹 사이트에서 F12 단축키에 특정 이벤트 핸들러 함수를 등록했거나 사용 중인 OS가 Mac인 경우 F12 단축키가 동작하지 않습니다. 이번 포스팅은 F12 단축키를 사용하지 않고 크롬 개발자 도구를 실행할 수 있는 몇 가지 방법을 소개합니다. 참고로 제가 사용하고 있는 PC의 운영체제는 Mac이므로 사진과 다를 수 있습니다. 마우스 우클릭 첫 번째 방법으로 마우스 우클릭으로 크롬 개발자 도구를 실행할 수 있습니다. 특정 HTML DOM 요소의 스타일 또는 속성을 확인하고 싶은 경우 요소를 마우스 우클릭 버튼으로 클릭하고 검사를 선택합니다. 예를 들어, Naver 메인 사이트에서 로고의 스타일 또는 .. 개발자 도구/크롬(Chrome) 2022. 10. 14.

• 

  티스토리와 CodeSandBox 연동 CodeSandBox CodeSandBox는온라인 코드 에디터입니다. 사용방법은 이미 포스팅하였으므로 클릭하여 확인부탁드리겠습니다. 연동방법 1. 우측 상단의 Share 클릭 → Embed 클릭 2. 좌측 중앙의 Copy Embed Code 클릭 3. 티스토리에서 HTML모드로 들어갑니다. 4. 복사하였던 내용을 원하는 위치에 붙여 넣기 합니다. 5. 붙여 넣기 후 다시 기본 모드로 돌아와서 추가적으로 작성해야 하는 내용이 있다면, 작성 후 완료하면 됩니다. 아래는 연동 샘플입니다. 6. 크기 조정 방법 HTML모드로 들어가서 width와 height를 입력합니다. Embed의 기능 소개 1. Embed Light Theme : 선택시 배경을 흰색으로 변경합니다. Editor + Preview : 코드와.. 개발자 도구/CodeSandbox 2021. 7. 14.

• 

  CodeSandBox 사용 방법 CodeSandBox CodeSandBox는 온라인 코드 에디터입니다. 이클립스 또는 VSCode 같은 개발 도구를 설치하지 않아도 온라인에서 웹 개발 및 간단한 코드를 작성할 수 있습니다. 단, FrontEnd 개발 및 테스트 한정입니다. 링크 : https://codesandbox.io/dashboard CodeSandbox CodeSandbox is an online editor tailored for web applications. codesandbox.io CodeSandBox에서 지원하는 기능 및 특징 GitHub 연동 심플한 코드 관리 VSCode와 비슷한 UI와 편리한 사용방법 작업한 코드 파일로 다운로드 가능 유료 버전 구매했을 경우 코드 비공개 가능함 CodeSandBox 간단한 사용 .. 개발자 도구/CodeSandbox 2021. 7. 2.