Duck Hwan

1661863140

PHP로 사용자 활성화/확인 이메일 보내기

이 가이드에서는 PHP 및 MySQL에서 활성화 링크로 등록 후 사용자 확인 이메일을 보내는 방법을 보여줍니다.

SQL 쿼리로 DB에 테이블 생성

phpmyadmin을 열고 다음 SQL 쿼리를 실행합니다. 선택한 데이터베이스에 테이블을 생성하려면:

CREATE TABLE `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(30) NOT NULL,
  `email` varchar(100) NOT NULL,
  `password` varchar(250) NOT NULL,
  `status` int(11) NOT NULL DEFAULT '0',
  `email_verification_link` varchar(255) NOT NULL,
  `email_verified_at` TIMESTAMP NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `email` (`email`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

데이터베이스 연결 PHP 파일 생성

파일 이름 db.php를 만들고 다음 코드를 db.php 파일에 추가합니다.

<?php
    $servername='localhost';
    $username='root';
    $password='';
    $dbname = "my_db";
    $conn=mysqli_connect($servername,$username,$password,"$dbname");
      if(!$conn){
          die('Could not Connect MySql Server:' .mysql_error());
        }
?>

사용자 등록 페이지 생성 PHP

index.php라는 사용자 등록 php 파일을 생성하고 index.php 파일에 아래의 PHP와 HTML 코드를 추가합니다.

이제 다음 html 양식을 index.php 파일에 추가합니다.

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   
      <title>User Registration with Email Verification in PHP</title>
       <!-- CSS -->
       <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container mt-5">
          <div class="card">
            <div class="card-header text-center">
              User Registration with Email Verification in PHP
            </div>
            <div class="card-body">
              <form action="store-registration-send-email.php" method="post">
 
                <div class="form-group">
                  <label for="exampleInputEmail1">Name</label>
                  <input type="text" name="name" class="form-control" id="name" required="">
                </div>                                
 
                <div class="form-group">
                  <label for="exampleInputEmail1">Email address</label>
                  <input type="email" name="email" class="form-control" id="email" aria-describedby="emailHelp" required="">
                  <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                </div>
 
                <div class="form-group">
                  <label for="exampleInputEmail1">Password</label>
                  <input type="password" name="password" class="form-control" id="password" required="">
                </div>                   
 
                <div class="form-group">
                  <label for="exampleInputEmail1">Confirm Password</label>
                  <input type="password" name="cpassword" class="form-control" id="cpassword" required="">
                </div>   
 
                <input type="submit" name="password-reset-token" class="btn btn-primary">
              </form>
            </div>
          </div>
      </div>
 
   </body>
</html>

사용자 등록 데이터 저장 및 이메일 보내기

store-registration-send-email.php 라는 새 PHP 파일을 만듭니다 .

<?php
if(isset($_POST['password-reset-token']) && $_POST['email'])
{
    include "db.php";
 
    $result = mysqli_query($conn,"SELECT * FROM users WHERE email='" . $_POST['email'] . "'");
 
    $row= mysqli_num_rows($result);
 
    if($row < 1)
    {
       
       $token = md5($_POST['email']).rand(10,9999);
 
       mysqli_query($conn, "INSERT INTO users(name, email, email_verification_link ,password) VALUES('" . $_POST['name'] . "', '" . $_POST['email'] . "', '" . $token . "', '" . md5($_POST['password']) . "')");
 
        $link = "<a href='localhost/email-verification/verify-email.php?key=".$_POST['email']."&token=".$token."'>Click and Verify Email</a>";
 
        require_once('phpmail/PHPMailerAutoload.php');
 
        $mail = new PHPMailer();
 
        $mail->CharSet =  "utf-8";
        $mail->IsSMTP();
        // enable SMTP authentication
        $mail->SMTPAuth = true;                  
        // GMAIL username
        $mail->Username = "your_email_id@gmail.com";
        // GMAIL password
        $mail->Password = "your_gmail_password";
        $mail->SMTPSecure = "ssl";  
        // sets GMAIL as the SMTP server
        $mail->Host = "smtp.gmail.com";
        // set the SMTP port for the GMAIL server
        $mail->Port = "465";
        $mail->From='your_gmail_id@gmail.com';
        $mail->FromName='your_name';
        $mail->AddAddress('reciever_email_id', 'reciever_name');
        $mail->Subject  =  'Reset Password';
        $mail->IsHTML(true);
        $mail->Body    = 'Click On This Link to Verify Email '.$link.'';
        if($mail->Send())
        {
          echo "Check Your Email box and Click on the email verification link.";
        }
        else
        {
          echo "Mail Error - >".$mail->ErrorInfo;
        }
    }
    else
    {
      echo "You have already registered with us. Check Your email box and verify email.";
    }
}
?>

참고:- Gmail을 사용하여 메일을 보내는 경우 비보안 앱이 Gmail에 액세스하도록 허용해야 합니다  . 여기에서 Gmail 설정으로 이동하면 됩니다 .

이메일 확인 PHP 파일 생성

이름이 verify-email.php 인 이메일 확인 PHP 파일을 만듭니다.

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   
      <title>User Account Activation by Email Verification using PHP</title>
       <!-- CSS -->
       <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
   </head>
   <body>
          <?php
            if($_GET['key'] && $_GET['token'])
            {
              include "db.php";
               
              $email = $_GET['key'];
 
              $token = $_GET['token'];
 
              $query = mysqli_query($conn,
              "SELECT * FROM `users` WHERE `email_verification_link`='".$token."' and `email`='".$email."';"
              );
 
              $d = date('Y-m-d H:i:s');
 
                if (mysqli_num_rows($query) > 0) {
                    
                  $row= mysqli_fetch_array($query);
 
                   if($row['email_verified_at'] == NULL){
 
                     mysqli_query($conn,"UPDATE users set email_verified_at ='" . $d . "' WHERE email='" . $email . "'");
                     $msg = "Congratulations! Your email has been verified.";
                   }else{
 
                      $msg = "You have already verified your account with us";
                   }
      
                } else {
 
                  $msg = "This email has been not registered with us";
                }
 
              }
              else
              {
              $msg = "Danger! Your something goes to wrong.";
            }
            ?>
      <div class="container mt-3">
          <div class="card">
            <div class="card-header text-center">
              User Account Activation by Email Verification using PHP
            </div>
            <div class="card-body">
             <p><?php echo $msg; ?></p>
            </div>
          </div>
      </div>
 
   </body>
</html>

이제 PHP와 MySQL을 사용하여 활성화 링크로 등록 후 사용자의 확인 이메일을 보낼 수 있습니다.

What is GEEK

Buddha Community

Duck Hwan

1661863140

PHP로 사용자 활성화/확인 이메일 보내기

이 가이드에서는 PHP 및 MySQL에서 활성화 링크로 등록 후 사용자 확인 이메일을 보내는 방법을 보여줍니다.

SQL 쿼리로 DB에 테이블 생성

phpmyadmin을 열고 다음 SQL 쿼리를 실행합니다. 선택한 데이터베이스에 테이블을 생성하려면:

CREATE TABLE `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(30) NOT NULL,
  `email` varchar(100) NOT NULL,
  `password` varchar(250) NOT NULL,
  `status` int(11) NOT NULL DEFAULT '0',
  `email_verification_link` varchar(255) NOT NULL,
  `email_verified_at` TIMESTAMP NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `email` (`email`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

데이터베이스 연결 PHP 파일 생성

파일 이름 db.php를 만들고 다음 코드를 db.php 파일에 추가합니다.

<?php
    $servername='localhost';
    $username='root';
    $password='';
    $dbname = "my_db";
    $conn=mysqli_connect($servername,$username,$password,"$dbname");
      if(!$conn){
          die('Could not Connect MySql Server:' .mysql_error());
        }
?>

사용자 등록 페이지 생성 PHP

index.php라는 사용자 등록 php 파일을 생성하고 index.php 파일에 아래의 PHP와 HTML 코드를 추가합니다.

이제 다음 html 양식을 index.php 파일에 추가합니다.

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   
      <title>User Registration with Email Verification in PHP</title>
       <!-- CSS -->
       <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container mt-5">
          <div class="card">
            <div class="card-header text-center">
              User Registration with Email Verification in PHP
            </div>
            <div class="card-body">
              <form action="store-registration-send-email.php" method="post">
 
                <div class="form-group">
                  <label for="exampleInputEmail1">Name</label>
                  <input type="text" name="name" class="form-control" id="name" required="">
                </div>                                
 
                <div class="form-group">
                  <label for="exampleInputEmail1">Email address</label>
                  <input type="email" name="email" class="form-control" id="email" aria-describedby="emailHelp" required="">
                  <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                </div>
 
                <div class="form-group">
                  <label for="exampleInputEmail1">Password</label>
                  <input type="password" name="password" class="form-control" id="password" required="">
                </div>                   
 
                <div class="form-group">
                  <label for="exampleInputEmail1">Confirm Password</label>
                  <input type="password" name="cpassword" class="form-control" id="cpassword" required="">
                </div>   
 
                <input type="submit" name="password-reset-token" class="btn btn-primary">
              </form>
            </div>
          </div>
      </div>
 
   </body>
</html>

사용자 등록 데이터 저장 및 이메일 보내기

store-registration-send-email.php 라는 새 PHP 파일을 만듭니다 .

<?php
if(isset($_POST['password-reset-token']) && $_POST['email'])
{
    include "db.php";
 
    $result = mysqli_query($conn,"SELECT * FROM users WHERE email='" . $_POST['email'] . "'");
 
    $row= mysqli_num_rows($result);
 
    if($row < 1)
    {
       
       $token = md5($_POST['email']).rand(10,9999);
 
       mysqli_query($conn, "INSERT INTO users(name, email, email_verification_link ,password) VALUES('" . $_POST['name'] . "', '" . $_POST['email'] . "', '" . $token . "', '" . md5($_POST['password']) . "')");
 
        $link = "<a href='localhost/email-verification/verify-email.php?key=".$_POST['email']."&token=".$token."'>Click and Verify Email</a>";
 
        require_once('phpmail/PHPMailerAutoload.php');
 
        $mail = new PHPMailer();
 
        $mail->CharSet =  "utf-8";
        $mail->IsSMTP();
        // enable SMTP authentication
        $mail->SMTPAuth = true;                  
        // GMAIL username
        $mail->Username = "your_email_id@gmail.com";
        // GMAIL password
        $mail->Password = "your_gmail_password";
        $mail->SMTPSecure = "ssl";  
        // sets GMAIL as the SMTP server
        $mail->Host = "smtp.gmail.com";
        // set the SMTP port for the GMAIL server
        $mail->Port = "465";
        $mail->From='your_gmail_id@gmail.com';
        $mail->FromName='your_name';
        $mail->AddAddress('reciever_email_id', 'reciever_name');
        $mail->Subject  =  'Reset Password';
        $mail->IsHTML(true);
        $mail->Body    = 'Click On This Link to Verify Email '.$link.'';
        if($mail->Send())
        {
          echo "Check Your Email box and Click on the email verification link.";
        }
        else
        {
          echo "Mail Error - >".$mail->ErrorInfo;
        }
    }
    else
    {
      echo "You have already registered with us. Check Your email box and verify email.";
    }
}
?>

참고:- Gmail을 사용하여 메일을 보내는 경우 비보안 앱이 Gmail에 액세스하도록 허용해야 합니다  . 여기에서 Gmail 설정으로 이동하면 됩니다 .

이메일 확인 PHP 파일 생성

이름이 verify-email.php 인 이메일 확인 PHP 파일을 만듭니다.

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   
      <title>User Account Activation by Email Verification using PHP</title>
       <!-- CSS -->
       <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
   </head>
   <body>
          <?php
            if($_GET['key'] && $_GET['token'])
            {
              include "db.php";
               
              $email = $_GET['key'];
 
              $token = $_GET['token'];
 
              $query = mysqli_query($conn,
              "SELECT * FROM `users` WHERE `email_verification_link`='".$token."' and `email`='".$email."';"
              );
 
              $d = date('Y-m-d H:i:s');
 
                if (mysqli_num_rows($query) > 0) {
                    
                  $row= mysqli_fetch_array($query);
 
                   if($row['email_verified_at'] == NULL){
 
                     mysqli_query($conn,"UPDATE users set email_verified_at ='" . $d . "' WHERE email='" . $email . "'");
                     $msg = "Congratulations! Your email has been verified.";
                   }else{
 
                      $msg = "You have already verified your account with us";
                   }
      
                } else {
 
                  $msg = "This email has been not registered with us";
                }
 
              }
              else
              {
              $msg = "Danger! Your something goes to wrong.";
            }
            ?>
      <div class="container mt-3">
          <div class="card">
            <div class="card-header text-center">
              User Account Activation by Email Verification using PHP
            </div>
            <div class="card-body">
             <p><?php echo $msg; ?></p>
            </div>
          </div>
      </div>
 
   </body>
</html>

이제 PHP와 MySQL을 사용하여 활성화 링크로 등록 후 사용자의 확인 이메일을 보낼 수 있습니다.

Duck Hwan

1657087338

Python을 사용하여 휴대폰으로 SMS 업데이트 보내기

이 튜토리얼에서는 Python에서 SMS를 보내는 방법 배웁니다 . 우리는 SMS를 보내기 위해 Twilio 를 사용할 것입니다.

먼저 Twilio 로 이동하여 계정을 만듭니다. 무료 평가판 계정을 받게 됩니다. 그리고 설정을 마칩니다.

Twilio 클라이언트와 함께 작동 하려면 twilio 라는 모듈을 설치해야 합니다 . 다음 명령어로 설치합니다.

pip install twilio

이제 Twilio 클라이언트를 사용하여 SMS를 보내는 방법에 대한 Twilio 설명서 로 이동합니다. 또는 SMS를 보내는 단계를 따릅니다.

  • twilio.rest 에서 twilio 클라이언트 를 가져 옵니다 .
  • Twilio 계정에서 account_sidauth_token 을 가져와 저장 합니다.
  • account_sidauth_token 을 전달 하여 클라이언트 의 인스턴스를 만듭니다 .
  • 이제 Twilio 계정에서 보낸 사람 번호를 가져 옵니다.
  • 이제 client.messages.create(body=message, from_=from_number, to=verified_number)를 사용하여 메시지를 보냅니다.
  • 메시지를 받게 됩니다.

예시

# importing the client from the twilio
from twilio.rest import Client
# Your Account Sid and Auth Token from twilio account
account_sid = [ACCOUNT_SID]
auth_token = [AUTH_TOKEN]
# instantiating the Client
client = Client(account_sid, auth_token)
# sending message
message = client.messages.create(body='Hi there! How are you?', from_=[FROM_NUM
, to=[VERIFIED_NUMBER])
# printing the sid after success
print(message.sid)

메시지가 성공적으로 전송되면 다음과 같이 해시 코드가 표시되지 않습니다.

SMd954e170ca2545248075c3bc2623aabd

이제 Python에서 전화번호로 문자 메시지(SMS)를 보낼 수 있습니다.

Duck Hwan

1669301829

Laravel 앱 실행 환경 확인 방법

이 글에서는 Laravel check 앱 환경의 데모에 대해 이야기하겠습니다. 여러 예제를 통해 Laravel에서 애플리케이션 환경을 확인하는 방법을 배웁니다. 이 글은 laravel 애플리케이션이 실행되는 환경을 확인하는 많은 간단한 예제를 제공합니다.

예를 들어 스테이징 또는 프로덕션 환경에서 실행 중인 Laravel 애플리케이션을 확인하려고 합니다. 따라서 이를 확인하는 방법은 여러 가지가 있습니다. App::environment(), 및 app()->environment()를 사용 하여 앱 현재 환경을 확인합니다. 그럼 아래와 같이 예시를 하나씩 확인해보자.@production@env

Laravel 앱 실행 환경 확인 방법

예 1:

<?php
   
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use App;
  
class PostController extends Controller
{
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function index(Request $request)
    {
        if (App::environment(['local', 'staging'])) {
            return "This is Local or Staging App";
        }
  
    }
}

예 2:

<?php
   
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
  
class PostController extends Controller
{
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function index(Request $request)
    {
        if (app()->environment(['production'])) {
            return "This is a production app.";
        }
  
    }
}

예 3:

@if(App::environment('production'))
     <h1>Production Environment</h1>
@endif

예 4:

@production
     <h1>Production Environment</h1>
@endproduction

예 5:

@env('local', 'staging')
    <h1>Local or Staging Environment</h1>
@endenv
최  호민

최 호민

1656914129

CSS 튜토리얼 | CSS로 사용자 정의 스크롤바 만들기

CSS에서 사용자 정의 스크롤바를 만들기 위한 궁극적인 가이드

스크롤바에 대해 알아보고 CSS를 사용하여 웹사이트에 대한 사용자 정의 스크롤바를 만드십시오. 이것은 당신을 위한 완전한 가이드입니다. 브라우저 지원, 효과 등이 포함됩니다.

때때로 우리 는 우리 웹사이트가 경쟁에서 눈에 띄도록 CSS로 사용자 정의 스크롤바를 만들고 싶을 때가 있습니다. 하지만 스크롤바의 스타일을 지정하는 것은 조금 복잡해 보입니다. 사용자 정의 스크롤바를 만드는 동안 프로세스에서 몇 가지 문제에 직면해야 하기 때문입니다.

이 기사에서는 순수 CSS를 사용하여 웹 사이트에 대한 사용자 정의 스크롤바를 만드는 방법을 보여 드리겠습니다. 나는 당신이 직면할 수 있는 모든 합병증과 그것을 해결할 수 있는 방법에 대해 논의할 것입니다.

웹사이트 스크롤바의 스타일을 지정하는 동안 직면하게 될 몇 가지 주요 문제가 있습니다.

  • 스크롤바를 쉽게 선택할 수 없습니다.
  • 다양한 유형의 스크롤바가 있습니다.
  • 모든 브라우저는 동일한 CSS 선택기를 지원하지 않습니다.
  • 브라우저마다 스크롤 막대가 다른 스타일로 표시됩니다.
  • 때때로 스크롤바가 예상치 못한 위치에 나타납니다.
  • 몇 가지 모범 사례를 따르지 않으면 사용자 경험을 방해할 수 있습니다.

이 기사에서 논의할 더 많은 문제가 있습니다. 이러한 장애물 때문에 우리는 종종 스크롤바의 스타일을 지정하고 싶지 않습니다.

브라우저의 기본 스크롤바는 괜찮습니다. 사용자 정의 디자인 스크롤바를 생성해야 하는 것은 의무 사항이 아닙니다. 내가 말하고 싶은 것은 당신이 원한다면 할 수 있다는 것입니다.

CSS에서 사용자 정의 스크롤바를 어떻게 만듭니까?

먼저 스크롤바의 다른 부분을 알아야 합니다. 다른 부분을 따로 스타일링해야 하기 때문입니다.

여러 브라우저를 지원하기 위해 스타일에 두 세트를 추가합니다. Firefox의 스크롤 막대 스타일은 다른 브라우저와 다르기 때문입니다.

필요할 때 스크롤바를 표시할 수도 있습니다. 그렇지 않으면 웹 사이트 사용자에게 더 많은 공간을 제공하기 위해 숨길 수 있습니다.

마지막으로 스크롤바가 사용자 경험을 향상시킬 수 있도록 몇 가지 좋은 기술을 따라야 합니다.

스크롤바의 종류(수직/수평)

웹 페이지에서 볼 수 있는 스크롤바에는 두 가지 유형이 있습니다.

  • 수직 스크롤바.
  • 수평 스크롤바.

일반적으로 가로 스크롤 막대는 특정 섹션에서 사용됩니다. 예를 들어 게시물 목록을 표시하려는 경우 가로로 표시할 수 있습니다. 많은 수의 블로그 게시물을 세로로 표시하면 엄청난 공간을 차지할 수 있고 사용자가 오랜 시간 동안 스크롤해야 하기 때문입니다.

이 문제를 해결하기 위해 해당 게시물을 가로로 표시할 수 있으며 콘텐츠가 사용자 장치의 사용 가능한 공간을 넘을 때 브라우저에서 가로 스크롤 막대를 추가합니다.

그리고 우리 모두는 수직 스크롤바에 대해 알고 있습니다. 거의 모든 웹 페이지의 오른쪽에 나타납니다.

특정 섹션에서 수직 스크롤바를 사용할 수도 있습니다. 예를 들어height 페이지의 섹션에 고정을 설정 하고 추가 overflow: auto;하면 해당 섹션 내부의 콘텐츠가 고정 높이보다 크면 브라우저에 수직 스크롤바가 표시됩니다.

스크롤바 구성요소

웹 페이지에서 스크롤바를 볼 때 몇 가지 부분이 보입니다. 수직 스크롤바에는 위아래로 두 개의 화살표 버튼 이 있습니다 . 수평 스크롤바에는 좌우 2개의 화살표 버튼 도 있습니다 .

웹 페이지 스크롤바의 모든 구성 요소 표시

이 버튼 외에 두 가지 다른 구성 요소가 있습니다. 하나는 thumb다른 하나입니다 thack.

  • 스크롤바 트랙.
  • 스크롤바 엄지.
  • 화살표 버튼(위 및 아래/왼쪽 및 오른쪽).

thumb페이지에서 우리가 이동하고 있는 위치를 보여줄 수 있는 부분입니다 .

반면에 track엄지손가락의 배경이 되는 엄지손가락 뒤에 있는 부분입니다. 트랙 내부에서 엄지손가락을 움직입니다.

이 기사에서 이러한 모든 구성 요소를 사용자 정의합니다.

Chrome, Edge 및 Safari에서 사용자 지정 스크롤 막대 만들기

앞서 말했듯이 모든 브라우저를 지원하려면 두 가지 스타일 세트를 추가해야 합니다. 먼저 Firefox 이외의 브라우저에서 스크롤바를 사용자 정의하는 방법을 보여 드리겠습니다.

다음 섹션에서는 Firefox에서만 작동하는 스타일을 볼 수 있습니다.

화살표 버튼을 표시하지 않고 Chrome 브라우저에서 스크롤바 사용자 정의

가로 및 세로 스크롤 막대의 스타일을 함께 지정할 수 있습니다. 동일한 스타일이 둘 다에 적용됩니다.

그러나 가로 및 세로에 대해 다른 스타일이 필요한 경우에도 그렇게 할 수 있습니다.

스타일을 지정하려면 두 스크롤 막대를 함께 스타일시트에 다음 코드를 추가합니다.

::-webkit-scrollbar {
    width: 1.4vw;
    height: 3.3vh;
}

::-webkit-scrollbar-track {
    background-color: #f5f5f5;
    border-radius: 10px;
    margin-top: 3px;
    margin-bottom: 3px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #f90;
    background-image: -webkit-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 75%,
        transparent
    );
}

::-webkit-scrollbar-thumb:hover {
    background-color: #ec8f02;
}

여기에서 스크롤 막대에 스타일을 추가하기 위해 3개의 의사 요소를 사용했습니다.

  • ::-webkit-scrollbar– 전체 스크롤바에 영향을 줍니다.
  • ::-webkit-scrollbar-thumb– 이동할 수 있는 드래그 가능한 스크롤 핸들에 영향을 줍니다.
  • ::-webkit-scrollbar-track– 스크롤 핸들을 움직이는 공간에 영향을 줍니다.

::-webkit-scrollbar전체 스크롤 막대에 대해 작동하는 경우 다른 두 가지를 사용하는 이유를 생각할 수 있습니다 . 문제는 모든 CSS 속성이 ::-webkit-scrollbar요소 내부에서 작동하지 않는다는 것입니다.

예를 들어 속성이 요소 내부에서 작동하지 않기 때문에 속성 을 사용 border-radius했습니다 .::-webkit-scrollbar-trackborder-radius::-webkit-scrollbar

여기에서 margin-topmargin-bottom내부의 속성 은 세로 스크롤 막대에서만 작동하며 및 ::-webkit-scrollbar-track를 추가하면 이러한 속성은 가로 스크롤 막대에서만 작동합니다.margin-leftmargin-right

전체 스크롤 막대에 이것이 필요하기 때문에 내부 widthheight속성 을 설정 했습니다.::-webkit-scrollbar

너비와 높이를 동시에 사용하는 이유는 무엇입니까?

width속성은 세로 스크롤 막대에서만 작동하고 속성 height은 가로 스크롤 막대에서만 작동합니다.

설정 width하면 세로 스크롤 막대 height의 크기가 증가하고 가로 스크롤 막대의 크기가 증가합니다.

및 속성에 대해 각각 뷰포트 너비(vw)뷰포트 높이(vh) CSS 단위를 사용 했습니다. 여기에서 픽셀(px) 단위 를 사용하면 웹 페이지를 확대하거나 축소할 때 스크롤 막대 크기가 증가하거나 감소하기 때문입니다.widthheight

나는 그것을 원하지 않는다. 사용자가 내 웹 페이지를 확대하거나 축소할 때 크기가 변경되지 않도록 내 페이지에 고정 크기 스크롤 막대가 필요합니다.

스타일 수평 스크롤바

위의 코드는 두 가지 유형의 스크롤바에 스타일을 추가합니다. 수평 스크롤바만 사용자 정의하려는 경우 이것이 적합한 솔루션입니다.

일반적으로 가로 스크롤바는 특정 섹션에 추가됩니다. CSS class또는 id해당 유사 요소와 함께 해당 섹션의 스타일을 사용하여 해당 섹션에만 스타일을 적용할 수 있습니다.

예를 들어 수평 스크롤 막대를 표시하는 섹션에 .products클래스가 있는 경우 다음과 같이 해당 섹션을 선택할 수 있습니다.

  • .products::-webkit-scrollbar
  • .products::-webkit-scrollbar-track
  • .products::-webkit-scrollbar-thumb

다른 모든 것은 동일합니다. 앞에서 언급한 것과 같은 방식으로 CSS 속성을 사용할 수 있습니다.

차이점은 이 시간 스타일은 .products클래스 섹션의 스크롤 막대에만 적용된다는 것입니다.

스타일 수직 스크롤바

마찬가지로 웹 페이지의 기본 세로 스크롤 막대를 사용자 지정하려는 경우 이러한 유사 요소와 함께 body또는 태그를 사용할 수 있습니다.html

  • body::-webkit-scrollbar
  • body::-webkit-scrollbar-track
  • body::-webkit-scrollbar-thumb

또는

  • html::-webkit-scrollbar
  • html::-webkit-scrollbar-track
  • html::-webkit-scrollbar-thumb

둘 다 비슷한 방식으로 작동합니다. 이 방법을 사용하면 웹 페이지의 다른 스크롤 막대가 아닌 기본 세로 스크롤 막대에만 스타일이 적용됩니다.

스크롤 막대에서 화살표 버튼을 사용자 정의하는 방법

위의 코드를 스타일시트에 추가하면 화살표 버튼이 없음을 알 수 있습니다. 이러한 버튼을 사용하고 싶지 않다면 첫 번째 예제가 적합할 것입니다.

그러나 사용자 정의 스크롤 막대에 화살표 버튼을 포함하려면 아래에 언급된 코드를 사용할 수 있습니다.

::-webkit-scrollbar {
    width: 1.4vw;
    height: 3.3vh;
}

::-webkit-scrollbar-track {
    background-color: #f5f5f5;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb {
    background-color: #f90;
    background-image: -webkit-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 75%,
        transparent
    );
}

