웹사이트를 향상시키는 다양한 방법-CSS 튜토리얼-php.cn

웹사이트를 향상시키는 다양한 방법

Mary-Kate Olsen

풀어 주다： 2024-12-28 16:33:10

원래의

680명이 탐색했습니다.

1. 오버플로 시 레이아웃 이동 방지

overflow: auto가 있는 요소가 있는 경우 요소가 오버플로될 때만 스크롤 막대가 표시됩니다. 문제는 요소가 오버플로되고 스크롤 막대가 나타나면 스크롤 막대의 너비에 맞게 콘텐츠가 축소된다는 것입니다.

asy ways to elevate your website
불필요한 레이아웃 변경을 방지하려면 다음을 추가하세요.
스크롤바 여백: 안정적

스크롤바가 보이지 않더라도 스크롤바를 위한 공간을 확보합니다.

asy ways to elevate your website

이 글을 쓰는 시점에는 사용자 중 74%만이 이 기능을 사용하고 있습니다. 그러나 그것은 좋은 점진적인 향상입니다. 즉, 최신 브라우저를 사용하는 사용자는 더 나은 사용자 경험을 즐길 수 있지만 이전 브라우저를 사용하는 사용자는 영향을 받지 않습니다.

2. 어두운 모드에 대한 장치의 기본 설정을 존중합니다.

웹사이트에 이미 어두운 모드를 구현한 경우 장치의 밝은 모드 또는 어두운 모드 기본 설정을 확인하여 사용자가 수동으로 어두운 모드를 선택하지 않도록 할 수 있습니다

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
}

로그인 후 복사

따라서 사용자가 이미 설정에서 다크 모드를 선택한 경우 웹사이트에서도 기본값을 다크 모드로 설정할 수 있습니다.

일부 웹사이트에서는 다크 모드 전환 기능을 전혀 사용하지 않고 기기 기본 설정에만 의존하기도 합니다.

3. 링크는 실제 링크여야 합니다.

웹사이트의 다른 부분으로 리디렉션해야 하는 버튼이 있는 경우 이를 수행하는 가장 확실한 방법은 클릭에 대한 이벤트 리스너를 갖고 JavaScript를 사용하여 사용자를 리디렉션하는 것입니다.
이것은 잘못된 것입니다. 브라우저 기본 요소(예: 링크, 양식)를 사용할 수 있을 때마다 거의 항상 이를 대신 사용해야 합니다.

사용 대신 태그에는 많은 이점이 있습니다.

Ctrl 클릭(모바일에서는 길게 누르기)으로 다른 탭에서 링크를 열 수 있음
링크 위에 마우스를 올리면 리디렉션되는 위치가 표시됩니다
스크린 리더나 검색 엔진 크롤러와 같은 다른 프로그램이 훨씬 더 잘 작동합니다

react-router 또는 Next.js를 사용하는 경우 전체 페이지 다시 로드를 방지하려면 해당 프레임워크의 Link 구성 요소를 사용해야 합니다.

4. 링크 미리보기

사용자가 웹사이트 링크를 공유하면 모든 채팅 및 소셜 미디어 앱에는 사용자가 클릭하기 전에 해당 웹사이트의 일부 콘텐츠를 볼 수 있는 미리보기 기능이 있습니다. 다른 앱이 귀하의 웹사이트에 미리보기를 표시하도록 허용하는 것에 반대합니다.

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
}

로그인 후 복사

그리고 React 19에서는 물체. 이전에는 React-helmet과 같은 타사 라이브러리를 사용해야 했지만 이제는 React가 내장되어 있습니다.

<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
...
</head>

로그인 후 복사

이를 오픈 그래프 프로토콜이라고 합니다.
매우 유용한 도구는 소셜 공유 미리보기로, 미리보기가 다양한 웹사이트에서 어떻게 보이는지 테스트하고 개선 방법에 대한 조언을 제공할 수 있습니다.

5. 입력에 라벨을 사용하세요.

체크박스가 자주 보이는데 체크박스 라벨을 클릭해도 아무 일도 일어나지 않습니다. 접근성이 좋지 않다는 점 외에도 사용자가 선택하려면 작은 확인란을 클릭해야 한다는 의미입니다.

이 문제를 해결하려면 태그.

function BlogPost({ post }) {
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>

      <title>{post.title}</title>
      <meta name="description" content={post.excerpt} />
      <meta property="og:title" content={post.title} />
      <meta property="og:description" content={post.excerpt} />
      <meta property="og:image" content={post.image} />
      <meta property="og:url" content={post.url} />
      <meta property="og:type" content="article" />

    </article>
  );
}

로그인 후 복사

이 기능은 모든 입력 유형에 적용됩니다. 예를 들어 텍스트 입력의 레이블을 클릭하면 텍스트 상자에 초점이 맞춰집니다.

위 내용은 웹사이트를 향상시키는 다양한 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!