Inspect Element & Troubleshooting CSS in the Browser, Russ Weakley

[음악] 좋은 날

Max Design의 Russ Weakley입니다 오늘은 어떻게해야할까요? 브라우저에서 요소 검사 기능을 사용하려면 어떻게 구할 수 있는지 가르쳐 줄거야 브라우저에서 한 모든 Inspect Element 작업 Inspect 요소는 브라우저 내부에서 사용할 수있는 강력한 기능입니다 그것은 당신이 모든 종류의 일을 할 수있게하며, 특정 요소를 페이지 및 다른 요소와의 관계 특정 요소와 관련된 모든 CSS를 볼 수 있으며 심지어 특이성이나 체중을 확인하십시오

다양한 선택기와 적용 방법 또한 HTML 및 CSS 편집과 같은 작업을 수행 할 수 있습니다 심지어 웹 페이지에서 콘텐츠가 변경되어 상황이 레이아웃에 어떤 영향을 주는지 확인할 수 있습니다 이제 대부분의 최신 브라우저에는 일종의 Inspect 요소 기능이 있습니다 이 데모에서는 Chrome을 사용할 예정이지만 대부분의 기능 현대적인 브라우저에서 사용할 수 있어야합니다 [BLANK_AUDIO]

그래서 여기에 샘플 웹 페이지가 있습니다 첫 번째 질문입니다 당신은 아마도 Inspect Element에 어떻게 접근할까요? 어떤 요소를 클릭해도됩니다 따라서 이 H2 요소를 선택할 수 있습니다 그것을 오른쪽 클릭하고 Inspect Element를 선택하십시오

그리고 즉시, Inspect Element 기능을 불러올 것입니다 자, 먼저 알게 될 것은 세 개의 주요 패널입니다 첫 번째 요소는 요소 패널입니다 오른쪽에는 CSS 패널 또는 스타일 패널이 있습니다 그리고 실제로 각 패널의 너비를 변경할 수 있습니다

여기 아래쪽에 Pathways 패널이 있습니다 이제는 여러 옵션을 사용할 수 있습니다 우리는 요소, 스타일 및 통로에 중점을 둘 것입니다 [BLANK_AUDIO] 브라우저에 따라 왼쪽 하단의 아래쪽에는 이 기능을 별도의 창으로 열 수 있습니다

그리고 어떤 경우에는 그것을 넣을 수도 있습니다 그 옆에있는 페이지 대신에 페이지가 있습니다 그리고, 당신은 또한 그것을 되돌릴 수 있습니다 [BLANK_AUDIO] 요소를 드래그하면 알 수 있습니다

페이지에서 강조 표시됩니다 그리고 그것은 우리가 볼 수있게 허용합니다 정확히 우리가 지금하고있는 일 그리고 우리는 다른 것을 클릭하여 탐색하도록 선택할 수 있습니다 항목을 추가 할 수 있지만 화살표 키를 사용하여 수행 할 수도 있습니다

그래서 저는 다양한 요소들을 아래로 그리고 위로 움직일 수 있습니다 그러나 화살표 키를 사용하여 요소를 열 수도 있습니다 따라서, nav 요소에 오른쪽 화살표를 사용하면, 나는 이제 그것을 열었고 UL을 볼 수 있습니다 그리고 오른쪽 화살표를 다시 누르면 LI가 내부에서 볼 수 있습니다 그리고 그 안에, 나는 A 요소를 볼 수 있습니다

따라서 화살표 키를 사용하여 벽화가 위아래로 움직이기 때문에 요소를 닫습니다 [BLANK_AUDIO] 이제 알게 될 것 중 하나는, 당신이 일하고 싶어 할지도 모릅니다 실제로 보이지 않는 바닥 글과 같은 요소에 그리고 오른쪽 마우스를 클릭하고 스크롤하여보기를 클릭하면 즉시 그 요소는 페이지 영역으로 올라와 볼 수 있습니다 [BLANK_AUDIO]