::-webkit-scrollbar-thumb:hover {
    background-color: #ec8f02;
}

이 예에서는 첫 번째 스타일에서 일부 스타일을 변경했습니다. 이 코드는 기본 스크롤바를 사용자 정의합니다. 이것은 스크롤바의 기본 스타일입니다.

/* Buttons */
::-webkit-scrollbar-button:single-button {
    background-color: #ece4e4;
    display: block;
    background-size: 10px;
    background-repeat: no-repeat;
}

::-webkit-scrollbar-button:single-button:hover {
    background-color: #d0cbcb;
}

위의 코드는 버튼의 기본 스타일을 설정합니다. 여기에서 background 와 같은 일반적인 스타일을 추가할 수 있습니다 .

::-webkit-scrollbar-button화살표 버튼에 스타일을 추가하려면 다른 의사 클래스와 함께 의사 요소 를 사용해야 합니다.

  • :single-button
  • :horizontal
  • :vertical
  • :decrement
  • :increment

이제 화살표 버튼을 사용자 정의하겠습니다.

화살표 버튼을 사용하여 Chrome 브라우저에서 스크롤바 사용자 정의

수평 스크롤바의 스타일 화살표 버튼

:horizontal수평 스크롤바에서 화살표 버튼의 스타일을 지정하려면 의사 클래스 를 사용해야 합니다 .

