'검증 도구(개발 모드)'를 사용해 보세요!

카탈로그

검증 도구란

검사 도구 표시

검증 도구의 화면 구성

보고 싶은 코드를 골라보세요.

코드 편집해주세요.

요소의 크기와 여백을 확인하다

한번 디자인해보세요.

총결산

검증 도구란
예컨대 좋아하는 음식을 먹을 때
"이 요리는 어떤 재료를 사용합니까?"
궁금하시죠?
프로그램도 마찬가지로 좋아하는 디자인 사이트를 보았다
"이 사이트는 어떤 코드로 작성되었나요?"
신경 쓰여.

요리라면 해줄 사람한테 물어보면 알려주지.
그럼 프로그램은 누구에게 물어봐야 하나요?
설마 본인을 직접 만나면 안 되는 건가..
이럴 때 활약하는 건'검증 도구'!
개발자 모드라고도 부른다.
검증 도구를 사용하면 코드가 아래 사진처럼 나타납니다.

이'검증 도구'는 매우 편리하다. 다른 것은'다른 코드를 넣어 봐','디자인을 바꾸어 봐'등이 있는데 많이 할 수 있다!
특히 자기가 사이트를 만들 때.
"예상대로 동작이 안 나와요".
이런 문제에 직면했을 때, 매우 강한 견해를 가지게 될 것이다‼
그럼 바로 사용법을 배우세요!
디렉토리로 돌아가기
검사 도구 표시
우선 수강생에게 검증 코드를 보여 준다.

작성된 코드는 Google Crome 등으로 표시됩니다.

마우스 오른쪽 버튼을 클릭하고 유효성 검사를 클릭합니다.
또는 키보드의 F12 키를 누릅니다.

주의
호칭은'검증','요소의 검증','개발자를 위한 도구'등 다양하다.

코드가 이렇게 가지런하게 표시되어 있다.
디렉토리로 돌아가기
검증 도구의 화면 구성
유효성 검사 도구는 다음 화면으로 구성됩니다.

빨간 상자... HTML 등 구조와 관련된 코드.
파란색 상자... CSS 등 장식과 관련된 코드입니다.
하지만 코드의 일부분은▶」을 참고하십시오.
클릭하여 펼칠 수 있습니다. 필요에 따라 확인하세요.
디렉토리로 돌아가기
보고 싶은 코드를 골라보세요.
4

아이콘 선택을 클릭합니다.파란색으로 변하다.

4

원하는 코드에 커서를 놓습니다.클릭하면 고정됩니다

디렉토리로 돌아가기
코드 편집해주세요.
4

코드를 마우스 오른쪽 버튼으로 클릭하여 [Edit as HTML]을 선택합니다

4

편집 모드이기 때문에 좋아하는 코드로 편집했습니다

편집된 부분을 사이트의 재독입 등으로 다시 열면 원래처럼 된다.

디렉토리로 돌아가기
요소의 크기와 여백을 확인하다
CSS 등으로 레이아웃을 구성할 때 요소의 크기와 공백은'position','margin'등으로 기술한다.
하지만 글자만으로는 디자인의 느낌을 잡기 어려운데...
검증 도구에는'메트릭스'로 불리는 요소의 위치 관계를 나타내는 도구도 준비돼 있다.
아래 그림에서 보듯이 검증 도구의 맨 아래 등에는 모두 준비가 되어 있으니 반드시 사용하세요!

디렉토리로 돌아가기
한번 디자인해보세요.
다음 그림에서 볼 수 있듯이 체크 표시를 제거하면 설계 반영을 수정할 수 있습니다.
편집된 부분을 사이트의 재독입 등으로 다시 열면 원래처럼 된다.

또한 숫자를 클릭하거나 두 번 클릭하면 글꼴 크기와 페이지 간격도 쉽게 변경할 수 있습니다!

디렉토리로 돌아가기
총결산
검증 도구는 사이트를 제작할 때 매우 편리하다.
또'콘솔로 자바스크립트 확인'등도 가능하다.
다양한 기능을 활용해 좋은 사이트를 즐겁게 만들어보자!
디렉토리로 돌아가기