브라우저 개발자 도구를 사용하여 CSS를 적용하는 방법
게시 됨: 2021-11-25약간의 CSS로 사이트 스타일을 지정하는 방법을 찾고 계십니까? 다른 방법이 있습니다. 이 가이드에서는 할 수 있는 몇 가지 예와 함께 브라우저 개발자 도구를 사용하여 CSS를 적용 하는 방법을 보여줍니다.
응용 프로그램이나 웹 사이트를 개발할 때 개발자는 작업을 수행하는 데 도움이 되는 다양한 도구를 사용합니다. 가장 인기 있는 도구 중 하나는 브라우저 개발자 도구입니다. 그것이 없으면 웹 사이트에서 작업하는 것이 훨씬 더 복잡해집니다.
대부분의 브라우저는 자체 내장 개발자 도구를 제공합니다. 대부분 비슷하지만 몇 가지 다른 옵션이 있습니다. 사용자의 거의 66%가 Chrome을 사용한다는 점을 고려하여 이 가이드에서는
크롬 개발자 도구. 그것은 가장 완벽한 것들 중 하나이며 성능과 다양한 기능으로 인해 브라우저에서 두드러집니다.
브라우저 개발자 도구를 사용하여 CSS를 적용하는 방법에 대해 알아보기 전에 먼저 Chrome 개발자 도구와 이를 사용하여 수행할 수 있는 작업에 대해 알아보겠습니다.
참고 : 여기에서 몇 가지 개념을 설명하지만 이 가이드를 따르려면 CSS와 CSS 작동 방식에 대한 기본적인 이해가 있어야 합니다.
크롬 개발자 도구
먼저 Chrome에서 도구를 열어야 합니다. 이를 위해 3가지 옵션이 있습니다.
- 키워드에서 F12 키를 누릅니다.
- 화면의 아무 곳이나 마우스 오른쪽 버튼으로 클릭하고 검사 를 선택합니다.
- 사용자 아바타 옆 오른쪽 상단의 점 3개 아이콘 을 누르고 추가 도구 > 개발자 도구 로 이동합니다.
이 세 가지 옵션 중 하나를 선택하면 다음과 같은 DevTools가 열립니다. 개발자 도구는 약간 다르게 보일 수 있지만 요소는 동일합니다.
보시다시피 여러 탭이 있으므로 웹 사이트의 HTML 출력을 보여주는 요소 탭에 있는지 확인하십시오. 도구는 현재 창, 즉 개발자 도구를 열 때 브라우저의 활성 탭에 관한 모든 정보를 가져옵니다.
여러 개발자 도구 창을 동시에 열 수 있으며 각 창에는 브라우저의 다른 탭 정보가 표시됩니다.
브라우저 개발자 도구에서 HTML 요소를 찾는 방법
도구의 요소를 자세히 살펴보면 대부분의 요소를 클릭하여 열 수 있음을 알 수 있습니다. 또한 다른 요소 안에 중첩된 요소는 해당 요소 위로 마우스를 가져가면 프런트엔드에서 강조 표시됩니다.
다른 요소를 보면 HTML 상위 요소를 볼 수 있습니다. 클릭 한 번으로 각 요소를 열어 HTML 구조를 자세히 알아볼 수 있습니다. 대부분의 사이트에서 HTML 코드는 상당히 길기 때문에 특정 요소를 찾아야 하는 경우 지루할 수 있습니다. 찾고 있는 요소가 HTML 상위 요소의 큰 목록에 깊이 중첩되어 있는 경우에는 더욱 그렇습니다.
그러나 특정 요소를 찾는 훨씬 쉬운 방법이 있습니다.
특정 요소 찾기
분석할 요소를 마우스 오른쪽 버튼으로 클릭하고 검사 를 선택하기만 하면 됩니다.
인스펙터가 열리면 해당 요소가 선택되고 DevTools 에서 강조 표시됩니다.
위의 스크린샷에서 볼 수 있듯이 로고를 클릭했으므로 개발자 도구에서 요소를 검사할 때 로고 이미지가 이미 선택되어 강조 표시되어 있습니다. 이것은 웹사이트의 전체 HTML 소스 코드 내에서 요소의 깊이를 이해하는 데 도움이 됩니다.
이제 개발자 도구를 사용하여 특정 요소를 선택하는 방법을 알았으므로 한 단계 더 나아가 약간의 사용자 정의 CSS를 추가해 보겠습니다.
CSS 스크립트 라이브 편집
dev 도구 창의 오른쪽을 보면 선택한 요소에 적용된 모든 CSS 규칙이 상속별로 정렬된 것을 볼 수 있습니다.
상속 은 CSS 기능을 설명하는 주요 CSS 개념 중 하나입니다. 그것이 무엇인지 완전히 이해하지 못하더라도 걱정하지 마십시오. 다음 섹션에서 설명하겠습니다.
dev 도구에 고유한 CSS 규칙을 적용하려면 요소 스타일 선언 바로 뒤에 입력하거나 붙여넣어야 합니다.
이 경우 우리의 예에 따라 이전에 선택한 로고의 너비, 배경색 및 테두리를 변경했습니다.
element.style 래퍼에서 수행하는 대신 사이드바의 CSS 규칙에 스크립트를 삽입할 수도 있습니다.
브라우저 개발자 도구의 CSS 상속
CSS 코드를 적용할 수 있고 아무런 차이가 없다면 모든 CSS 규칙이 거기에 있다는 의미가 무엇인지 궁금할 것입니다.
앞서 언급했듯이 상속에 따라 정렬된 선택된 요소에 적용되는 모든 CSS 규칙입니다.
상속 개념은 CSS가 HTML 문서에 적용되는 방식을 설명합니다 . 기본적으로 주어진 요소의 속성에 값이 지정되지 않은 경우 발생하는 일을 제어합니다.
아래 스크린샷을 자세히 보면 사이드바의 모든 CSS 선택기가 동일한 요소(기본 섹션에서 선택한 요소)를 대상으로 한다는 것을 알 수 있습니다.
동일한 요소에 두 개 이상의 규칙을 적용하는 경우 적용되는 규칙이 더 구체적입니다. 이렇게 하면 정의가 없는 속성에 적용되는 상속 동작이 비활성화됩니다.
위의 스크린샷에서 <body> 요소의 background-color 속성은 다음과 같은 규칙으로 주어집니다.
body.custom-background {
배경색: #d8d7e2;
} 이것은 .custom-background 클래스를 포함하는 보다 구체적인 선택기가 있기 때문에 <body> 에 적용되는 다른 모든 규칙을 덮어씁니다.
CSS 상속에 대해 더 알고 싶다면 이 문서를 참조하세요.
이제 해당 요소를 더 잘 이해했으므로 브라우저 개발자 도구를 사용하여 CSS를 적용하는 방법을 살펴보겠습니다.
브라우저 개발자 도구를 사용하여 CSS 스크립트를 적용하는 방법
dev 도구로 작업하고 CSS 스크립트를 작성한 후에는 개발자 도구에서 CSS 코드를 복사하여 웹사이트의 CSS 파일에 추가해야 합니다. 이 섹션에서는 이를 단계별로 수행하는 방법을 보여줍니다.
1) CSS 선택기 가져오기
먼저 선택기를 잡아야 합니다. 개발자 도구를 열고 편집하려는 HTML 요소를 클릭하여 강조 표시합니다. 그런 다음 강조 표시된 요소를 마우스 오른쪽 버튼으로 클릭하고 복사 > CSS 선택기 로 이동합니다.
2) 선택기 세분화
위의 스크린샷에서 클립보드에 복사한 CSS 선택기는 다음과 같습니다.
.site-branding > div:nth-child(1) > span:nth-child(1) > img
경우에 따라 이 선택기가 작동하지 않을 수 있으므로 보다 구체적으로 수정해야 합니다. 예를 들어 훨씬 더 구체적이고 이전 선택기를 덮어쓰는 다음 선택기를 사용할 수 있습니다.
div.site-branding > div.site-logo > span.custom-logo-link > img.custom-logo
3) CSS 규칙 복사
선택기를 사용자 정의하고 작동하는지 확인한 후에는 dev 도구의 오른쪽 사이드바에서 필요한 선언을 복사하십시오.
그렇게 하려면 개발 도구에 추가한 CSS 규칙을 마우스 오른쪽 버튼으로 클릭하고 규칙 복사 를 선택합니다.
4) 웹사이트에 CSS 코드 추가
마지막 단계는 브라우저 개발 도구를 사용하여 방금 생성한 사용자 정의 CSS 코드를 웹사이트 스타일 파일에 추가하여 선택기와 선언을 합치는 것입니다.
설정에 따라 사이트에 사용자 정의 CSS를 포함하는 몇 가지 방법이 있을 수 있습니다. 많은 플러그인과 테마는 자체 CSS 편집기 상자를 제공하며 테마의 CSS 파일에 스크립트를 바로 추가할 수도 있습니다. 몇 가지 다른 옵션을 살펴보겠습니다.
4.1) 테마 커스터마이저의 추가 CSS 편집기
테마 커스터마이저의 추가 CSS 편집기를 사용하여 CSS를 적용하는 간단한 방법입니다. 이것은 WordPress가 기본적으로 사용자 정의 CSS를 추가하기 위해 제공하는 옵션이며 모든 웹 사이트에 있습니다.
사이트에 CSS 코드를 추가하려면 대시보드에서 모양 > 사용자 정의 > 추가 CSS로 이동합니다. CSS 규칙을 편집기에 붙여넣고 Publish 를 누르십시오.
이 방법의 장점은 추가 도구가 필요하지 않고 코드가 실행되기 전에 코드를 실시간으로 미리 볼 수 있다는 것입니다.
4.2) 자식 테마의 CSS 파일
하위 테마를 사용하는 경우 style.css 파일에 사용자 정의 스크립트를 추가할 수 있습니다. CSS 코드가 많은 경우 좋은 옵션입니다.
이렇게 하려면 하위 테마의 style.css 파일을 열고 거기에 CSS 규칙을 붙여넣습니다. 하위 테마에 따라 파일 이름이 다르거나 다른 파일이 있을 수 있습니다. 어떤 경우든 파일 확장자가 .css 이고 올바른 파일을 편집하고 있는지 확인하십시오.
하위 테마의 WordPress 파일을 편집하는 또 다른 대안은 WordPress 대시보드의 모양 탭에서 테마 편집기를 사용하는 것입니다.
여기에 추가하는 CSS 스크립트는 테마 사용자 지정 프로그램에 추가하는 것과 동일한 방식으로 작동하지만 성능이 약간 더 좋을 수 있습니다.
브라우저 개발자 도구에서 CSS 파일 확인
이전 섹션에서 WordPress 사이트에 CSS 스크립트를 추가하는 방법을 설명했습니다. 상상할 수 있듯이 개발자 도구에 표시되는 모든 CSS 규칙은 CSS 파일에서 가져옵니다. 이러한 파일은 웹 사이트에서 동적으로 생성되거나 서버에서 로드되거나 클라이언트 브라우저의 캐시된 파일에서 생성될 수 있습니다.
자세히 살펴보면 dev 도구의 CSS 사이드바에서 규칙 바로 뒤에 CSS 규칙이 포함된 파일 이름이 표시되는 것을 볼 수 있습니다.
파일 이름( style.css )을 클릭하면 모든 활성 CSS 파일과 해당 콘텐츠를 볼 수 있는 dev 도구의 스타일 편집기 화면으로 이동합니다.
이것은 웹사이트에 있는 모든 CSS 파일을 더 잘 이해하는 데 유용할 수 있습니다.
결론
대체로 대부분의 브라우저에는 개발자가 매일 사용하는 매우 강력한 개발자 도구가 포함되어 있습니다. 이 가이드에서는 브라우저 개발자 도구의 주요 기능 중 하나를 보여주었습니다. 개발 도구에서 특정 HTML 요소를 찾는 방법과 CSS를 실시간으로 편집하는 방법을 살펴보았습니다. 또한 CSS 상속과 이것이 왜 중요한지 설명했습니다.
마지막으로 브라우저 개발자 도구를 사용하여 CSS 스크립트를 단계별로 적용하는 방법과 이를 사이트에 추가하는 다양한 방법을 보여 주었습니다.
이 튜토리얼이 흥미롭다면 소셜 미디어에서 친구들과 공유하십시오. 사이트를 개선하기 위한 보다 유용한 가이드는 다음 문서를 참조하십시오.
- CSS로 Divi 메뉴를 사용자 정의하는 방법
- PHP와 CSS로 WooCommerce Shop 페이지를 편집하는 방법