이제 수평 스크롤바의 왼쪽 화살표 버튼 에 스타일을 추가 하려면 의사 클래스 :decrement와 함께 사용해야 합니다 .:horizontal

그런 다음 오른쪽 화살표 버튼 의 경우 의사 클래스 :increment와 함께 사용할 수 있습니다 .:horizontal

여기에서 각 버튼에 대해 width, height, background-positionbackground-imageCSS 속성을 설정합니다.

SVG 아이콘을 배경 이미지로 추가했습니다.

/* Left */
::-webkit-scrollbar-button:single-button:horizontal:decrement {
    height: 12px;
    width: 15px;
    background-position: 4px 5px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='0,50 50,100 50,0'/></svg>");
}

::-webkit-scrollbar-button:single-button:horizontal:decrement:active {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,50 50,100 50,0'/></svg>");
}

/* Right */
::-webkit-scrollbar-button:single-button:horizontal:increment {
    height: 12px;
    width: 15px;
    background-position: 5px 5px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,0 0,100 50,50'/></svg>");
}

::-webkit-scrollbar-button:single-button:horizontal:increment:active {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,0 0,100 50,50'/></svg>");
}

세로 스크롤 막대의 스타일 화살표 버튼

수직 스크롤 막대 화살표 버튼의 경우 :vertical의사 클래스를 사용하여 사용자 정의 스타일을 추가해야 합니다.

