로고가 오른쪽으로 5픽셀 이동했거나 배경이 파란색이면 사이트가 더 보기 좋습니까? 추천 게시물의 이미지에 테두리나 그림자를 추가하면 이미지가 더 돋보이게 될까요? Firefox와 같은 최신 브라우저에는 사이트의 내부 작동을 검사하고 실시간으로 편집하여 결과를 실시간으로 볼 수 있는 웹 개발자 도구가 함께 제공됩니다.
이 튜토리얼에서는 Firefox의 웹 개발자 도구를 사용하여 사이트를 실시간 편집하는 방법을 배웁니다.
참고 :이 튜토리얼은 Chrome, Opera, Safari를 포함한 대부분의 브라우저에 적용됩니다.
웹 개발자 도구를 만나보세요
Firefox의 웹 개발자 도구는 모든 DOM 요소 표시에서 속도 측정에 이르기까지 포괄적인 도구 세트입니다. 이 튜토리얼에서는 "Inspector"와 "Style Editor" 도구만 있으면 됩니다.
Firefox를 실행하고 귀하의 사이트를 방문하십시오. Firefox의 햄버거 메뉴(기본적으로 오른쪽 상단에 있음)에서 "Web Developer -> Style Editor"를 선택하거나 Shift 키를 누릅니다. + F7 키보드의 조합입니다.
파이어폭스의 웹 개발자 패널은 창의 한 면(보통 하단 부분)에 나타납니다. 패널 오른쪽 상단에 있는 점 3개 버튼을 클릭하고 "Dock to Right/Left" 또는 "Separate Window"를 선택하여 위치를 변경할 수 있습니다.
참고 :이 튜토리얼에서는 HTML과 CSS를 코딩하는 방법을 보여주지 않습니다. 여기에서 기본 사항을 배울 수 있습니다.
요소 검사
요소의 모양에 영향을 미치려면 요소를 식별할 수 있어야 합니다. 도구 모음에서 맨 처음 버튼을 클릭하거나 Ctrl 키를 누릅니다. + 시프트 + C 키보드에서 요소 선택기 모드를 활성화합니다.
사이트에서 마우스를 움직이면 웹페이지의 다른 요소가 강조 표시됩니다. 그 옆에 팝업으로 떠 있는 기본 식별자를 볼 수 있습니다.
요소를 클릭하면 개발자 도구의 검사기 탭에서 선택됩니다.
조정할 요소를 찾으면 개발자 도구 검사기에서 항목을 마우스 오른쪽 버튼으로 클릭하고 나타나는 팝업 창에서 "복사 -> CSS 선택기"를 선택합니다.
라이브 편집 시작
요소의 CSS 선택기가 클립보드에 복사된 상태에서 개발자 도구 창의 스타일 편집기 탭으로 다시 이동합니다. 왼쪽 상단의 "+" 버튼을 클릭하여 "새 스타일시트를 만들고 문서에 추가"
새로운 빈 스타일시트 안에 CSS 선택기를 붙여넣습니다. 여는 중괄호와 닫는 중괄호 세트가 뒤에 오는 공백을 추가하십시오.
CSS에서 요소의 모양은 먼저 해당 CSS 선택기와 같은 식별자를 사용하여 "대상을 지정"한 다음 중괄호 안에 그룹화되어 모양에 영향을 주는 몇 가지 규칙을 추가하여 정의됩니다. 여는 중괄호와 닫는 중괄호 사이에 있는 모든 것은 "대상 요소"에 영향을 줍니다.
예를 들어 아래 규칙을 추가하는 경우:
display: none;
이것은 그것이 사용되는 요소를 보기에서 숨길 것입니다. 페이지에서 올바른 요소를 타겟팅하고 있는지 확인하는 가장 쉬운 방법일 것입니다. 그것이 사라지면 그것은 실제로 당신이 원하는 것이고 이 규칙을 삭제하여 다른 규칙을 시도할 수 있습니다. 사라지지 않았다면 Inspector로 돌아가 다른 것을 선택해야 합니다.
여기에서 CSS를 코딩하는 방법을 보여주지는 않겠지만 다음과 같은 몇 가지 인기 있는 규칙을 가지고 놀 수 있습니다.
border: 2px solid rgba(255,0,0,0.5); color: #333; font-size:20px;
CSS 스타일시트에 규칙을 추가하면 사이트의 요소가 변경되는 것을 알 수 있습니다.
닫는 메모로 아무 것도 저장되지 않는다는 것을 기억하십시오. 수정한 모양이 마음에 들면 TXT 파일이나 즐겨 사용하는 메모 작성 응용 프로그램의 어딘가에 코드를 복사하여 귀하 또는 디자이너/개발자가 변경 사항을 영구적으로 적용하기 위해 사이트의 스타일시트에 코드를 추가할 수 있도록 합니다. CSS에 대해 배워야 하는 경우 기술을 마스터하는 데 도움이 되는 몇 가지 온라인 게임을 확인하십시오.