CSS를 사용하여 모든 페이지에 오버레이 텍스트 추가

최근에 Roam Research을 사용하기 시작했고 Chrome 확장 프로그램Stylus을 소개받았기 때문에 Roam의 테마를 가지고 놀면서 내 취향에 맞게 조정할 수 있었습니다(물론 다크 모드!).

그 과정에서 Stylus가 얼마나 강력한지 알게 되었고 다른 웹사이트의 모양도 수정하는 데 Stylus를 사용하기 시작했습니다(예: Google 검색 결과를 가로로 중앙에 배치하기 위해 -- 마지막에 자세히 설명).

저는 강사이고 요즘 온라인 강의를 위해 많은 발표를 해야 합니다. 이를 위해 Ecamm Live이라는 앱을 사용하고 있었는데, 이 앱을 사용하면 Google Meet 회의에서 내 화면을 공유하는 동안 오버레이 텍스트를 추가할 수 있습니다. 하지만 이 앱에서 몇 가지 성능 문제를 발견했기 때문에 강의 중에 해야 할 모든 것을 발표하기 위해 브라우저만 사용하기로 결정했습니다.

예를 들어 지금은 PowerPoint 슬라이드 대신 Roam Research를 사용하여 메모를 표시하고 Scribble을 사용하여 iPad에 작성한 내용을 바로 브라우저에서 실시간으로 보여줍니다. 내가 놓친 유일한 것은 학생들이 강의가 시작되기를 기다리는 동안 "곧 시작하겠습니다"와 같은 메시지와 함께 페이지 상단에 텍스트 오버레이를 추가하는 기능이었습니다.

나는 Stylus와 좋은 구식 CSS로 이것을 할 수 있다는 것을 깨달았습니다. 그래서 저는 새로운 스타일을 만들고 제가 달성할 수 있는 것을 보기 위해 CSS를 추가하기 시작했습니다.

그것을 가지고 놀고 난 후에 나는 내가 필요한 것을 거의 얻었습니다. 이것은 현재 메시지에 사용하고 있는 CSS 스니펫이지만 물론 원하는 대로 조정할 수 있습니다.

body::before {  
  content: "We will start soon!";
  display: flex;
  align-items: center;
  font-size: 10vw;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.9);
  position: fixed;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 20px;
  box-shadow: 0px 0px 6px #777;
  padding: 10px 20px 15px;
  top: 40%;
  left: 50%;
  height: 13vw;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(4px);
}

기본적으로 새 Stylus 스타일 아래에 위의 CSS 스니펫을 추가하기만 하면 됩니다. 자신의 참조를 위해 원하는 스타일의 이름을 지정하고(예: 표시하려는 메시지의 이름) "다음으로 시작하는 URL"을 선택하고 확장 프로그램 하단의 "적용 대상"필드에서 https://로 설정합니다. 편집자. 그러면 모든 웹 사이트에서 사용할 수 있습니다. 그런 다음 스타일러스 확장 아이콘에서 메시지를 켜고 끌 수 있습니다. 물론 원하는 만큼 메시지에 대해 이 스타일을 복제하고 확장 아이콘에서 쉽게 토글할 수 있습니다.

결과는 다음과 같습니다.



내가 가장 많이 사용하는 웹사이트에서 테스트했으며 지금까지 모든 웹사이트에서 작동합니다.

마지막으로 Stylus를 사용하여 Google 검색 결과를 수평으로 중앙에 배치한다고 언급했습니다. 어느 시점에서 DuckDuckGo를 사용했는데 검색 결과를 중앙에 배치하는 설정이 있다는 점이 정말 마음에 들었습니다. 저는 보통 27인치 화면에서 작업하고 브라우저 창을 80% 정도 차지하도록 유지하므로 검색 결과를 읽기 위해 머리를 왼쪽으로 끝까지 돌려야 하는 것이 정말 마음에 들지 않습니다. Google.

그래서 여기에 Stylus 확장과 함께 사용하는 매우 간단한 CSS 스니펫이 있습니다.

#main, #tsf {
  width: 80%;
  margin: 0 auto;
}

#cnt {
  width: 80%;
  margin: 0 auto;
}

결과는 다음과 같습니다.



그게 전부입니다. 읽어 주셔서 감사합니다. 도움이 되었기를 바랍니다.