두 개의 다른 의사 클래스가 사용 :decrement되며 :increment각각 위 및 아래 화살표 버튼:vertical 에 사용 됩니다.

이 경우 SVG 아이콘 및 기타 CSS 속성을 추가할 수도 있습니다.

/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
    height: 14px;
    width: 16px;
    background-position: center 4px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='50,00 0,50 100,50'/></svg>");
}

::-webkit-scrollbar-button:single-button:vertical:decrement:active {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='50,00 0,50 100,50'/></svg>");
}

/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
    height: 14px;
    width: 16px;
    background-position: center 5px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,0 100,0 50,50'/></svg>");
}

::-webkit-scrollbar-button:single-button:vertical:increment:active {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,0 100,0 50,50'/></svg>");
}

Firefox에서 사용자 정의 스크롤 막대 만들기

Firefox에서 사용자 정의를 위해 제한된 옵션이 있습니다. Firefox는 스크롤 막대에 사용자 정의 스타일을 추가하기 위해 두 가지 CSS 속성을 지원합니다.

  • scrollbar-width– 이 속성을 사용하면 스크롤 막대의 너비 또는 두께를 설정할 수 있습니다. auto, thin 및 none의 세 가지 값을 허용합니다 . 여기에서 autothin기본값이며 스크롤 막대를 기본값보다 얇게 만들고 none웹 페이지에서 스크롤 막대를 제거합니다.
  • scrollbar-color– 이 속성을 사용하면 스크롤 막대의 썸 및 트랙 색상을 설정할 수 있습니다. auto그 가치로 받아들 입니다. auto기본값입니다. 그러나 빨강, 파랑 등과 같은 두 가지 유효한 색상 이름을 전달하거나 #FC9901, #F5F5F5와 같은 두 가지 색상 코드를 전달할 수 있습니다.

