PHP와 CSS를 사용하여 웹 페이지의 텍스트 크기 변경 - 웹 사이트를 디자인할 때 한 가지 사항을 명심하십시오. 모든 방문자가 똑똑한 젊은이는 아니며 웹 브라우저를 사용하는 다양한 방법에 완전히 익숙할 필요도 없습니다.
웹사이트를 디자인할 때 한 가지를 염두에 두십시오. 모든 방문자가 똑똑한 젊은이는 아니며 웹 브라우저를 사용하는 다양한 방법에 완전히 익숙하지도 않습니다. 똑똑한 디자이너는 이를 이해하고 노인이나 장애인도 별도의 노력을 들이지 않고도 쉽고 편안하게 웹 사이트를 사용할 수 있도록 웹 사이트 디자인에 다양한 특수 접근성 기능을 통합하는 경우가 많습니다.
텍스트 크기 조정기는 모든 웹 사이트에 필요할 수 있는 가장 효과적인 접근성 기능 중 하나입니다. 간단히 말해서 웹 페이지의 텍스트 크기를 변경하는 데 사용되는 도구로, 일반적으로 읽기 쉽도록 텍스트를 더 크게 만드는 데 사용됩니다. 많은 브라우저에는 이미 이 기능이 제공되지만 웹 브라우저 초보자는 이 기능을 사용하는 방법을 모르기 때문에 웹사이트 디자이너는 각 웹 페이지에 사용하기 쉬운 버튼을 배치하는 경우가 많습니다.
이 가이드는 PHP와 CSS를 사용하여 웹 페이지에 이 기능적 텍스트 크기 측정기를 추가하는 방법을 보여줍니다. 계속해서 이 접근성을 웹 사이트에 추가하고 50+ Kudos 포인트를 보유한 사용자로부터 최대한 활용하십시오. 계속 읽어보세요. 그것을 사용하는 방법을 배우십시오.
참고: 이 가이드에서는 Apache와 PHP가 이미 설치되어 있다고 가정합니다.
어떻게 작동합니까?
코드를 작성하기 전에 텍스트 크기 측정기가 어떻게 작동하는지 이해하는 데 시간을 투자하는 것이 도움이 됩니다. 사이트의 각 페이지에는 사용자가 페이지의 텍스트 크기(소형, 중간, 대형)를 선택할 수 있는 일련의 컨트롤이 포함되어 있습니다. 각 글꼴 크기는 페이지 렌더링에 사용되는 텍스트를 저장하는 CSS 스타일 시트에 해당합니다. 페이지 텍스트 크기.
사용자가 선택하면 PHP는 사용자가 선택한 글꼴 크기를 세션 변수에 저장한 다음 웹 페이지를 다시 로드합니다. 페이지는 세션 변수에서 선택한 글꼴 크기를 읽고 해당 스타일 시트를 동적으로 호출하여 업데이트합니다. . 더 작은 글꼴 크기 또는 더 큰 글꼴 크기로 페이지를 다시 렌더링합니다.
프로세스
의 첫 번째 단계: 웹 페이지 생성은
HTML 문서 생성으로 시작됩니다. 먼저 자리 표시자 A의 내용을 완성합니다.
목록 A:
텍스트 크기: 소형 | href="resize.php?s=medium">중형 |
Loremipsum dolor sit amet,
consecteturadipisicingelit, sed do eiusmodtemporincididuntutlabore et dolore
마그나 알리쿠아.
Ad minim veniam, quisnostrud exercitation ullamcolaboris nisi utaliquip ex ea
commodoconsequat.
Duisauteirure dolor in reprehenderit
voluptatevelitessecillumdoloreeufugiatnullapariatur.
Excepteursintoccaecatcupidatat non proident, sunt in culpa qui
officiateseruntmollitanim id estlabum.
페이지 상단에 있는 텍스트 하이퍼링크에 특별한 주의를 기울이십시오. 각 하이퍼링크는 resize.php라는 스크립트 파일을 가리키며 URL GET 메소드를 통해 선택한 글꼴 크기를 전달합니다.
이 문서를 .php 확장자를 사용하여 웹 서버 디렉토리에 저장하세요(예: index.php).
2단계: 스타일 시트 만들기
다음으로 각 텍스트 크기에 대한 스타일 시트 파일(small.css, Medium.css 및 Large.css)을 만듭니다. 이것은small.css
의 파일 내용입니다.
글꼴: 10px
}
마찬가지로 각각 17px 및 25px를 사용하여 Medium.css 및 Large.css를 생성하고 이러한 스타일 시트 파일을 이전 단계에서 생성된 웹 페이지와 동일한 디렉터리에 저장할 수 있습니다.
3단계: 텍스트 크기 변경 메커니즘 만들기
위에서 소개한 것처럼 웹 페이지는 사전 정의된 세션 변수를 검색하여 로드할 스타일 시트 파일을 "알" 수 있습니다. 세션 변수는 스크립트 파일 resize.php를 통해 제어됩니다(목록 B 참조). ), 이 파일은 사용자가 웹 페이지 상단의 텍스트 크기를 변경하기 위해 버튼을 클릭하면 활성화됩니다. resize.php의 내용은 다음과 같습니다.
List B
// 세션 시작
// 선택한 크기를 세션으로 가져옵니다.
세션_시작();
$_SESSION['textsize'] = $_GET['s'];
header("위치: " . $_SERVER['HTTP_REFERER']);
?>
이는 매우 간단합니다. 사용자가 새로운 텍스트 크기를 선택하면 resize.php는 GET 메소드를 통해 글꼴 크기 값을 얻어 이를 세션 변수 $_SESSION['textsize']에 저장한 다음 브라우저를 직접 재설정합니다. 원래 열린 페이지로 이동합니다.
물론 여기에는 여전히 누락된 구성 요소가 있습니다. 웹 페이지는 사용자가 현재 선택한 텍스트 크기를 자동으로 감지하고 해당 스타일 시트를 로드할 만큼 똑똑합니다. 이 기능을 추가하려면 웹 페이지 파일 index.php를 열고 추가하십시오. 파일 시작 부분에 다음 명령문을 추가합니다(목록 C 참조).
목록 C
// 세션 시작
//변수 가져오기
세션_시작();
// 이 페이지의 기본 텍스트 크기를 설정합니다.
if (!isset($_SESSION['textsize'])) {
$_SESSION['textsize'] = '중간';
}
?>
또한 다음과 같이 ... 요소 사이에 스타일시트 링크를 추가해야 합니다.
유형="텍스트/css">
이것이 목록 D입니다. 전체 index.php 파일은 다음과 같아야 합니다.
목록 D:
// 세션 시작
//변수 가져오기
세션_시작();
// 이 페이지의 기본 텍스트 크기를 설정합니다.
if (!isset($_SESSION['textsize'])) {
$_SESSION['textsize'] = '중간';
}
?>
유형="텍스트/css">
텍스트 크기: 작음 | href="resize.php?s=medium">중간 큼 |
Loremipsum dolor sit amet,
consecteturadipisicingelit, sed do eiusmodtemporincididuntutlabore et dolore
마그나 알리쿠아.
Ad minim veniam, quisnostrud exercitation ullamcolaboris nisi utaliquip ex ea
commodoconsequat.
Duisauteirure dolor in reprehenderit
voluptatevelitessecillumdoloreeufugiatnullapariatur.
Excepteursintoccaecatcupidatat non proident, sunt in culpa qui
officiateseruntmollitanim id estlabum.
이것이 어떻게 작동하는지 이해하는 것은 매우 간단합니다. 웹 페이지가 로드되면 현재 세션을 재개하고 $_SESSION['textsize'] 변수가 현재 선택된 글꼴 크기와 일치하는지 확인한 다음 해당 스타일 시트를 동적으로 로드합니다. 요소를 통해 웹페이지가 자동으로 올바른 크기로 다시 렌더링됩니다. PHP와 CSS를 함께 사용하는 것은 JavaScript를 사용하여 CSS 스타일 시트를 동적으로 변경하는 기존 방법과 약간 다릅니다. JavaScript 방법과 비교할 때 PHP 방법의 장점은 클라이언트의 지원에 의존할 필요가 없다는 것입니다. JavaScript의 경우 특정 브라우저용으로 작업하는 것에 대해 걱정하세요. 다음 번에 웹 사이트를 디자인할 때 이 접근 방식이 효과적이라는 것을 알게 될 것입니다. 즐거운 코딩 되세요!