로고를 오른쪽으로 5픽셀만 옮기거나 파란색 배경을 적용하면 사이트가 더 좋아 보이지 않을까요? 대표 게시물의 이미지에 테두리나 그림자 효과를 추가하면 더욱 돋보이지 않을까요? 파이어폭스(Firefox) 같은 최신 브라우저에는 웹 개발자 도구(Web Developer Tools)가 내장되어 있어, 사이트의 내부 구조를 들여다보고 실시간으로 수정하면서 그 결과를 즉시 확인할 수 있습니다.
이 글에서는 파이어폭스의 웹 개발자 도구를 활용해 어떤 사이트든 실시간으로 편집하는 방법을 단계별로 알아봅니다.
참고: 이 튜토리얼은 크롬(Chrome), 오페라(Opera), 사파리(Safari)를 포함한 대부분의 브라우저에서도 동일하게 적용할 수 있습니다.
웹 개발자 도구 살펴보기
파이어폭스의 웹 개발자 도구는 DOM 요소 전체를 표시하는 기능부터 페이지 로딩 속도 측정까지 다양한 도구를 제공하는 종합 세트입니다. 이 튜토리얼에서는 그중 '검사기(Inspector)'와 '스타일 에디터(Style Editor)' 두 가지만 사용합니다.
파이어폭스를 실행한 뒤 아무 사이트나(또는 본인의 사이트) 방문하세요. 화면 오른쪽 상단의 햄버거 메뉴에서 '웹 개발자 → 스타일 에디터'를 선택하거나, 키보드에서 Shift + F7 조합키를 누르면 됩니다.
웹 개발자 패널은 브라우저 창 한쪽, 보통 하단에 나타납니다. 패널 오른쪽 위의 점 세 개 버튼을 클릭해 '오른쪽/왼쪽에 도킹' 또는 '별도 창으로 분리'를 선택하면 위치를 자유롭게 변경할 수 있습니다.
참고: 이 글은 HTML과 CSS 코딩 방법 자체를 다루지 않습니다. 기본기를 먼저 익히고 싶다면 관련 입문 자료를 함께 참고하세요.
요소 검사하기
요소의 모양을 변경하려면 먼저 해당 요소를 정확하게 식별할 수 있어야 합니다. 개발자 도구 툴바의 첫 번째 버튼을 클릭하거나 Ctrl + Shift + C 단축키를 눌러 요소 선택 모드를 활성화하세요.
마우스를 사이트 위로 움직이면 웹페이지의 각 요소가 차례로 강조 표시되는 것을 볼 수 있습니다. 요소 옆에는 해당 요소의 주요 식별자가 팝업 형태로 함께 표시됩니다.
요소를 클릭하면 개발자 도구의 검사기(Inspector) 탭에서 해당 요소가 자동으로 선택됩니다.
수정하고 싶은 요소를 찾았다면, 검사기에서 해당 항목을 마우스 오른쪽 버튼으로 클릭한 뒤 나타나는 메뉴에서 '복사 → CSS 선택자(CSS Selector)'를 선택하세요.
실시간 편집 시작하기
요소의 CSS 선택자를 클립보드에 복사했다면, 개발자 도구 창의 스타일 에디터 탭으로 이동하세요. 왼쪽 상단의 '+' 버튼을 클릭하면 문서에 새 스타일시트를 만들어 추가할 수 있습니다.
새로 생성된 빈 스타일시트에 복사해 둔 CSS 선택자를 붙여넣으세요. 그다음 공백을 하나 추가하고 여는 중괄호와 닫는 중괄호 { }를 입력합니다.
CSS에서 요소의 외관은 먼저 CSS 선택자 같은 식별자로 요소를 '타겟팅'한 후, 중괄호 안에 외관에 영향을 주는 규칙들을 작성하는 방식으로 정의됩니다. 여는 중괄호와 닫는 중괄호 사이에 입력된 모든 내용은 타겟팅된 요소에 적용됩니다.
예를 들어 아래 규칙을 추가해 보겠습니다.
display: none;
이 규칙은 해당 요소를 화면에서 숨깁니다. 페이지에서 원하는 요소를 올바르게 타겟팅했는지 확인하는 가장 쉬운 방법입니다. 요소가 사라졌다면 그것이 맞는 것이므로, 이 규칙을 지우고 다른 규칙들을 시험해 보면 됩니다. 사라지지 않았다면 검사기로 돌아가 다른 요소를 다시 선택해야 합니다.
여기서 CSS 코딩을 자세히 설명하지는 않지만, 아래처럼 자주 쓰이는 규칙 몇 가지를 직접 실험해 볼 수 있습니다.
border: 2px solid rgba(255,0,0,0.5);
color: #333;
font-size:20px;
CSS 스타일시트에 규칙을 추가할 때마다 사이트의 요소가 실시간으로 변하는 것을 확인할 수 있습니다.
마지막으로 꼭 기억할 점은, 이렇게 수정한 내용은 어디에도 저장되지 않는다는 것입니다. 수정 결과가 마음에 든다면 코드를 TXT 파일이나 평소 사용하는 노트 앱 등에 복사해 두세요. 그래야 본인이나 디자이너·개발자가 나중에 사이트의 스타일시트에 해당 코드를 추가해 변경 사항을 영구적으로 반영할 수 있습니다. CSS를 체계적으로 배우고 싶다면 코딩 학습 온라인 게임을 활용하는 것도 좋은 방법입니다.