wp_enqueue_style() | CSS 파일 연결
개요
워드프레스에서 사용되는 CSS 파일을 연결하는 방법입니다.
wp_enqueue_style('{$이름}', {$경로}, {$의존}, '{$버전}', '{$영역}');| 매개변수 | 예제 | 설명 | 필수 |
|---|---|---|---|
| $이름 | 이름 | 겹치지 않는 이름을 지정합니다 | O |
| $경로 | get_template_directory_uri() . ‘주소값’ | 파일 경로를 지정합니다. | O |
| $의존 | array(부모 스타일명) | 먼저 실행해야하는 스타일 | X |
| $버전 | 1.0.0 time() | 버전명을 1.0.0로 설정합니다. 버전명을 시간으로 설정합니다 | X |
| $영역 | all (기본값) screen hendheld | 이 스타일시트를 로드할 범위를 선택합니다. | X |
여기서 $버전을 time() 함수로 사용하게 되면 개발할 때 실시간으로 새로 갱신하기 때문에 강력새로고침을 하지 않더라도 CSS가 최신버전으로 다운받게 됩니다.
사용방법
function style_sheet_default()
{
// 여기에 함수 추가
}
add_action('wp_enqueue_scrupts' , 'style_sheet_default');우리는 액션 함수를 활용하여 함수를 작동시킬겁니다.
적용방법은 테마의 functions.php 에 값을 추가하면 되는데 자세한 내용은 [이곳] 을 참고하시면 됩니다.
관리자 적용방법
wp_enqueue_scrupts 는 프론트 엔드 영역에서만 작동되는 스크립트이며, 관리자 영역에서 작동되길 원하신다면 admin_enqueue_scripts 를 대체해서 넣으면 됩니다.
쉬운 적용방법
// 설명용
wp_enqueue_style('$이름', $경로);
// 활용
wp_enqueue_style('rdg_theme_style', get_template_directory_uri().'/style.css' );가장 쉽게 사용하는 방법입니다. $이름과 $경로 만 설정하면 사용할 수 있습니다. get_template_directory_uri() 를 활용하면 테마 경로를 가져오게 됩니다. 테마 경로에 있는 style.css 를 가져온다는 의미입니다.
핵심 적용방법
// 설명용
wp_enqueue_style('$이름', $경로, $의존, '$버전', '$영역');
// 활용
wp_enqueue_style('rdg_theme_style', get_template_directory_uri().'/style.css', array(), '1.0.0', 'all');$의존은 먼저 실행되어야 하는 CSS가 있는경우 array() 안에 적어두면 그 CSS가 실행된 다음 해당 스타일이 실행됩니다. 보통은 부트스트랩을 적습니다. 이것이 궁금하신 분은 [여기] 를 참고해주세요
$버전은 브라우저에게 캐시를 새로 다운받아야 한다는 것을 알릴 수 있습니다. 잔꾀를 부리자면 time() 함수를 사용하여 매번마다 다운받게 만들 수도 있습니다. 이 방법은 개발할 때만 사용하면 편합니다.
$영역은 해당 스타일시트가 어디까지만 사용되어야 하는지 영역을 잡을 수 있습니다.
기본 스타일시트 사용하기
wp_enqueue_style('style', get_stylesheet_uri());테마에 있는 style.css 를 스타일시트로 사용할 수 있게 만들어줍니다.
HTML 적용방법
<html>
<head>
<meta charset="utf-8"/>
<title>스타일 연결</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
</html>일반적인 방법은 <head> 태그의 마지막에 link 태그를 추가합니다.
CSS 원리 이해
CSS는 Cascading Style Sheets 라는 뜻을 가지고 있습니다. Cascading 의 단어 뜻은 폭포라는 의미가 있는데, 위에서 아래로 내려간다는 의미가 담겨있습니다.
코드가 실행되는 순서도 위에서 아래로 내려가면서 실행된다는 이야기이고, 만약 코드 윗줄에서 15픽셀을 지정했다고 해도 아랫줄에서 다시 정의하면 아랫줄이 적용된다는 의미이기도 합니다.