크롬 / 요소 검사 패널 레이아웃 변경하는 방법

대부분의 웹브라우저가 요소 검사 기능을 갖추고 있습니다. 파이어폭스가 가장 유명하기는 하지만, 크롬을 주로 쓰다보니 크롬의 요소 검사가 제일 편합니다.

크롬 요소 검사를 실행(F12)하면 HTML을 보여주는 패널과 CSS를 보여주는 패널이 세로로 배열되거나 가로로 배열되는데, 요소 검사 부분의 크기에 따라 자동으로 변경됩니다. 만약, 가로 또는 세로로 고정하고 싶다면...

  • 요소 검사의 오른쪽 위에 있는 점 세 개 아이콘을 클릭합니다.

  • Settings를 클릭합니다.

  • Pannel layout를 적절히 설정합니다.

  • 예를 들어 horizontal로 설정하면 항상 다음과 같은 모양으로 나옵니다.

Related Posts

Brackets / 실시간 미리보기 사용하는 방법

Brackets / 실시간 미리보기 사용하는 방법

브라켓에는 실시간 미리보기 기능이 있습니다. 에디터에서 코드를 변경하면 바로 웹브라우저에 반영되는 것이죠. 어떻게 실시간 미리보기를 사용하는지 알아보겠습니다. 실시간 미리보기를 할 HTML 문서를 열고, 오른쪽에 있는 번개 모양 아이콘을 클릭합니다. 실시간 미리보기를 처음 사용한다면, 구글 크롬이 필요하고 HTML과 CSS만 가능하다는 메시지가 나옵니다. 을 클릭하면… 크롬에서 HTML 문서를 보여줍니다. 코드에 커서를 위치시키면, 그 부분이 크롬에서 강조됩니다. 코드를 수정하면 ...

상업적으로도 사용 가능한 무료 텍스트 에디터 모음

상업적으로도 사용 가능한 무료 텍스트 에디터 모음

개인 뿐만 아니라 기업에서도 사용할 수 있는 무료 텍스트 에디터 모음입니다. 라이선스는 바뀔 수 있으니, 사용 시 다시 한 번 확인하시기 바랍니다. 정렬은 알파벳순입니다. AcroEdit Platforms : Windows Atom Platforms : Windows / MAC / Linux Brackets Platforms : Windows / MAC / Linux Notepad ++ Platforms : Windows Visual Studio Code Platforms : Windows / MAC / Linux

에디트플러스(EditPlus) 구입하는 방법과 과정

에디트플러스(EditPlus) 구입하는 방법과 과정

에디트플러스 에디트플러스는 윈도우에서 사용하는 텍스트 에디터입니다. 가볍고, 유용한 기능을 포함하고 있으며, HTML, PHP, Java, C/C++, CSS, ASP, Perl, JavaScript, VB Script, Python, Ruby 등 다양한 언어에 대한 코드 하이라이트를 제공합니다. 또한 FTP/SFTP로 원격 서버에 접속하여 바로 코딩을 할 수 있는 기능을 포함하고 있습니다. 코드 하이라이트는 직접 만들어 사용할 수도 있고, 다른 사용자가 ...

Lighthouse로 사이트 속도 측정과 개선 사항 확인하는 방법

Lighthouse로 사이트 속도 측정과 개선 사항 확인하는 방법

사이트 속도와 관련된 문제를 파악할 때 PageSpeed Insights를 많이 이용합니다. 약간 귀찮은 점은 속도 측정을 위해서 PageSpeed Insights에 접속하고 URL을 붙여 넣여야 한다는 것입니다. 만약 많이 불편하다면 Lighthouse를 사용해보세요. 크롬 확장 기능으로 추가하여 원하는 페이지를 바로바로 검사할 수 있습니다. Lighthouse는 웹 앱의 품질을 개선하는 오픈 소스 자동화 도구입니다. Lighthouse는 Chrome 확장프로그램, 커맨드 ...

에디트플러스 / 탭을 스페이스로, 스페이스를 탭으로 바꾸는 방법

에디트플러스 / 탭을 스페이스로, 스페이스를 탭으로 바꾸는 방법

