스타일리시한 웹상의 작은 불편함을 해결하는 방법 [Firefox & Chrome]

스타일리시한 웹상의 작은 불편함을 해결하는 방법 [Firefox & Chrome]

웹 디자이너는 거의 불가능한 직업을 가지고 있습니다. 그들은 모두를 기쁘게 하는 하나의 디자인을 생각해 내야 합니다. 전 세계 수백만 명의 사람들이 사용하는 Gmail과 같은 서비스에 대해 이야기할 때 '거의' 부분을 생략할 수 있습니다. 이는 불가능합니다. 대부분의 사람들이 리디자인을 좋아하더라도 새로운 디자인을 별로 좋아하지 않는 사용자는 항상 있을 것입니다.





Google이 최근 Gmail 아이콘 버튼에 대해 수행한 것처럼 때때로 이러한 사용자가 충분하여 회사가 역추적하도록 합니다. 하지만 당신에게 무언가가 있다면 진짜 싫어하고 회사에서 다시 바꾸지 않습니까? 당신은 그것에 영원히 붙어 있습니까? 사용자 스타일 덕분에 이러한 문제를 스스로 해결할 수 있습니다.





세련된 소개

스타일리쉬는 둘 다 사용할 수 있는 무료 애드온입니다. 파이어폭스 그리고 크롬 , 그리고 아주 마법 같은 일을 할 수 있습니다. 웹페이지 요소에 자신만의 스타일을 적용할 수 있습니다. 웹 개발자가 아니고 평생 CSS를 작성해본 적이 없더라도 생각보다 훨씬 쉽습니다. 스타일리쉬를 사용하여 웹사이트를 완전히 변형할 수 있지만(다음 섹션에서 설명하겠습니다), 더 중요한 것은 스타일리쉬를 사용하여 몇 분 안에 작은 성가심을 고칠 수 있다는 것입니다.





예를 들어 Gmail의 기본 글꼴 크기에 문제가 있었습니다. 인터페이스는 괜찮았습니다. 브라우저로 확대(Ctrl +)하고 싶지 않았습니다. 그렇게 하면 모든 인터페이스 요소의 크기가 커지고 보기 흉할 수 있기 때문입니다. 나는 단지 메시지 글꼴을 약간 더 크게 만드는 방법을 원했습니다.

스타일리쉬는 정말 간단했는데 그 방법을 알려드릴게요. 하지만 자신만의 사용자 스타일을 만드는 방법을 살펴보기 전에 다른 사람의 작업을 활용하는 방법에 대해 알아보겠습니다.



UserStyles.org

신경을 거슬리는 것이 있다면 혼자가 아닐 가능성이 높습니다. UserStyles.org 사용자가 자신이 만든 스타일을 공유할 수 있는 웹사이트입니다. 위에서 스타일을 볼 수 있습니다( 도구 모음 아이콘에 레이블 추가 ) Gmail 아이콘 버튼에 대한 우리의 이야기에 대한 답변으로 MakeUseOf 댓글 작성자 RandyN이 추천했습니다. 이 스타일을 사용하면 아이콘을 유지할 수 있지만 텍스트 레이블을 추가할 수 있습니다. Google에서는 허용하지 않습니다.

UserStyles.org는 훌륭하지만 완벽하지는 않습니다. 일부 디자인은 너무 많은 일을 하려고 하고(웹사이트의 모양을 완전히 변경), 일부는 웹사이트의 이전 버전을 위한 것이며 현재는 손상되었습니다. 작은 것을 수정하려고 하는데 UserStyles.org에서 찾을 수 없는 경우 가장 좋은 방법은 스스로 해결하는 것입니다.





나만의 간단한 사용자 스타일 만들기

자신만의 사용자 스타일을 만들려면 먼저 페이지의 어떤 요소를 변경하고 싶은지 알아야 합니다. 시작하려면 변경하려는 항목을 마우스 오른쪽 버튼으로 클릭하고 요소를 점검하다 . 다음과 같이 표시되어야 합니다.

Firefox는 페이지의 나머지 부분을 어둡게 하고 선택한 요소 주위에 매우 선명한 프레임을 그립니다. 해당 요소 위의 텍스트 div#2d6.ii.gt.adP.adO , 하나의 ID(#로 시작하는 부분)와 함께 CSS 클래스 모음입니다. 이것은 이 요소의 스타일에 영향을 주는 선택기입니다. 화면 하단에는 ' DOM 트리 순회 ' 또는 간단히 말해서 선택한 요소로 이어지는 요소의 계층 구조에서 위아래로 이동합니다.





여기서 게임의 이름은 스타일을 지정하려는 요소를 선택하고 선택 범위를 너무 좁게 하여 영향을 미치고 싶은 모든 것에 영향을 미치지 않도록 하거나 너무 광범위하여 다른 것을 엉망으로 만들지 않도록 하는 것입니다.

