위와 같이 컨테이너 사이의 이미지 또는 텍스트를 CSS의 ::before 가상요소 선택자로 만드는 방법을 안내하겠습니다.
.box {
position: relative;
}
.box::before {
content: "";
position: absolute;
top: 50%;
right: -12%;
transform: translate(0, -50%);
width: 20px;
height: 20px;
background-image: url("주소");
background-size: contain;
background-position: center;
}이미지, 아이콘, 텍스트를 가상요소 선택자를 활용하여 자유자재로 삽입할 수 있습니다.
워드프레스 또는 티스토리를 통해 블로그를 운영할 때 소제목 서식을 사용하면 시각적인 효과가 있고, 한 눈에 보기 쉬어 가독성이 향상 됩니다. 오늘 포스팅에서는 몇가지 추천드리는 소제목 디자인과 CSS 코드를 제공하겠습니다.
<h3 style="padding: 0.4em 1em 0.1em 0.2em; margin: 0.5em 0em; border-bottom: 4px #5B78FB solid;">소제목 1</h3><h3 style="padding: 0.4em 1em 0.4em 0.5em; margin: 0.5em 0em; border-left: 10px solid #5B78FB; border-bottom: 2px #5B78FB solid;">소제목 2</h3><h3 style="padding: 0.3em 0.5em 0.3em 0.5em; margin: 0.5em 0em; border-left: 10px solid #5b63fb;">소제목 3</h3><div style="background-color: #EEF3FF; margin-top: 20px; margin-bottom: 15px; padding: 5px 10px;">
<h3 style="border-left: #5B78FB 10px solid; padding: 0.2em 0.5em; margin: 0.2em 0em;">소제목 4</h3>
</div>소제목 1</h3><h3 style="padding: 0.4em 1em 0.4em 0.5em; background: #EEF3FF; margin: 0.5em 0em; border-left: #5B78FB 10px solid;">소제목 5</h3><h3 style="background: #EEF3FF; margin: 1em 0em; padding: 15px 20px; border-radius: 20px 0px 20px 0px;">소제목 6</h3><h3 style="background: linear-gradient(to right, #7b2ff7 0%, #396afc 100%); color: #fff; font-size: 22px; margin: 0.5em 0em; padding: 15px 20px; border-radius: 20px 1px 20px 1px;">소제목 7</h3>상단의 이미지에 사용하실 소제목을 아래의 코드를 활용해 여러분의 블로그를 멋지게 꾸며보세요.
워드프레스를 제작시 CSS를 통해 디자인을 꾸미고, Javascript를 통해 기능 추가 또는 동적인 화면을 구현할 수 있습니다. Bootstrap 또는 각종 플러그인, 라이브러리를 적용하기 위해서 필요한 파일 삽입 방법을 안내하겠습니다.
function 테마명_style(){
wp_enqueue_style('theme-default-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', '테마명_style');get_stylesheet_uri() 함수 사용시 자동으로 style.css를 삽입해줍니다.
function 테마명_style(){
wp_enqueue_style('theme-default-style', get_stylesheet_directory_uri().'경로');
}
add_action('wp_enqueue_scripts', '테마명_style');function 테마명_script(){
wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', '테마명_script');워드프레스 코어 속에 jQuery가 내장되어 있으므로 wp_enqueue_script('jquery'); 명령어를 통해 간단히 제이쿼리를 불러올 수 있습니다.
function 테마명_script(){
wp_enqueue_script('theme-default-script', get_template_directory_uri().'경로', array());
}
add_action('wp_enqueue_scripts', '테마명_script');if(is_front_page()) { //프론트 페이지의 경우
wp_enqueue_script('front-script', get_stylesheet_directory_uri() . '/js/front.js', array(), '1.0.0', true);
}
if(is_page('about')) { //슬러그 about 페이지의 경우
wp_enqueue_script('about-script', get_stylesheet_directory_uri() . '/js/about.js', array(), '1.0.0', true);
}실제 사용되는 페이지에서만 CSS와 스크립트 코드가 로드되어야 불필요한 리소스가 동작하지 않고, 페이지 속도를 최적화 시킬 수 있습니다. 리소스 컨트롤을 위해 워드프레스에서 제공하는 conditional tags를 사용할 수 있습니다.
워드프레스 위젯 추가하는 방법
Bootstrap 워드프레스에서 사용(css)
워드프레스 폰트 추가 방법
Bootstrap은 웹사이트를 쉽게 만들 수 있도록 도와주는 css, js 프레임워크 입니다. 복잡하지 않는 커스텀 디자인된 사이트가 아닌 일반 사이트에서는 많이 Bootstap을 사용하여 사이트를 제작하는데요. 이 글에서는 Bootstrap을 워드프레스에 적용하여 사용하는 방법을 안내하겠습니다.
여기에서 Bootstrap Source file을 다운로드합니다. 압축을 해제하면 css와 js 폴더로 이루어져 있습니다.
테마 폴더(루트: wp-content > themes > 해당 테마) 안에 bootstrap 폴더를 생성하고 다운로드한 css, js 폴더를 업로드 합니다.
<?php
function wptutorial_style(){
//style.css 삽입하기
wp_enqueue_style('theme-default', get_stylesheet_uri());
//bootstrap-css 삽입하기
wp_enqueue_style('theme-bootstrap', get_template_directory_uri().'/bootstrap/css/bootstrap.min.css');
//bootstrap-js 삽입하기
wp_enqueue_script('theme-bootstrap-js', get_template_directory_uri().'/bootstrap/js/bootstrap.min.js');
}
add_action('wp_enqueue_scripts', 'wptutorial_style');
?>워드프레스에서 style이나 script를 링크해주려면 functions.php 파일에 워드프레스용 코드를 삽입해야 합니다. style sheet를 링크해주기 위해서는 wp_enqueue_style 함수를, script는 wp_enqueue_script를 사용해야 합니다.
코드 입력 후 페이지 소스보기 화면에서 css와 js가 잘 들어갔는지 확인합니다.
Bootstrap은 이미 완성된 css 코드를 가져와 편하게 사이트에서 적용하기 위해 사용하는 css 프레임워크입니다. Bootstrap 코드를 가져와 웹에서 사용하면 별도의 스타일 코딩 작업이 없어 시간을 단축할 수 있어 효율적입니다.
scss는 css와 완전히 호환되는 스타일시트 언어로 보다 짧게 코드를 입력하고, 넓게 사용이 가능하여 선호하기에 Bootstrap scss를 이용해 워드프레스에서 적용하는 방법을 살펴보겠습니다.
방법은 Bootstrap 소스 파일을 다운로드 한 후 테마 폴더안에 업로드 한 후 functions.php 함수 파일 내에 코드를 등록하면 되는데요. scss는 컴파일링한 css 파일을 functions.php 함수 파일 내에 등록한 후, 이 업로드한 scss 파일을 import하여 사용할 수 있습니다.
cdn 코드를 가져와서 간단하게 사용하는 방법도 있지만 scratch 작업을 할 경우, 파일을 다운로드 하는 방법을 사용하는 것을 권장합니다.
여기에서 Bootstrap Source file을 다운로드합니다.
테마 폴더(루트: wp-content > themes > 해당 테마) 안에 css 폴더를 생성하고 안에 다운로드한 Bootstrap 폴더를 업로드합니다.
코드 편집기를 이용해 css 폴더 내에 main.scss 파일을 생성한 후 Live Savss Compiler 별도의 플러그인을 검색한 후 설치해 줍니다. 이 플러그인을 이용해 scss를 css로 컴파일링합니다.
필자는 코드 편집기로 무료인 Visual Studio Code를 사용합니다.
하단에 Watch Sass를 클릭하여 컴파일링 작업이 실행되어 같은 위치에 main.css, main.css.map 파일이 자동 생성됩니다.
functions.php 파일 내에서 **Enqueue scripts and styles. 를 찾아 테마명_scripts() 함수 안에 아래 코드를 추가합니다. 이 함수는 script와 style 적용을 위해 생성된 함수이므로 여기에 추가하면 등록이 됩니다.
wp_enqueue_style( 'custom3-main', get_template_directory_uri() . '/css/main.css' );
Bootstrap scss 코드 사용을 위해서는 업로드한 폴더를 main.scss 폴더에서 importing 하는데요. 코드는 Bootstrap 사이트 > Customize > Sass의 Importing 섹션에서 가져옵니다.
main.scss 파일 내 최상단에 아래 코드를 입력합니다.
@import "업로드한 scss bootsrap 폴더(경로 맞게)"
상단에서 설치한 complier 플러그인이 자동으로 컴파일링을 하면서 main.css 파일에 bootstrap css 코드가 불러와집니다.
이 파일의 크기는 272kb로 많은 용량을 차지하지는 않음을 알 수 있습니다.
import 후 테스트를 위해 import 코드 상단에 custom 코드를 추가한 후 사이트에 정상적으로 적용된 것을 알 수 있습니다.
