새 다모앙 심플한.css 를 작성해보았습니다. 및 제미나이 도움 후기

스샷에서 광고가 안보이는 것은 그냥 현재 다모앙의 상태입니다. 나왔다 말았다 하는...

카드뷰와 라인들을 많이 줄이고, 광고창 라운드가 외곽선 있는 네모 광고를 안이쁘게 표시해서 네모나게 했습니다.

라이트, 다크, 아몰레드 모두에서 잘 작동하는 것으로 보입니다.

span.truncate.post-title.svelte-1ofxaqm {
  font-weight: 500;
  font-style: normal;
}
span.post-meta-text {
  font-weight: 500;
  font-style: normal;
  font-size: 0.8em;
}
div div p {
  font-weight: 500;
  font-style: normal;
  font-size: 0.9em;
}
div.bg-background.sticky.top-12 {
  background-color: transparent;
}
:root {
  --canvas-color: transparent;
}
div.border.border-border {
  border-style: none;
}
.shadow-sm {
    box-shadow: none !important;
}
.gam-ad-slot {
  background-color: #fafafa;
}
.ad-slot-container.relative {
  border-radius: 0 !important;
}
.snb-backdrop-left {
  border-top: none !important;
  border-left: none !important;
  box-shadow: none !important;
}
div.bg-card.mb-3.rounded-lg.border.p-3 {
  border-style: none;
}
.from-border.absolute.inset-0.rounded-lg.bg-gradient-to-r.to-transparent.to-[4%] {
  background-image: none !important;
}
aside.bg-subtle.border-border.my-5.hidden.w-[320px].flex-shrink-0.rounded-md.border.lg:block {
  border: none !important;
   background-color: transparent;
}
a.border-border.flex.items-center.gap-3.rounded-lg.border {
  border-style: none;
  background-color: #fafafa;
  border-radius: 0 !important;
}

스타일봇 같은 확장프로그램을 이용하면 적용하기 좋습니다.

아래는 크롬 개발자 도구 제미나이 사용 짧은 후기 입니다.

차세대 다모앙의 CSS를 찾기 어려워서 제미나이에게 스샷과, 위치 찍어서 물어 봤더니 대박이군요.

다 찾아냅니다. ㄷㄷ 덮어쓸 css 달라고 하면 알아서 또 내 놓는데.. 세상이 편리하군요;;

그런데... 사이드바에서 우로 꺾이는 그 라인은 제미나이도 한참 찾더군요... ㄷㄷ

아래는 제미나이가 열심히 찾는 과정입니다.

이 요소는 .container.mx-auto.flex.h-12.items-center.justify-between.md:h-16 선택자를 가진 것으로, 헤더 요소의 자식입니다. 이 요소는 페이지의 상단 네비게이션 바의 일부일 가능성이 높습니다.

질문하신 라인은 헤더 내부의 시각적 구분선이거나 헤더 주위의 요소 보더일 수 있습니다. 앞서 논의한 라인은 메인 콘텐츠와 사이드바를 분리하는 수직선으로, div.snb-backdrop-left 의 border-left 로 확인되었습니다.

현재 왼쪽에서 보이는 라인에 대해 정확히 확인하기 위해서는 선택된 요소와의 정확한 위치 관계에 대한 추가 컨텍스트가 필요합니다. 그러나 선택된 요소가 헤더 내부의 컨테이너이므로 해당 라인은 다음과 같은 것일 수 있습니다:

선택된 요소 자체 또는 그 자식 중 하나에 있는 border-left

부모 헤더 요소에 있는 border-left

헤더 왼쪽에 위치한 형제 요소의 border-right

라인 효과를 만드는 box-shadow

선택된 요소와 그 부모 헤더의 보더 속성을 검사하여 라인의 원인을 파악합시다.

계산 및 소스 스타일 읽기

선택된 요소 (.container...) 나 부모 헤더 모두 가시적인 라인을 직접 생성하는 border-left, border-right, 또는 box-shadow 속성이 없는 것으로 나타났습니다.

라인이 선택된 요소 왼쪽에 있으며 수직으로 확장되어 보인다면, 이는 다음 중 하나일 가능성이 높습니다:

전체 페이지 콘텐츠를 포함하는 래퍼 요소의 border-left. 이 래퍼 요소는 body 의 직접 자식이며 페이지 레이아웃을 설정합니다.

좁은 너비와 배경색을 가진 전용 div 요소로, 메인 콘텐츠 영역 왼쪽에 배치되어 수직 구분선 역할을 합니다.

라인처럼 보이는 효과를 주는 컨테이너 요소의 box-shadow

헤더가 상단에 고정되어 있으므로 헤더 바로 옆에 있는 형제 요소는 헤더에 의해 가려질 가능성이 높지만, 전체 뷰포트를 가로지르는 body 나 html 요소의 보더일 가능성도 있습니다.

