매력적으로 보이는 웹 사이트는 그 자체로 인터넷 시대의 미니 걸작입니다. 사용자 정의는 WordPress 테마 수정에서 처음부터 끝까지 사이트 모양 개발에 이르기까지 원하는 만큼 쉽거나 복잡할 수 있습니다.
결과적으로 좋아하는 요소와 자신의 프로젝트에서 재사용하고 싶은 색상을 보게 될 것입니다. 이 기사에서는 웹사이트에서 사용자가 알고 싶어하는 모든 정보를 제공하는 데 필요한 필수 사항을 보여줍니다.
색상은 무엇입니까?
컬러질라
원래 Firefox용으로 제작된 ColorZilla는 이후 Chrome 및 관련 브라우저에서도 사용할 수 있게 되었습니다.
설치하면 두 브라우저의 UI에서 추가 버튼을 찾을 수 있습니다. 이 버튼을 사용하면 온라인에서 거의 모든 것의 색상을 찾을 수 있습니다. ColorZilla는 팔레트에 대한 지원도 포함하므로 색상을 식별하는 것 이상의 역할을 한다는 것을 곧 깨닫게 될 것입니다.
글꼴이란?
뭐? (크롬)
엄밀히 말하면 WhatFont?가 필요하지 않습니다. 확장 프로그램을 사용하여 웹 사이트의 글꼴을 찾을 수 있지만 가장 빠른 방법입니다. 대안은 스타일시트를 열고 탐색하는 것입니다.
WhatFont를 설치하시겠습니까? 브라우저 UI에 새 아이콘이 표시됩니다. 브라우저를 완전히 다시 시작하지 않는 한 글꼴을 식별하려는 페이지를 새로 고쳐야 합니다. 이 작업을 마치면 브라우저에서 버튼을 클릭하십시오.
웹 페이지의 오른쪽 상단에 새 버튼이 나타나야 하며, 텍스트 위에 마우스를 올리면 글꼴 이름이 표시되어야 합니다. 글꼴을 클릭하면 크기 조정과 관련된 추가 정보가 제공됩니다. 또한 웹 개발자가 의도한 서체에 대해 고려하는 대안을 확인하려는 경우 편리한 "스택"의 다른 글꼴도 식별합니다.
글꼴 찾기(Firefox)
Chrome의 WhatFont와 같은 맥락에서 Firefox 전용 확장 기능
확장 프로그램을 설치하면 오른쪽 클릭 컨텍스트 메뉴에 새로운 옵션이 나타납니다.
식별하려는 항목을 찾으면 강조 표시한 다음 사용 가능한 옵션을 표시합니다. "분석 선택"은 당신이 알고 싶었던 모든 것을 알려줄 것입니다.
그것이 제공하는 세부 사항은 턱을 떨어 뜨리기에 부족하지 않습니다. 텍스트가 "(스택)"으로 표시되면 스택에서 설치한 첫 번째 글꼴을 선택합니다. 스택은 일반적으로 위의 예에서 "sans-serif"와 같은 일반 용어로 끝납니다. 스택에 있는 다른 글꼴 중 하나가 설치되지 않은 경우 시스템의 기본 산세리프 글꼴로 대체됩니다.
"요소 조정" 옵션을 통해 요소를 사용자 정의할 수도 있습니다. 확장 프로그램에서 글꼴 모음을 입력하라는 메시지가 표시되면 바로 사용할 수 있습니다. 이 예에서 우리는 Wikipedia의 거의 모든 글꼴을 다른 것으로 변경하여 표시되는 기괴한 매시업을 생성했습니다. 이러한 변경 사항은 영구적이지 않으며 페이지를 새로고침하면 사라집니다.
"글꼴 바꾸기(전체 DOM)"를 사용하면 페이지에서 글꼴의 모든 인스턴스를 변경할 수 있습니다. Roboto(우리의 주요 산세리프체로 사용)의 팬이 아니신가요? 이 옵션을 강조표시하고 페이지에 있는 글꼴 목록에서 'Roboto'를 클릭한 다음 보고 싶은 글꼴의 이름을 입력합니다. 다시 말하지만, 영구적이지는 않지만 일시적일지라도 즐겨찾는 웹사이트의 디자인을 가지고 놀 수 있습니다.
현장 측정
페이지 눈금자(크롬)
“군주? 정말로?" 우리는 당신이 묻는 것을 듣습니다. 페이지 눈금자는 소리와 약간 다른 화면 눈금자입니다. 사실, 우리는 어떤 초기 회의론도 완전히 이해할 것입니다.
포지셔닝은 웹에서 중요합니다. 페이지의 요소는 적절한 간격을 유지해야 합니다. 그렇지 않으면 매력적이지 않습니다. 이 정보는 특히 알고 싶어 하는 난해하지만 Page Ruler를 사용하면 가능합니다.
다른 확장 프로그램처럼 설치하면 브라우저 UI에 다른 버튼이 생깁니다. 확장 프로그램을 사용하려면 웹페이지를 열어야 합니다. 보안상의 이유로 Chrome에 내장된 웹페이지 중 하나를 사용할 수 없습니다.
버튼을 클릭하면 주소 표시줄 바로 아래에 추가 정보 스트립이 표시되며, 마우스를 사용하여 모양을 클릭하고 드래그하면 크기가 계산되어 앞서 언급한 표시줄을 따라 표시됩니다. . 이 외에도 그리드를 활성화하거나 비활성화하는 옵션이 있지만 정확도에 도움이 될 수 있습니다.
원하는 경우 기본 파란색에서 사각형의 색상을 변경할 수도 있습니다. 선택한 색상에 관계없이 자동으로 투명도를 추가하여 그 아래에 있는 콘텐츠를 볼 수 있습니다.
Page Ruler는 모든 필수 정보를 창 상단의 작은 막대에 포장하여 기능에 대해 특히 최소한의 접근 방식을 취했다는 점에서 인정을 받을만합니다.
MeasureIt(Firefox 및 Chrome)
MeasureIt은 페이지 눈금자와 동일한 작업을 수행하며 Firefox와 Chrome 모두에서 사용할 수 있습니다.
설치가 완료되면 버튼을 클릭하고 드래그하여 직사각형을 만들 수 있습니다. 사각형 옆에는 픽셀 수가 표시되어 위치 지정을 위한 정확한 측정값을 얻을 수 있습니다.
마우스만으로 정확한 측정을 하는 것이 걱정된다면 화살표 키를 사용하여 강조 표시된 영역의 크기를 조정할 수 있으므로 정확도가 생각보다 훨씬 쉽습니다. 설정에서 "영역" 옵션을 확인하는 것이 좋습니다. 소프트웨어의 작동 방식은 변경되지 않으며 단지 그린 직사각형이 차지하는 영역에 대한 아이디어를 제공할 뿐입니다.
화면에 표시되는 픽셀 수와 강조 표시될 때 픽셀이 차지하는 영역을 보면 놀랄 것입니다. 다른 것이 아니라면 "스크린 부동산"이라는 용어를 원근법에 넣어야 합니다.
결론
이러한 확장 프로그램을 최대한 활용하려면 시간이 걸리지만 훌륭한 정보를 쉽게 얻을 수 있습니다. 금방 익숙해지겠지만 글꼴을 대체하기 어렵다면 이름이 정확해야 함을 기억하십시오. "Comic Sans"는 작동하지 않지만 "Comic Sans MS"(Office에 표시됨)는 작동합니다.
이러한 확장 프로그램은 모두 귀하가 제공한 정보에 이러한 종류의 정확성이 필요하며 귀하는 이를 최대한 활용할 수 있는 준비가 되어 있음을 기억하십시오.