크롬 검사 개발툴 기능으로 간단하게 CSS 코딩 전/후 결과를 비교하는 방법
가끔씩 댓글로 CSS 설정 완료 후 적용이 잘 안된다는분이 계십니다. 그럴때는 간단하게 크롬에서 직접 비교해서 테스트 할 수 있는 방법이 있습니다. 당연히 크롬을 이용해서 해야 합니다. 물론 다른 브라우저에서도 해당 기능을 지원하겠지만 개인적으로는 크롬이 더 편하더군요.
이렇게 font-weight: bold; 를 입력해도 글씨가 두꺼워지지 않는다는 의견이 있었습니다. 과연 실제로 적용이 안 되는 건지 확인해 보는 방법은 직접 테스트해보는 방법일 겁니다. 티스토리 스킨의 CSS 편집을 통해 비교할 수 있지만 더 확실한 방법은 방금도 말씀드렸듯 크롬에서 검사기능을 활용하는 것 입니다.
해당 댓글의 본문을 확인했습니다. 현재 친효스킨에서는 B기능이 형광펜처럼 표시가 되는 기능으로 업데이트 되어 있습니다. 여기 보시면 일부러 굵기를 normal 로 나오도록 설정해놨습니다. 이것을 굵게 만들고 싶은데 안 된다는 이야기일 겁니다. 과연 그런지 직접 테스트해 봅시다. 크롬에서요.
해당 부분에서 마우스 오른쪽 버튼을 눌러서 검사 메뉴로 들어갑니다.
그러면 현재 지정된 영역에 대해서 HTML 태그 부분을 찾게 됩니다. 이 창은 크롬 DevTools 라고 하여 디벨롭툴 이라고도 합니다. 개발툴로서 좀 더 편리하고 직관적으로 파악할 수 있다는 장점이 있는 크롬 툴 입니다.
해당 영역이 선택된 상태로 오른쪽 상단에 있는 element.style {} 부분에 이제 원하는 CSS 매소드를 입력하여 적용이 잘 되는지 테스트를 해볼 수 있습니다.
여기에서는 굵기 부분이 적용이 되는지 안 되는지 파악하기 위해서 font-weight: bold;를 찾습니다. 크롬 개발툴이 좋은점은 이렇게 자동완성기능이 지원 된다는 점 입니다. 그러면 좀 더 편리하게 CSS 매소드를 찾을 수 있습니다. font-weight: bold;를 찾았으니 한번 적용시켜 봅니다.
그리고나서 이렇게 체크를 적용하고 해제하면서 스타일 상태를 직접 눈으로 확인할 수 있습니다. 테스트해보니 bold 스타일이 정상적으로 잘 적용된다는 사실을 알 수 있습니다. 이런식으로 원하는 CSS 매소드가 현재 스킨에서 정상 작동하는지 알아보기 위해서 간단하게 크롬 개발툴로 확인이 가능합니다. 끝.
"친절한효자손 취미생활" 을 검색!