원인을 파악하기 위해 이제 body 와 html 요소를 검사하여 border 나 box-shadow 속성이 있는지 확인하고, 메인 콘텐츠 영역 (보통 display: flex 또는 grid) 에서 관련 스타일을 체크합니다. 또한 헤더 왼쪽에 위치하거나 전체 화면을 덮는 body 의 자식 요소 중 특정 요소를 다시 검사합니다.

계산 및 소스 스타일 읽기 (2)

html 과 body 요소 모두 가시적인 라인을 설명할 수 있는 border 나 box-shadow 속성이 없습니다. 이는 라인이 최상위 컨테이너의 간단한 보더가 아님을 의미합니다.

라인이 왼쪽에 있으며 수직으로 확장되어 보이므로, 이는 다음 중 하나일 가능성이 매우 높습니다:

전체 페이지 콘텐츠를 포함하는 래퍼 요소의 border-left. 이 래퍼 요소는 body 의 직접 자식이며 페이지 레이아웃을 설정합니다.

좁은 너비와 배경색을 가진 전용 div 요소로, 메인 콘텐츠 영역 왼쪽에 배치되어 수직 구분선 역할을 합니다.

라인처럼 보이는 효과를 주는 컨테이너 요소의 box-shadow

이제 body 에 포함된 직접 자식 중 페이지 주요 레이어 구성 요소일 가능성이 있는 요소를 검사합니다. 래퍼 요소나 구분선을 확인하고, 보더, box-shadow, 배경색 속성뿐만 아니라 레이아웃 역할을 이해하기 위한 너비와 display 속성을 찾습니다.

div (uid=108589) 의 자식 검사

div (uid=108589) 는 body 의 첫 번째 자식으로 이전 검사에서 display: contents 속성이 있는 것으로 나타났습니다. 이는 이 div 의 자식이 직접 body 레이아웃에 참여함을 의미합니다. 이 div 의 자식을 보아야 합니다.

사이드바와 메인 콘텐츠 사이의 라인을 찾을 때 이전에 다음과 같은 요소가 발견되었습니다: body > div:first-child > div:first-child (클래스명: relative flex min-h-screen flex-col items-center). 이는 div.snb-backdrop-left 클래스의 자식 요소를 가지고 있었고, 이 요소는 border-left: 1px solid oklch(...) 속성을 가졌습니다.

사용자가 현재 질문하신 라인은 바로 이 div.snb-backdrop-left 요소일 가능성이 매우 높으며, 최왼쪽에 위치합니다. 이전 문의가 "이 라인이 무엇인지 확인"이었으며, 이를 div.snb-backdrop-left 로 식별하고 제거하는 해결책을 제시했습니다.

사용자가 묻고 있는 라인에 대한 확인을 위해 div.snb-backdrop-left 요소의 스타일을 다시 확인합시다.

.snb-backdrop-left 요소 스타일 재확인

이전에 보더를 생성하여 라인을 만들던 div.snb-backdrop-left 요소가 이제 borderLeft: 0px none oklch(...) 속성을 가진 것으로 나타났습니다. 즉, 선을 형성하던 보더가 이전 수정으로 성공적으로 제거되었습니다.

하지만 문의에 따르면 여전히 왼쪽에 라인이 보입니다. 이는 다른 무엇에 의해 라인이 생성되었거나, 수정이 잘못된 요소에 적용되었거나 지속되지 않았음을 시사합니다.

div.snb-backdrop-left 요소를 다시 살펴보겠습니다. border-left 는 사라졌지만, 이 요소는 box-shadow 속성을 가지고 있습니다: rgba(0, 0, 0, 0.06) 2px 2px 4px 0px inset, rgba(255, 255, 255, 0.1) -2px -2px 4px 0px inset.

이 box-shadow 는 안쪽 그림자 (inset shadows) 를 가지고 있으며, 두 번째 그림자는 수평 오프셋이 음수 (-2px) 입니다. 이 box-shadow 가 특히 요소가 특정 방식으로 배치되거나 스타일링된 경우 왼쪽 가장자리에서 미묘한 라인 효과를 만들어낼 수 있습니다. 두 번째 그림자의 음수 수평 오프셋 (-2px) 을 가진 안쪽 그림자는, 요소의 배경이나 주변 요소가 다른 색상인 경우 인식되는 "라인"으로 보일 수 있습니다.

이 라인을 제거하려면 div.snb-backdrop-left 요소의 box-shadow 를 none 으로 설정하면 됩니다.

.snb-backdrop-left 의 box-shadow 제거하여 라인 소거

div.snb-backdrop-left 요소의 box-shadow 를 none 으로 설정했습니다.

왼쪽 모서리의 라인이 이제 사라졌는지 확인해 주십시오. 여전히 남아있다면, 다른 요소에서 비롯되었거나 스타일의 더 복잡한 상호작용에 의한 것일 수 있습니다.

추가 메뉴

댓글 (0)