한 요소를 더 높게 클릭했는데, div.gs , 이름이 마음에 든다는 이유만으로(빨리 바뀌지 않을 것 같지만 그건 어디까지나 제 추측입니다.) 전체 메시지 영역에 영향을 줍니다. 스타일을 지정하려는 영역을 선택한 후 스타일 열려면 오른쪽 하단 모서리에 있는 버튼 규칙 빵:

알아, 처음에는 무섭다. 하지만 여기에서 선택한 요소에 영향을 주는 다양한 CSS 규칙을 볼 수 있으며, 임시 수정을 수행하고 다시 로드하지 않고도 실시간으로 페이지에 미치는 영향을 확인할 수 있습니다. 그러나 무엇을 변경해야합니까? 클릭 속성 버튼과 체크 해제 사용자 스타일만 :

여기에서 전체 목록을 볼 수 있습니다. 모두 CSS 규칙. 필요한 항목(이 경우 글꼴 크기)에 맞는 규칙을 찾을 때까지 목록을 아래로 스크롤하고 그 옆에 있는 물음표를 클릭하여 설명 페이지를 열 수도 있습니다. 이제 우리는 ' gs '(줄여서 다음과 같이 쓴다. div.gs ).

남아있는 유일한 질문은 우리가 그 가치를 원하는 것입니다. 이를 위해 규칙 창으로 돌아가서 놀기 시작합니다.

40픽셀은 약간 이상할 수 있지만 일반적인 아이디어는 알 수 있습니다. 이것을 가지고 놀고 원하는 모양을 얻을 때까지 다른 속성을 자유롭게 추가하십시오. 변경 사항이 적용되므로 페이지를 닫지 마십시오. ~ 아니다 어디에나 저장됩니다.

새로운 스타일 저장하기

사이트의 이 부분이 원하는 대로 보이면 저장해야 합니다. 클릭 세련된 추가 기능 모음에서 아이콘을 선택하고 새로운 스타일 쓰기 . 그러면 Stylish는 어떤 페이지에서 새 스타일을 적용해야 하는지 알고 싶어합니다. 우리의 경우 두 번째 옵션을 선택하고, mail.google.com . 다음으로 이 대화 상자가 표시됩니다.

나는 이미 그것을 채웠다. 분명히, 나는 스타일에 대한 이름과 일부 태그를 선택했습니다. 그러나 실제 작업은 코드 내에서 발생합니다. 3행은 이미 존재했습니다. 스타일이 적용되는 페이지를 알 수 있도록 스타일리시를 배치했습니다. 그러나 5-7 행은 내 것입니다. 분석해 보겠습니다.

5행: div.gs { – 이 부분을 인식해야 합니다. 이것은 우리가 스타일링하기로 결정한 요소입니다. 여는 중괄호는 이제 CSS 규칙을 작성할 것임을 의미합니다. 6행: 글꼴 크기: 20px !중요; – 이것이 우리가 변경하고자 하는 규칙(글꼴 크기), 새로운 정의(20픽셀), !important 선언이 뒤따릅니다. 이는 텍스트에 더 가까운 요소가 설정을 시도하더라도 Firefox가 이 규칙을 따른다는 것을 의미합니다. 글꼴 크기를 다른 것으로 변경합니다. 7행: } – 스타일 정의를 닫습니다.

그런 다음 미리보기를 클릭하고 작업을 확인합니다.

마지막으로 작동하는 것을 확인하면 구하다.

이것은 완전한 가이드가 아닙니다

이 짧은 튜토리얼을 단일 게시물의 범위 내에서 유지하려면 여러 번 도약과 점프를 해야 한다는 것을 잘 알고 있습니다. 도중에 혼란스러웠다면 제 사과를 받아주세요. CSS는 처음에는 까다롭지만 일단 익숙해지면 그렇게 복잡하지 않습니다. 웹 사이트를 로컬로 사용자 정의하는 것은 여전히 ​​가장 좋은 학습 방법 중 하나입니다.

헷갈리는 부분이 있으면 아래로 문의해 주시면 최선을 다해 도와드리겠습니다.

Netflix에서 최근에 본 것을 지우는 방법
공유하다 공유하다 트위터 이메일 VirtualBox Linux 시스템을 강화하는 5가지 팁

가상 머신이 제공하는 열악한 성능에 지쳤습니까? VirtualBox 성능을 높이려면 다음을 수행해야 합니다.

다음 읽기
관련 항목
  • 브라우저
  • 웹 개발
  • 웹마스터 도구
  • 모질라 파이어 폭스
  • 구글 크롬
  • 웹 디자인
저자 소개 에레즈 주커만(288건의 출판물) Erez Zukerman이 참여한 작품 더보기

뉴스레터 구독

뉴스레터에 가입하여 기술 팁, 리뷰, 무료 전자책 및 독점 거래를 확인하십시오!

구독하려면 여기를 클릭하세요.