PHP에서 CSS 스타일 사용
이 기사에서는 PHP에서 CSS 스타일을 사용하는 데 도움이 되는 세 가지 방법을 설명합니다.
첫 번째 방법은 PHP 전용 파일을 통한 방법이고 두 번째 방법은 HTML+CSS 파일에 PHP를 포함하는 방법입니다. 그런 다음 세 번째 방법은 PHP echo 문에서 인라인 CSS를 사용합니다.
PHP 전용 파일에서 CSS 사용
표준 HTML 파일은 <head> 요소에 CSS 스타일을 포함하거나 외부 CSS 파일에 연결할 수 있습니다. 기본적으로 이 CSS 파일은 css 확장자를 갖지만 php 확장자를 가질 수도 있습니다.
즉, CSS 코드를 작성하고 PHP 파일로 저장하고 HTML에 연결할 수 있습니다. 이 PHP 파일에서는 CSS 파일에서 수행할 작업보다 더 많은 작업을 수행할 수 있습니다. PHP 코드를 작성할 수 있습니다.
먼저 CSS 속성과 변수로 저장된 값을 사용하여 PHP 코드 블록을 정의할 수 있습니다. 그런 다음 PHP 블록 외부에서 변수를 CSS 속성 값으로 사용하는 일반 CSS를 작성할 수 있습니다.
우리는 다음과 같이 했습니다. styles.php로 저장합니다.
<?php
// The "header" is the most important part of
// this code. Without it, it will not work.
header("Content-type: text/css");
$font_family = 'Trebuchet MS, Verdana, Helvetica';
$font_size = '1.2em';
$background_color = '#000000';
$font_color = '#ffffff';
// Close the PHP code block.
?>
body {
background-color: <?php echo $background_color; ?>;
color: <?php echo $font_color; ?>;
font-size: <?php echo $font_size; ?>;
font-family: <?php echo $font_family; ?>;
}
다음 HTML을 저장하고 <link> 태그에 styles.php를 연결했는지 확인하십시오.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpage using CSS styles generated with PHP</title>
<!-- Link styles.php as the CSS file -->
<link rel="stylesheet" type="text/css" href="styles.php">
</head>
<body>
<h1>Hello, We styled this page using CSS in a PHP file!</h1>
<h1>How cool is that?</h1>
</body>
</html>
출력:
PHP+HTML 파일에서 CSS 사용
HTML은 전용 PHP 블록에 PHP를 포함할 수 있는 <style> 태그 또는 <link> 태그를 통해 CSS를 사용할 수 있습니다. PHP 코드가 HTML 코드를 생성하거나 조작하는 경우 연결된 CSS 코드가 HTML의 스타일을 지정할 수 있습니다.
예를 들어 PHP가 HTML 테이블을 만들기 위해 데이터베이스 레코드를 가져오는 경우 CSS를 사용하여 테이블 스타일을 지정할 수 있습니다. 이를 수행하는 방법을 보여주기 위해 MySQL에서 my_website라는 데이터베이스를 생성합니다.
다음으로 다음 쿼리를 사용하여 my_website에 site_users 테이블을 만듭니다.
CREATE TABLE site_users (
user_id INT NOT NULL AUTO_INCREMENT,
username VARCHAR(50) NOT NULL,
email VARCHAR(100) NOT NULL,
PRIMARY KEY (user_id)) ENGINE = InnoDB;
site_users 테이블에 데이터를 삽입합니다.
INSERT INTO site_users (username, email) VALUES ('user_1', 'user_1@gmail.com');
INSERT INTO site_users (username, email) VALUES ('user_2', 'user_2@gmail.com');
INSERT INTO site_users (username, email) VALUES ('user_3', 'user_3@gmail.com');
이제 다음에는 HTML, PHP 및 CSS가 있습니다. CSS는 <head> 요소에 있습니다. PHP는 HTML 내의 PHP 블록에 있습니다.
PHP는 site_users 테이블의 레코드를 사용하여 HTML 테이블을 생성합니다. PHP가 테이블을 생성하면 CSS가 스타일을 지정합니다.
<!doctype html>
<head>
<meta charset="utf-8">
<title>Style MySQL table with CSS</title>
<style>
/* This CSS will style the table generated by PHP. */
table { border-collapse: collapse; width: 30em; font-size: 1.2em; }
table, th, td { border: 2px solid #1a1a1a; }
td,th { padding: 0.5em; }
/* Create a striped table. */
tr:nth-child(even) { background-color: #f2f2f2; }
/* General body styles. */
body { display: grid; justify-content: center; align-items: center; height: 100vh; }
</style>
</head>
<body>
<main>
<!--
We generated this table using PHP, and the CSS
style in the <style> tag will apply to it.
This is another way to use CSS in PHP.
-->
<?php
// Connect to the database. Change the connection
/// settings based on your environment.
$connect_to_mysql = new mysqli("localhost", "root", "", "my_website");
// Select the data from the site_users table.
$site_users = $connect_to_mysql->query("SELECT * FROM site_users")->fetch_all(MYSQLI_ASSOC);
// Get keys from the first row.
$table_header = array_keys(reset($site_users));
// Print the table.
echo "<table>";
// Print the table headers.
echo "<tr>";
foreach ($table_header as $value) {
echo "<th align='left'>" . $value . "</th>";
}
echo "</tr>";
// Print the table rows
foreach ($site_users as $row) {
echo "<tr>";
foreach ($row as $value) {
if (is_null($value)) {
echo "<td>NULL</td>";
} else {
echo "<td>" . $value . "</td>";
}
}
echo "</tr>";
}
echo "</table>";
?>
</main>
</body>
출력:
PHP echo 문에서 인라인 CSS 사용
PHP는 HTML과 잘 작동하며 인라인 CSS가 포함된 HTML을 웹 브라우저에 보낼 수 있는 echo 문이 있습니다. 이것은 많은 양의 HTML을 디버그하거나 웹 브라우저로 보낼 때 유용합니다.
다음은 PHP echo와 함께 인라인 CSS를 사용하는 방법을 보여줍니다. 텍스트를 정의하고 $colors_array에 세 가지 색상을 저장합니다.
그런 다음 foreach를 사용하여 $colors_array를 반복하고 배열 요소를 인라인 CSS의 값으로 설정합니다. 코드를 실행하면 텍스트가 다른 색상으로 세 번 나타납니다.
<?php
$sample_text = "We generated this text color using inline CSS in PHP.";
$colors_array = ['red', 'green', 'blue'];
foreach ($colors_array as $value) {
// Use inline CSS with PHP echo.
echo "<p style='color: $value'>" . $sample_text . "</p>";
}
?>
출력:
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn