아래 화면은 브라우저에 개발자도구를 띄운 화면입니다.
보통 브라우저를 띄운 상태에서 키보드의 F12키를 누르면 해당 도구창이 뜹니다.
개발자도구는 HTML/CSS 소스 확인, 웹페이지 구조 확인, 웹페이지 속도 측정 등 웹페이지를 테스트/디버깅하는 도구입니다.
저희 쇼핑몰 스킨은 EYE-DESIGN을 통해 배너 및 상품디스플레이 등을 손쉽게 교체할 수 있지만
그외에는 에디터를 이용하여 스킨 소스를 직접 수정해야 합니다.
이럴떄 개발자도구를 활용하면 소스 수정이 편리합니다.
1. 개발자도구의 왼쪽 상단에 있는 화살표 부분을 선택한 후
2. 브라우저 화면의 원하는 위치를 선택하게 되면
3. 그 아래 HTML 소스와 연결된 CSS가 활성화되어 표시됩니다.
4. 아래 화면에서 h3 타이틀을 수정하려면 css/user.css의 232번째줄을 수정하면 됩니다.
이떄, 개발자도구를 이용하면 실제 소스를 수정하지 않더라도 개발자도구에 HTML/CSS를 수정하여 변경된 화면을 미리 경험할 수도 있습니다.
만약, 검은색 글자(color:#000)를 빨간색 글자(color:#f00)로 변경하고자 한다면
아래 CSS 부분에서 color: 다음에 오는 #000 을 마우스 클릭하고 #f00 을 입력하면 빨간색 글자로 변경되어 보입니다.
한번, 수정해보세요.