속성 에서 scrollbar-color첫 번째 색상 이름 또는 색상 코드는 이동할 수 있는 스크롤 막대의 썸에 적용됩니다. 두 번째 색상 이름 또는 색상 코드는 엄지손가락을 움직이는 스크롤바의 트랙에 적용됩니다.

참고: 이 두 속성을 사용할 때마다 루트 요소에서 사용해야 합니다.

scrollbar-width가 thin으로 설정된 경우 Firefox 브라우저에서 웹 페이지 스크롤 막대 표시

두 가지 방법으로 스크롤바에 스타일을 추가할 수 있다는 것을 이미 알고 있습니다. 첫째, 페이지의 모든 스크롤바에 적용될 전역 범위에서. 둘째, 페이지의 특정 섹션에 스타일을 추가합니다.

이것을 전역 범위에 추가하려면 아래 코드를 따르십시오.

* {
    scrollbar-width: thin;
    scrollbar-color: #f90 #f5f5f5;;
}

여기에서 내가 선택 *하는 것은 모든 것을 의미합니다. 다음을 사용하여 이러한 속성을 적용하면 *모든 스크롤바에 대해 제대로 작동합니다.

html또는 대신 사용하려고 했지만 body제대로 작동하지 않습니다. 내가 사용했을 때 모든 스크롤 막대에서 작동하지만 html세로 스크롤 막대에서만 작동합니다.scrollbar-colorscrollbar-width