코딩을 할 때 들여쓰기를 합니다. 들여쓰기를 어떻게 할지에 대해서 논쟁이 있습니다. 탭으로 할지 스페이스(공백)으로 할지, 2칸으로 할지 4칸으로 할지… 프로그래밍 언어에 따라 선호하는 기준이 다릅니다. 다행히도 요즘 텍스트에디터는 그 설정을 쉽게 바꿀 수 있습니다. 귀찮은 것은 이미 작성한 코드를 변경하는 것이죠. 에디트플러스를 사용한다면 탭을 스페이스로, 스페이스를 탭으로 쉽게 바꿀 수 있습니다. ...

IE8, IE9에서 placeholder 적용되게 하는 방법

IE8, IE9에서 placeholder 적용되게 하는 방법

input이나 textarea에 placeholder 속성으로 어떤 내용을 입력할 지 안내할 수 있습니다. HTML5에 새로 추가된 속성으로 label을 대체할 수 있는 유용한 속성입니다. placeholder를 이용한 간단한 예는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML Attribute | placeholder</title> <style> ...

웹사이트가 IE8, IE9, IE10에서 잘 나오는지 테스트하는 방법

웹사이트가 IE8, IE9, IE10에서 잘 나오는지 테스트하는 방법

웹사이트를 만들 때 IE에서 잘 나오는지 확인을 해야 합니다. 다른 웹브라우저는 최신 버전을 사용한다고 가정을 하는데, IE는 윈도우에 종속되어 있어서 최신 버전을 사용할 수 없는 경우가 있거든요. 예를 들어 윈도우 XP는 IE8, 윈도우 Vista는 IE9까지만 사용할 수 있습니다. 각 버전의 IE에서 사이트가 잘 나오는지 테스트하는 방법 중의 하나는 IE 또는 Edge에 ...

크롬 / 요소 검사 패널 레이아웃 변경하는 방법

크롬 / 요소 검사 패널 레이아웃 변경하는 방법

대부분의 웹브라우저가 요소 검사 기능을 갖추고 있습니다. 파이어폭스가 가장 유명하기는 하지만, 크롬을 주로 쓰다보니 크롬의 요소 검사가 제일 편합니다. 크롬 요소 검사를 실행(F12)하면 HTML을 보여주는 패널과 CSS를 보여주는 패널이 세로로 배열되거나 가로로 배열되는데, 요소 검사 부분의 크기에 따라 자동으로 변경됩니다. 만약, 가로 또는 세로로 고정하고 싶다면… 요소 검사의 오른쪽 위에 있는 점 ...

clipboard.js / 클립보드에 복사하게 해주는 스크립트

clipboard.js / 클립보드에 복사하게 해주는 스크립트

clipboard.js clipboard.js는 특정 요소를 클릭했을 때 클립보드에 복사하게 해주는 스크립트입니다. 홈페이지 : https://clipboardjs.com/ GitHub : https://github.com/zenorocha/clipboard.js/ 사용하기 clipboard.min.js만 HTML에 연결하면 됩니다. 다운로드하여 사용할 수도 있고 CDN을 이용할 수도 있습니다. CDN 리스트는 다음 링크에 있습니다. https://github.com/zenorocha/clipboard.js/wiki/CDN-Providers 기본 문법 다음은 가장 간단하게 구성한 기본 문법입니다. 클래스의 값이 btn인 요소를 클릭하면 data-clipboard-text의 값이 클립보드로 복사됩니다. var clipboard = new ClipboardJS( '.btn' ); ...

안드로이드 스튜디오 / 구글 플레이(Google Play)에 등록하는 APK 파일 만드는 방법

안드로이드 스튜디오 / 구글 플레이(Google Play)에 등록하는 APK 파일 만드는 방법

구글 플레이(Google Play)에 앱을 등록하려면 APK 형식으로 빌드해야 합니다. 이때 업로드 키도 필요합니다. 업로드 키: 첫 번째 버전을 서명하는 데 사용하는 키입니다. 이후 모든 버전을 동일한 키로 서명하여 본인이 업로드한 버전임을 증명할 수 있습니다. 업로드 키는 안전한 곳에 보관하세요. 업로드 키가 분실 또는 손상되면 개발자 지원팀에 연락하여 교체하시기 바랍니다. 업로드 키를 만들고 ...