의 목적

텍스트를 이미지로 설정하려고 합니다.

확장성, 업데이트성 및 응용성이 높습니다.

실용적이고 통용되는 것이 좋습니다.

표기의 선택, 기법.여러 번 해 봤어요.

태그 선택부터
길거리에서 보이는 코드는 h탭에 배경을 지정하는 방법입니다.
또는 라벨을 직접 삽입하는 두 가지 방법이 주류로 여겨진다.
예를 들어 Yahoo의 첫 번째 부분에서 후자의'탭을 직접 삽입하는 모드'는
로고에 맞게 Alt에 Yahoo를 추가합니다..이렇게 기술하고 있다.
이런 상황에서h1>a>img[src=./img/logo.jpg alt=yahoo]의 순서에 따르다.
더 스마트한 것은 전자의 h 라벨 등 제목에 대한
백스테이지에서 지정하는 방법이 있습니다.
이것은 각양각색의 라벨에 사용할 수 있다.h1>a[href=# title=yahoo]{yahoo}항상 a 라벨이 적응하는 상황에서 심지어 텍스트도 둘러싸인다.
(텍스트는 -9999px 또는 상자 밖에서 생략됨)
SEO라면 어떨지 모르겠어요.
그래서 우리는 둘을 조합하는 방법을 고려했다.
배경에 있는 그림을 지정하고alt 속성으로 바꿉니다.
또한 텍스트에서도 사용할 수 있는 조합입니다.
그건...스핀 마크예요.
span 라벨은 주로 p 라벨의 설정 등에 사용됩니다.
색상을 추가하거나 굵게 만들 수 있는 텍스트 전용 라벨입니다.
이걸로 그림으로 바꿀 수 있을까요...
그리 쉽지는 않다.
우선span 라벨은 특수한 라벨로margin와width 등의 사이즈 지정이 작동하지 않습니다.
일반 스폰만 있으면 그림의 사이즈 변동을 따라가지 못하는 것이 현실이라는 것이다.display: inline-block;는 이런 상황을 피할 수 있다.
이 표시에 적응하면 일반적인 라벨과 같이 여러 가지 지정을 할 수 있습니다.
다음에alt변화의 속성을 부여합니다.aria-label 이걸 추가해서
탭이 텍스트를 덮어쓰지 않아도 존재가치가 생겨 생명을 주입합니다.
그리고 이걸 사용하는 게 그 구글이면...
SEO성도 별다른 문제가 없다는 것을 더 이해하고 싶다.
(이런 방법은 본 적이 없는데? 어디서 사용했지? 그것은 404 오류 페이지에서 사용했다.)
다만, 그 대기업의 Google씨와 같은 생각을 가지고 있다는 사실에 내심 놀랐다 w

실제 코드

index.html

...
<div class="box">
  <div class="box01">
    <a href='javascript:void(0);' class="img_bg">
      <span class="logo" aria-label="Google"></span>
    </a>
  </div>

  <div class="box02">
      <a href='javascript:void(0);' class="img_bg">
        <span class="logo01" aria-label="Google"></span>
      </a>
  </div>
    <div class="box03">
      <a href='javascript:void(0);' class="img_bg">
        <span class="logo01" aria-label="Google"></span>
      </a>
  </div>
</div>
...

style.css

* {
  padding: 0;
  margin: 0;
}
body {
  margin-left: auto;
  margin-right: auto;
  width: 320px;
}

.box {
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid ;
  height: 350px;
}

/* div.box$$ */
.box01 {
  margin-top: 5px;
  margin-left: auto;
  margin-right: auto;
  width: 300px;
  height: 100px;
  border: 1px solid ;
}

.box02 {
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  width: 272px;
  height: 92px;
  border: 1px solid ;
}
.box03 {
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  width: 272px;
  height: 100px;
  border: 1px solid ;
}

/* span.logo$$ */
/* img-Size 544 x 184 / 2 */
span {
  display: inline-block;
}

.box01 a span.logo  {
  background:url(./img/googlelogo.png) no-repeat left; 
  background-position: -1px -1px;
    background-size:auto 100%;
    width: 272px;
    height: 92px;
}

.box02 a span.logo01,
.box03 a span.logo01 {
  background:url(./img/googlelogo.png) no-repeat left;
  background-position: -1px -1px;
  background-size:auto 100%;
  width: 100%;
  height: 100%;
}

실행 결과

가운데가 본명이다.

상하를 비교하는 데 사용한다.

실행 결과에 대한 간략한 설명
위쪽은span의 크기를 직접 지정합니다.
그 결과div 요소가 변해도 변동이 없다.
응용으로 요소의 고정에 적합하다.
이어서 한가운데와 아래에 대해
중간 상태에서 보시다시피 원하는 대로 지정하십시오.
직접div 라벨에만 의존하기 때문에div 라벨의 크기를 바꾸지 않으면
레이블을 직접 조작할 수 있습니다.
배경 지정이기 때문에
아래와 같이 이미지를 확대할 수도 있습니다.
전 세계 내비게이션 등에 많이 쓰인다
하나의 이미지를 요소로 나누어 보여주는 것도 매우 쉽다.
또 다른 방법이 있다면 알려주세요.
실행 예>>codepen

계기.

사고의 계기는 디자인 변경이 발생할 때이다
텍스트 이미지가 많은 페이지를 포함하여 큰 폭의 텍스트 크기를 높이는 것을 계기로 한다.
일반적으로ai가 디자인한 텍스트를 그림으로 슬라이드
잘라낸 그림에 적응하는 작업이기 때문에 문제없어요...
이것은 그림의 수량이 많은 것 외에도 매우 힘든 일이다.하면, 만약, 만약...
사이즈 조정 같은 거...각양각색
그리고 사람마다 코드가 다르기 때문에 적응했거나 css로 h.로 지정했습니다.
수법이 다양하다.(원래는 통일만 하면 되는데 그럴 수도 없죠.)
나는 교재가 날아오르지 않고 다양한 용도로 사용할 수 있는 획기적인 코드를 써 보았다.