우리가 볼 다음은 실제로 브라우저에서 HTML을 편집하는 방법 이제 H2 요소를 클릭하고보기로 스크롤하면 여기에서 볼 수 있습니다 이제이 요소 주변의 다양한 요소를 실제로 편집 할 수 있습니다 그러나 동적으로 생성된다는 것을 명심하십시오 페이지를 새로 고치 자마자 변경 사항이 사라집니다

하지만 우리가 할 수있는 첫 번째 일은 실제로 이것을 H2 (예 : H1)로 변경하십시오 그리고 HTML로 편집을 클릭하면됩니다 다시 말하지만 마우스 오른쪽 버튼을 클릭하여 액세스 할 수 있습니다 그리고 여기에서는 2를 1로 변경할 수 있습니다 클릭을하면 H2가 H1 요소가되었습니다

따라서 HTML을 편집하여 원하는대로 변경할 수 있습니다 그리고 당신은 그들 중 하나를 변경함으로써, 자동으로 종료 태그도 변경됩니다 우리가 할 수있는 또 다른 일은 속성을 추가하는 것입니다 그래서 우리는 수업을 여기에두고 싶을 것입니다 우리는 수업에 참여할 수 있습니다

이제는 해당 요소에 클래스를 추가했습니다 이제 기존 클래스가있는 경우 해당 요소를 두 번 클릭하여 해당 특성으로 수정하십시오 그래서,이 경우, 우리는 그것을 바꿀 수도 있습니다 nav2로 이동하면 갑자기 스타일이 변경됩니다 그리고 물론, 언제든지, 우리는 단지 다시로드 할 수 있습니다

페이지가 원래대로 돌아갑니다 [BLANK_AUDIO] 우리는 실제로 요소 내부의 내용을 변경할 수도 있습니다 예를 들어, 여기에 집이라는 말이 있습니다 우리는 그것을 바꿀 수 있었다

어떤 것 그리고 이제, 그 요소는 그 요소 안에있는 내용이 변경되었습니다 그리고 다시, 우리가 다시로드하자마자, 그것은 되돌아갑니다 [BLANK_AUDIO] 요소를 드래그 앤 드롭하여 새로운 위치로 이동할 수도 있습니다 여기에서 마지막 요소는 Contact Us입니다

그걸 닫으면 실제로 클릭 할 수 있습니다 화살표를 드래그하여 다른 위치로 이동하십시오 [BLANK_AUDIO] 이제 Contact Us가 목록의 첫 번째 항목으로 표시됩니다 따라서 요소를 드래그 앤 드롭 할 수 있습니다

[BLANK_AUDIO] 이제 스타일 구성 요소를 살펴 보겠습니다 다시, 우리가 돌아가서 H2를 찾고 싶다면 요소를 클릭하고 요소 검사를 클릭합니다 이제 해당 요소와 관련된 스타일을 볼 수 있습니다 그래서, 그것은 그렇게 일어납니다, 내부, 우리는 실제로 숨어 있습니다

스팬, 스팬에는 color1의 클래스가 있습니다 그리고 H2 내부에도 있습니다 H2와 다른 스타일들도 영향을 받고 있습니다 이제 모든 요소에 영향을주는 모든 스타일을 볼 수있는 좋은 방법입니다 이 도구는 브라우저에서 CSS를 사용하고 적용하는 방법을 이해합니다

이제 어떤 단계에서라도 선언을 해제 할 수 있습니다 그래서, 만약 내가 그 색깔의 선택을 취소하면, 당신은 그 단어를 보게됩니다 검은 색으로 변했고 그 색을 다시 켤 수 있습니다 속성을 편집 할 수도 있으므로 패딩과 같은 작업을 수행 할 수 있습니다 그리고 나는 그것을 바꿀 수있다

그리고 이제 이것을 10px의 패딩으로 변경했습니다 그래서, 그것은 색깔이었고, 나는 속성과 가치를 모두 바꿨습니다 물론, 언제든지 다시 불러 와서 원래 상태로 되돌릴 수 있습니다 [BLANK_AUDIO] 새 규칙을 추가하도록 선택할 수도 있습니다

