워드프레스 #26
이번 영상에서는 워드프레스에서 웹사이트 스타일링을 하기 위해 CSS를 사용하는 방법에 대해 배워볼게요. 워드프레스에서 스타일은 기본적으로 style.css 파일입니다. 어떤 css 파일을 수정해야 스타일이 바뀌는지, function.php 내에서 style.css를 어떻게 연결하는지 등을 배워볼게요.
functions.php에서 스타일 파일 로드하기
우선, functions.php 파일을 열어 스타일 파일을 등록하고 로드하는 방법을 확인해보겠습니다.
function supernormal_style_sheet() {
// 스타일시트 로드
wp_enqueue_style('supernormal-style', get_stylesheet_directory_uri() . '/assets/css/style.min.css');
}
add_action('wp_enqueue_scripts', 'supernormal_style_sheet');
위 코드는 style.min.css 파일을 로드합니다. functions.php 파일에 이 코드를 추가하면, 워드프레스는 해당 스타일 파일을 모든 페이지에서 로드하게 됩니다.
VS Code에서 스타일 작업하기
이제 VS Code를 사용하여 스타일 작업을 진행하겠습니다. 아래의 단계들을 따라 스타일을 조정해보세요.
1. VS Code 설치 및 설정
VS Code를 설치하고, 워드프레스 테마 폴더를 열어줍니다.
2. 파일 구조
테마 폴더 내에 assets/css 폴더를 만들고, 그 안에 style.css 및 style.min.css 파일을 생성합니다. style.min.css 파일은 style.css 파일을 압축한 버전입니다.
3. style.css 파일 작성
style.css 파일에 필요한 스타일을 작성합니다.
body {
font-family: Arial, sans-serif;
}
h1 {
color: #333;
}
p {
color: #666;
}
4. style.min.css 파일 생성
style.min.css 파일을 생성하고, style.css 파일의 내용을 압축하여 복사합니다. 이를 위해 CSS Minifier와 같은 온라인 도구를 사용할 수 있습니다.
5. 실시간 미리보기
VS Code의 Live Server 확장 프로그램을 설치하여 실시간으로 변경 사항을 미리볼 수 있습니다. 이를 통해 스타일 작업의 효율성을 높일 수 있습니다.
6. functions.php 파일에서 스타일 파일 로드
앞서 설명한 대로, functions.php 파일에서 스타일 파일을 로드하도록 설정합니다.
결론
워드프레스에서 스타일을 조정하는 기본적인 방법을 배웠습니다. style.css 파일을 통해 스타일을 정의하고, 이를 style.min.css로 압축하여 functions.php 파일에서 로드하는 과정을 살펴보았습니다. VS Code를 사용하여 효율적으로 스타일 작업을 진행하고, 실시간으로 변경 사항을 확인할 수 있습니다. 이 방법을 통해 워드프레스 테마의 스타일을 보다 체계적으로 관리할 수 있습니다.