html {
    scrollbar-width: thin;
    scrollbar-color: #f90 #f5f5f5;
}

세로 스크롤 막대를 사용할 때 body효과가 없고 가로 스크롤 막대에서는 scrollbar-color작동하지만 scrollbar-width속성은 작동하지 않습니다. *따라서 전역 범위에 대한 선택기 와 함께 이러한 속성을 사용하는 것이 가장 좋습니다 .

body {
    scrollbar-width: thin;
    scrollbar-color: #f90 #f5f5f5;
}

특정 섹션에 사용하려면 해당 섹션의 루트 요소에 넣어야 합니다.

루트 요소는 무엇을 의미합니까?

제품 목록을 표시하는 섹션이 있고 이 섹션에서 스크롤 막대에 스타일을 적용하려고 합니다. 이 섹션 의 경우 모든 제품이 있는 요소의 경우 이러한 속성을 해당 요소에 적용해야 합니다.

<div class="products">
    <div class="single-product">
        <div class="accomodation_item text-center">
            <div class="hotel_img">
                <img src="image/room1.jpg" alt="">
                <a href="#" class="btn theme_btn button_hover">Book Now</a>
            </div>
            <a href="#">
                <h4 class="sec_h4">Double Deluxe Room</h4>
            </a>
        </div>
    </div>
    <div class="single-product">
        <div class="accomodation_item text-center">
            <div class="hotel_img">
                <img src="image/room1.jpg" alt="">
                <a href="#" class="btn theme_btn button_hover">Book Now</a>
            </div>
            <a href="#">
                <h4 class="sec_h4">Double Deluxe Room</h4>
            </a>
        </div>
    </div>
