⚠️ 집에서 이런 거 시도하지 마세요. CSS의 이미지 디테일만 사용해서 축소해 주세요. - 최대한 까맣게!🖼️🔍

아니, 정말이지, 싫어. 우리는 해커로 해킹할 거야.이것은 대량의 더러운 해커와 나쁜 방법과 관련될 것이다. 이것은 대부분의 화면 리더와 오래된 브라우저를 미치게 하거나, 통곡하게 할 것이다.우리는 고의로 이렇게 한 것이니, 틀림없이 매우 나쁠 것이다.이거...우리가 창조하고자 하는 것은 나쁜 예로 무엇을 하지 말아야 하는지를 설명하는 데 쓰인다.저기 있다.경고 받았어.하지만, 나는 그중에 몇 개의 상자를 넣어서 왜 네가 이렇게 해서는 안 되는지 설명할 것이다.
큰 소리로 외치고 싶어요.
! 우리가 인터넷 개발 학생들을 지도할 때, 그녀는 처음에 "당신은 CSS로만 이미지 디테일 축소 모드를 만들 수 있습니까? 당신은 이것에 관한 글을 한 편 쓸 수 있습니까?"라고 물었다.그래서, 그래, 우리는 도착했어!
이제 우리 손을 더럽힐까요?

우리가 만들어야 할 물건

따라서 일부 인터넷 상점에서는 작은 제품 이미지를 클릭하면 축소판으로 열린다.특히 제품 이미지가 서로 다른 부품의 컬렉션이고 개별 부품을 보려는 경우에 유용합니다.아니면 포장에 있는 한마디를 읽어보세요.
편의를 위해 ESC 키를 사용하여 모드를 닫을 가능성도 추가하고 싶습니다.걱정하지 마, 우리는 JS를 쓰지 않아도 풀 수 있어.
따라서 '작은 그림' 을 누르면 모드에서 '큰 그림' 을 열 수 있습니다.ESC 키 및 닫기 버튼이 다시 닫힙니다.듣기에 괜찮다.

1단계:이미지

우선, 우리는 그림이 필요하다.나는 placeholder.com를 사용하여 다음과 같이 실현할 것이다.

자리 차지 문자를 모르시지 않도록com, 이것은 자리 차지 문자 이미지를 만드는 신기한 사이트입니다.URL(예: http://via.placeholder.com/640x480.png을 사용하여 크기를 결정하고 GET 매개변수를 통해 텍스트와 같은 내용을 추가할 수 있습니다.

잠깐만, 아하, 너는 믿을 만한 복선틀을 써야 돼, 그렇지?

거의!오늘 우리는 더욱 나빠질 것이다.
모르는 사람들에게 콤보 상자 기술은 과거에는 자바스크립트를 사용하여 간단한 스타일 전환을 피하는 데 사용되었다.동급 선택기(.a ~ .b, 그 어떠한 .b동급.a와 :checked의 위류를 사용하여 우리는 내용을 전환할 수 있다.아주 간단한 예는 아마도 .some-toggle:checked ~ .menu { display: block; }일 것이다.
나는 좋은ol'<input type="text">와 그것의 초점 상태를 사용할 것이다.
실제로 나는 이 점을 뛰어넘어 텍스트 입력을 그림으로 사용할 것이다.

<div class="imagezoom-container" style="width: 100px; height: 100px;">
  <input type="text" class="imagezoom" style="
    background-image: url(http://via.placeholder.com/640x480.png?text=Image%201);
  ">
</div>

.imagezoom-container {
  display: inline-block;
  margin: 10px;
}

.imagezoom {
  width: inherit;
  height: inherit;
  background-size: cover;
  background-position: center;
  border: 0 none;
  /* Get rid of any text */
  color: rgba(0, 0, 0, 0);
}

/* Get rid of any text selection */
.imagezoom::selection {
  display: none;
}

진짜?
이렇게 당신의 페이지에 그림을 추가하지 마세요!화면 판독기는 탭이 없는 입력만 볼 수 있고 alt 텍스트를 추가할 수 없으며 그림이 기울어지거나 잘라질 수 있습니다.
여기서 입력 필드를 사용하여 DOM을 최소화합니다.또한 우리가 사용하는 것은 초점 상태이기 때문에 모든 클릭 이미지(확대해도)가 입력에 대한 초점을 촉발하여 모드를 열 수 있도록 보장할 수 있습니다.싫다

요소 초점 상태 사용

이제 입력 필드 이미지/모드에 대해 배율 조정 상태의 스타일을 설정합니다.

.imagezoom:focus {
  /* Make the "image" fill the entire screen */
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: calc(100vw - 200px) !important;
  height: calc(100vh - 100px) !important;

  /* Style the background-image */
  background-size: contain;
  background-repeat: no-repeat;
  margin: 50px 100px;

  /* Remove the background-color by making it fully transparent */
  background-color: rgba(0, 0, 0, 0);

  /* Get rid of default focus styling */
  z-index: 2;
  border: 0 none;
  outline: none;
}

/* The dark background */
.imagezoom-background {
  display: none;
}
.imagezoom:focus ~ .imagezoom-background {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.8);
}

<div class="imagezoom-container" style="width: 100px; height: 100px;">
  <input type="text" class="imagezoom" style="
    background-image: url(http://via.placeholder.com/640x480.png?text=Image%201);
  ">
  <div class="imagezoom-background"></div>
</div>

이 입력 필드를 사용하지 마십시오!화면 판독기는 그림 크기 조절을 시도하고 있는지 알 수 없습니다.그들은 이미지 라이브러리가 아닌 수십 개의 입력이 거대한 표에 있다고 생각할 것이다.그들도 네가 그것을 어떤 전환 스위치로 사용하고 있는지 모를 수도 있다.
정리를 위해 닫기 단추를 추가합니다.편리하고<button> 초점을 맞추기 때문에 모드를 닫습니다.

결과는요

결과는 고작 평균치이다.
펜은 특히 모바일 장치에서 별도의 창에서 열어야 할 수도 있습니다.나는 적어도 휴대전화에 표시할 수 있도록 최소한의 폭의 그림을 추가했다.
기술적으로는 모바일 기기에서 실행할 수 있지만 키보드를 켤 수 있고 입력 필드는 이를 할 수 있다.그러나 입력 필드 대신 라디오나 콤보 상자를 사용하면 이 문제를 해결할 수 있다.또 한 장의 그림을 펼치면 다른 한 장의 사진이 이상하게 이리저리 뛰어다닌다.
완전한 체험을 하기 위해서, 만년필의 HTML과 CSS를 복사해서 디스크의 HTML 파일에 넣고 거기에서 열 것을 권장합니다.왠지 코드펜이 초점을 방해하기 때문에 ESC가 펜 안에서 꺼지는 것은 작용하지 않는다.
다시 한 번 말하지만 생산 중에 이렇게 하지 마세요.JavaScript로 변경합니다.나 손 씻으러 가야 돼...
나는 네가 이 문장을 즐겨 읽기를 바란다. 마치 내가 그것을 즐겨 쓰는 것과 같다.하면, 만약, 만약...❤️ 혹은🦄! 나는 여가 시간에 과학 기술 문장을 쓰고 가끔 커피를 즐겨 마신다.
만약 당신이 나의 노력을 지지하고 싶다면, you can offer me a coffee ☕ 또는!너도 Paypal를 통해 나를 직접 지지할 수 있어!