개발자도구사용 2
[개발자 도구] class 확인하기
안녕하세요. 플입니다. 개발자 도구에서 클래스를 확인해볼게요. 1. 태그 선택 class를 확인하기 위해서는 class가 적용된 태그에서 확인해야겠죠? 클래스가 적용된 태그를 아무거나 선택해줍니다. 2. 클래스 보기 오른쪽에 css가 잔뜩 적힌 창이 있을 거예요. 그쪽에서 오른쪽 상단에 보시면 .cls이라고 적힌 글이 보이실 거예요. .cls는 class를 말해요. 꾹 눌러봅시다. 그러면 이렇게 사용된 클래스를 확인할 수 있어요. banner라는 클래스를 사용했네요. 여기서는 클래스 추가가 가능해요. 3. 클래스 체크 해제 체크박스를 해제하면 이렇게 클래스를 해제해볼 수 있어요. 해제하면 어떤 클래스에서 css가 적용된 건지 어디에서 오류가 생긴 건지 찾을 때 유용해요. 그럼 이만. 총총.
[개발자 도구] css 체크박스 활용
안녕하세요. 플입니다. 오늘은 개발자 도구 중 css 체크박스 활용을 해볼게요. 1. css 체크박스 이것을 css 체크박스라고 부르는지는 잘 모르겠으나 제가 가리키는 것은 이 부분입니다. style탭에서 보면 홈페이지에 적용된 css를 쭉 볼 수 있어요. 각각 css 값 앞에 마우스를 올리면 체크박스가 나타납니다. 그 체크박스를 활용해볼게요. 2. 체크박스 활용 본격적으로 어떻게 활용하는지 알아볼게요. 먼저 홈페이지의 원래 상태예요. 적용된 css 중 아무거나 하나를 해제해볼게요. 바뀐 게 보이시나요? 이런 식으로 하나씩 체크를 해제해보면서 어떤 기능을 하는지 알아볼 수 있어요. 어디가 문제인가 하면서 하나씩 체크를 해제했다 체크했다가 하면서 찾을 수 있어요. 그럼 이만. 총총.