여기에 더하기 기호를 클릭하면됩니다 보시다시피, 전체적으로 생성됩니다 새로운 규칙을 사용하면 마진 10 픽셀과 같은 것을 할 수 있습니다 그리고 이제 실제로 새로운 규칙이 추가되었습니다 다시 말하면, 그것은 즉석에서 생성 된 것입니다

페이지를 새로 고침하면 모든 다른 스타일이 사라집니다 [BLANK_AUDIO] 우리가 할 수있는 또 다른 일은 요소의 상태에 대해 작업하는 것입니다 그래서, 우리가이 요소를 보았다면 여기 작은 개 (Small Cogs)라고 불리는이 요소를 검사하고, 실제로 그것이 파란 상태에 있다는 것을 알게 될 것입니다 우리가 그 위에 마우스를 가져갈 때까지 배경은 파란색입니다

그러나 우리가 여기에 가서 국가를 켜면 우리는 마우스를 가져 가면 여러 상태에서 실제로 어떻게 보이는지 알 수 있습니다 그래서,이 경우 활성화 될 때 빨간색으로 변하고 초점이 맞으면 검은 색으로 변합니다 또는 황홀한 색으로 달렸을 때 방문했을 때 차이가 없습니다 하지만이게 당신이 할 수있는 일은 정말로 그 규칙이 여러 가지 상태에서 어떻게 적용되는지 알아 보자 그래서, 당신이 물을 수있는 질문은, if 이 모든 문제로 편집을해야합니다

HTML 또는 CSS를 사용하고 실제로는 아무 데나 저장하지 않습니다 방금 한 일을 모두 어떻게 저장할 수 있습니까? HTML과 CSS 모두에서 버전을 저장할 수 있습니다 이제는 기존 파일을 자동으로 덮어 쓰지 않지만 버전을 텍스트 편집기에 추가 한 다음 원하는 경우 기존 파일을 덮어 씁니다 먼저 HTML 파일을 살펴 보겠습니다 그리고 거기에서 우리가 향하고있는 요소를 검사하면 우리는 그 텍스트를 우리가 원했던 것으로 변경할 수 있습니다

그리고 우리가 끝나면, 가장 빠른 방법은 클릭하는 것입니다 HTML 요소에서 마우스 오른쪽 버튼을 클릭하고 HTML로 복사를 클릭하십시오 이제 전체 페이지를 붙여 넣을 수 있습니다 원하는 텍스트 편집기를 바로 사용할 수 있습니다 그런 다음이를 사용하여 기존 파일을 덮어 쓸 수 있습니다

마찬가지로 CSS를 사용하면 이 경우에는 편집하고 싶습니다 배경으로 빨간색으로 표시 할 수 있습니다 그 작업이 끝나면 실제 이 경우 cogcss라고하는 CSS 파일에 대한 링크입니다 그리고 그걸 가져 왔을 때, 그걸 마우스 오른쪽 버튼으로 클릭하고 다른 이름으로 저장을 할 수 있습니다

이 파일을 원하는 위치로 저장하고 기존 CSS 파일을 덮어 씁니다 따라서 HTML과 CSS 모두에서 매우 빠르고 브라우저에서 직접 수행 한 작업을 쉽게 복사 할 수 있습니다 [BLANK_AUDIO] 그래서, 우리는 그것을 가지고 있습니다 Inspect Element 기능에 대한 매우 빠르고 깔끔한 개요

이걸 가지고 노는 것이 중요합니다 그렇게 단순하고 아름다운 방법입니다 브라우저에서 CSS 문제 해결을 바로 수행 할 수 있습니다 [BLANK_AUDIO] CSS 문제 해결에 대해 자세히 알고 싶다면, 여기에서 사용한 요소를 사용하여 재생하거나 심지어 너 자신을 퀴즈로 만들지도 모르지 6 단계의 쉬운 단계에서 CSS 문제 해결이라는 새로운 과정

learnablecom에 있습니다 이 코스는 초급자를 대상으로합니다 누가 CSS 레이아웃 문제를 경험했는지 거기에서 만나자

[음악]