loading

친절한효자손 취미생활

반응형

가끔씩 댓글로 CSS 설정 완료 후 적용이 잘 안된다는분이 계십니다. 그럴때는 간단하게 크롬에서 직접 비교해서 테스트 할 수 있는 방법이 있습니다. 당연히 크롬을 이용해서 해야 합니다. 물론 다른 브라우저에서도 해당 기능을 지원하겠지만 개인적으로는 크롬이 더 편하더군요.


이렇게 font-weight: bold; 를 입력해도 글씨가 두꺼워지지 않는다는 의견이 있었습니다. 과연 실제로 적용이 안 되는 건지 확인해 보는 방법은 직접 테스트해보는 방법일 겁니다. 티스토리 스킨의 CSS 편집을 통해 비교할 수 있지만 더 확실한 방법은 방금도 말씀드렸듯 크롬에서 검사기능을 활용하는 것 입니다.


해당 댓글의 본문을 확인했습니다. 현재 친효스킨에서는 B기능이 형광펜처럼 표시가 되는 기능으로 업데이트 되어 있습니다. 여기 보시면 일부러 굵기를 normal 로 나오도록 설정해놨습니다. 이것을 굵게 만들고 싶은데 안 된다는 이야기일 겁니다. 과연 그런지 직접 테스트해 봅시다. 크롬에서요.


해당 부분에서 마우스 오른쪽 버튼을 눌러서 검사 메뉴로 들어갑니다.


그러면 현재 지정된 영역에 대해서 HTML 태그 부분을 찾게 됩니다. 이 창은 크롬 DevTools 라고 하여 디벨롭툴 이라고도 합니다. 개발툴로서 좀 더 편리하고 직관적으로 파악할 수 있다는 장점이 있는 크롬 툴 입니다.


해당 영역이 선택된 상태로 오른쪽 상단에 있는 element.style {} 부분에 이제 원하는 CSS 매소드를 입력하여 적용이 잘 되는지 테스트를 해볼 수 있습니다.


여기에서는 굵기 부분이 적용이 되는지 안 되는지 파악하기 위해서 font-weight: bold;를 찾습니다. 크롬 개발툴이 좋은점은 이렇게 자동완성기능이 지원 된다는 점 입니다. 그러면 좀 더 편리하게 CSS 매소드를 찾을 수 있습니다. font-weight: bold;를 찾았으니 한번 적용시켜 봅니다.


그리고나서 이렇게 체크를 적용하고 해제하면서 스타일 상태를 직접 눈으로 확인할 수 있습니다. 테스트해보니 bold 스타일이 정상적으로 잘 적용된다는 사실을 알 수 있습니다. 이런식으로 원하는 CSS 매소드가 현재 스킨에서 정상 작동하는지 알아보기 위해서 간단하게 크롬 개발툴로 확인이 가능합니다. 끝.





반응형

공유하기

facebook twitter kakaoTalk kakaostory naver band

댓글

비밀글모드

  1. 효자손님, 따로 글까지 써주시고.. 정말 감사합니다.

    알려주신 대로 해보니 검사툴에서는 bold가 적용되는데, 글쓰기에서는 그대로 적용이 안되길래


    다시 보니.. 제가 다운받은 최신버전 스킨에 형광펜 코딩이 이미 들어가 있네요.

    그래서 1개는 bold, 1개는 normal이 2개 들어가 있다보니 normal이 적용되고 있었습니다..

    앞으로 질문하기 전에 알려주신 검사기능으로 잘 알아보겠습니다. 친절한 답변 감사합니다. 좋은하루 되세요!
    2020.02.25 21:03 신고