(이글루스) 크롬(chrome) 브라우저의 기능을 이용해 스타일시트(css)가 정의된 부분 찾아내기 Egloos

이번에 블로그의 포스팅 제목을 수정하기 위해 이글루스 스킨 에디터의 '전문가용 편집' css 부분을 수정하는 과정에서 알게된 재미있는 방법이다.

이글루스 스킨을 수정하기 위해 css 내용을 뒤져보며 하나씩 수정하는 것은 어찌보면 다소 무모한 짓이다.
css 에 대해 좀 안다고 하더라도 헷갈리고, 비 전문가라면 아예 손을 대기에도 버겁다.

크롬(chrome) 브라우저에서 제공하는 기능을 이용하면, 지금 내가 보는 부분의 스타일이 어떻게 정의되어 있는지 손쉽게 찾아낼 수 있다.
포스팅 본문 제목의 스타일 정의에 대해 확인해보려 한다.
제목 부분에 마우스를 대고 마우스 우측버튼을 누르면 '요소 검사(N)' 라는 메뉴가 보일 것이다.


'요소 검사(N)' 를 클릭해서 나온 정보에서 우측에 스타일 부분이 표시된 것을 볼 수 있다.
이 중에서 가운데 줄이 쳐진 부분은 중복되거나 쓰이지 않는 스타일 부분이고, 줄이 쳐 있지 않은 부분이 현재 부분에 적용된 스타일 부분임을 알 수 있다.
현재, color: #F09D7F 라는 글자색 정의가 적용 되었음을 확인할 수 있다.
또한, 스타일 부분에서 .content a:active 라는 부분이 보이므로, 스킨 에디터에서 전문가용 편집의 css 내용을 열어 그와 같은 이름으로 정의된 부분을 찾아서 수정해주면 된다.


덧글

  • 2013/02/20 19:23 # 답글 비공개

    비공개 덧글입니다.
  • 2013/02/20 19:30 # 비공개

    비공개 답글입니다.
댓글 입력 영역
* 비로그인 덧글의 IP 전체보기를 설정한 이글루입니다.


통계 위젯 (화이트)

1761576
9901
10303786

google_myblogSearch_side

▷검색어

Flag Counter style2