</div>

위의 예에서 모든 제품이 div의 클래스가 있는 내부에 있음을 볼 .products수 있으므로 스크롤 막대에 스타일을 추가하려면 이 클래스에 해당 CSS 속성을 추가해야 합니다.

.products {
    width: 300px;
    height: 100px;
    overflow-y: auto;
    scrollbar-width: auto;
    scrollbar-color: #f90 #f5f5f5;
}

속성 을 설정 thin하면 scrollbar-width화살표 버튼이 제거되고 스크롤 막대가 매우 얇아집니다. 사용하기가 매우 어려워집니다.

그러나 속성을 사용 scrollbar-color하지 않고 속성을 사용 scrollbar-width하면 색상과 함께 기본 두께를 얻습니다. 더 보기 좋고 더 나은 사용자 경험을 제공한다고 생각합니다.

scrollbar-width가 자동으로 설정된 경우 Firefox 브라우저에서 웹 페이지 스크롤 막대 표시

그건 그렇고, scrollbar-width어떤 이유로 속성 을 사용해야 한다면 autonot 으로 설정하십시오 thin. 값을 설정 auto하면 동일한 결과가 출력됩니다.

사용자 정의 스크롤바에 호버 효과를 추가하는 방법

:hoverCSS 의사 클래스 를 사용하여 스크롤바 썸에 호버 효과를 추가할 수 있습니다 .

/* Works on Chrome, Edge, and Safari */
::-webkit-scrollbar-thumb:hover {
    background-color: #ec8f02;
}

/* Works on Firefox */
.products {
    width: 300px;
    height: 100px;
    overflow-y: auto;
    scrollbar-width: auto;
    scrollbar-color: #f90 #f5f5f5;
    transition: scrollbar-color 0.3s ease-out;
}

.products:hover {
    scrollbar-color: #ec8f02 #f5f5f5;
}

Chrome 및 기타 브라우저 의 경우 pseudo-element 에 적용 :hover합니다 . ::-webkit-scrollbar-thumb특정 섹션에 사용할 수도 있습니다.

Firefox의 경우 섹션 스크롤 막대에 호버 효과를 추가할 수 있습니다. 이 경우 transition호버에 속성을 적용할 수도 있지만 ::-webkit-scrollbar-thumb불가능합니다.

필요할 때 스크롤 막대 표시

오버플로 속성을 추가하여 섹션을 스크롤 가능하게 만들 수 있습니다. 이 속성은 4개의 값을 허용합니다. , visible, scroll및 입니다 auto. hidden다음 visible은 기본값입니다.

  • visible– 공간이 충분하지 않지만 스크롤바가 없는 경우 섹션의 내용이 외부로 표시됨을 의미합니다.
  • scroll– 나머지 콘텐츠를 볼 수 있는 스크롤바가 있음을 의미합니다. 그러나 이 경우 사용자가 스크롤바를 필요로 하지 않는 콘텐츠가 적더라도 스크롤바는 그대로 유지됩니다.
  • auto– 콘텐츠가 원본 섹션보다 더 많은 공간이 필요한 경우 사용자에게 스크롤바가 표시되지만 콘텐츠가 적으면 스크롤바가 표시되지 않음을 의미합니다.
  • hidden – 스크롤바가 없다는 뜻입니다. 섹션에 더 많은 콘텐츠가 있는 경우 사용자는 나머지 콘텐츠를 볼 수 없습니다.

따라서 value 를 사용하면 auto섹션의 스크롤 막대가 조건부로 표시되는 것을 볼 수 있습니다. 해당 섹션에 더 많은 콘텐츠가 있고 더 많은 공간이 필요한 경우 스크롤 막대가 표시됩니다. 그렇지 않으면 사용자에게 스크롤바가 표시되지 않습니다.

.products {
    overflow-y: auto;
}

사용자 지정 스크롤바를 생성할 때의 모범 사례

웹 페이지용 맞춤 스크롤바를 만드는 방법을 알고 나면 몇 가지 기술을 따라야 합니다. 이러한 모범 사례를 따르지 않으면 사용자 경험이 손상될 수 있기 때문입니다.

  • 스크롤바 너비는 너무 얇거나 너무 두꺼워서는 안 됩니다.
  • 절대적으로 필요한 경우 섹션에 스크롤바를 추가하십시오. 그렇지 않으면 피하십시오.
  • 스크롤바를 추가해야 하는 경우 항상 스크롤 없이 볼 수 있는 부분에 중요한 정보를 표시하세요.
  • 스크롤바 썸과 트랙의 색상 사이에 적절한 대비가 있어야 합니다.
  • 스크롤바를 자동으로 숨기고 표시합니다. 내용이 적으면 스크롤바를 숨깁니다. 그렇지 않으면 표시합니다.

스크롤바 브라우저 지원

지금까지 본 속성에 대한 브라우저 지원을 확인해보자. 모든 -webkit-버전은 Chrome, Safari, Edge, Opera, Android 등과 같은 대부분의 브라우저에서 지원됩니다.

webkit-scrollbar 및 scrollbar-width CSS 속성의 브라우저 지원

아래 링크를 클릭하시면 직접 확인하실 수 있습니다.

Firefox의 경우 두 가지 CSS 속성이 있습니다. 지원을 확인하면 Firefox 브라우저에서만 지원된다는 것을 알 수 있습니다.

여기에서 브라우저 지원을 확인할 수 있습니다.

스크롤바 선택기

WebKit 브라우저의 경우 다음 의사 요소 를 사용하여 스크롤 막대의 다양한 부분을 사용자 지정할 수 있습니다.

  • ::-webkit-scrollbar배경과 같이 전체 스크롤바에 스타일을 추가하는 데 사용됩니다.
  • ::-webkit-scrollbar-button은 스크롤바의 화살표 버튼을 사용자 정의하는 데 사용됩니다.
  • ::-webkit-scrollbar-thumb는 누군가가 페이지를 스크롤할 때 움직이는 스크롤바의 드래그 가능한 요소에 스타일을 추가하는 데 사용됩니다.
  • ::-webkit-scrollbar-track엄지손가락이 위아래 또는 좌우로 움직이는 진행률 표시줄입니다.
  • ::-webkit-scrollbar-track-piece드래그 가능한 요소(엄지손가락)로 덮이지 않은 트랙 부분입니다.
  • ::-webkit-scrollbar-corner가로 및 세로 스크롤 막대가 만나는 모서리 부분입니다. 이것은 일반적으로 브라우저 창의 오른쪽 하단 모서리입니다.
  • ::-webkit-resizer일부 요소의 하단 모서리에 있는 스크롤 막대 모서리 위에 나타나는 드래그 가능한 크기 조정 핸들입니다.

Firefox 브라우저의 경우 이 두 CSS 속성을 사용하여 스크롤 막대를 사용자 지정할 수 있습니다.

  • scrollbar-color스크롤바의 썸과 트랙에 색상을 추가하는 데 사용됩니다.
  • scrollbar-widthauto, nonethin값 을 사용하여 스크롤 막대에 너비를 추가하는 데 사용됩니다 .

결론

이 기사에서는 스크롤바에 있는 모든 요소, 이를 사용자 정의하는 방법, 브라우저 지원 등에 대해 논의했습니다.

또한 웹 페이지에서 스크롤 막대를 사용자 지정하는 동안 따라야 하는 모범 사례가 무엇인지도 알고 있습니다. CSS를 사용하여 이 모든 작업을 수행할 수 있습니다.

이제 모든 웹 페이지에 대해 CSS에서 사용자 정의 스크롤바를 만드는 방법에 대한 명확한 아이디어가 있기를 바랍니다.

https://www.webmound.com 의 원본 기사 출처

#css #webdev 

Duck Hwan

1672923120

Laravel에서 디버그 모드를 활성화 및 비활성화하는 방법

애플리케이션이 디버그 모드에 있을 때 스택 추적과 함께 자세한 오류 메시지가 애플리케이션 내에서 발생하는 모든 오류에 표시됩니다. 비활성화된 경우 간단한 일반 오류 페이지가 표시됩니다.

이 튜토리얼에서는 Laravel에서 디버그 모드를 활성화 및 비활성화하여 로컬 개발 중에 오류 메시지를 보고 프로덕션에서 오류 메시지를 숨기는 방법을 배웁니다.

디버그 활성화

Laravel은  APP_DEBUG .env 파일에 애플리케이션 디버그 모드를 처리하기 위한 플래그를 제공합니다. 기본값  은 이 모드로 true 변경하면  false 디버그 모드가 비활성화된다는 의미입니다.

APP_DEBUG 파일 에서 키를  검색  하고 디버그 모드를 활성화하고 디버그 모드  를 비활성화 .env 하려면 true로 변경합니다  .false

APP_NAME=Laravel
APP_ENV=local
APP_KEY=
APP_DEBUG=true
APP_URL=http://localhost

LOG_CHANNEL=single

디버그 비활성화

 환경 구성 파일 false 에서 APP_DEBUG 환경 변수 값을 로 설정합니다..env

APP_NAME=Laravel
APP_ENV=local
APP_KEY=
APP_DEBUG=false
APP_URL=http://localhost

LOG_CHANNEL=single

app.php를 사용하여 디버그 모드 활성화 또는 비활성화

config/app.php laravel 프로젝트에 있는 app.php 파일을 엽니다. 디버그 모드를 활성화하려면 키를 검색  debug 하고 참으로 변경하고 디버그 모드  false 를 비활성화하려면 기본값이 표시  false됩니다.

'debug' => env('APP_DEBUG', false),

디버그 활성화

'debug' => env('APP_DEBUG', true),

디버그 비활성화

'debug' => env('APP_DEBUG', false),

행복한 코딩!!!