워드프레스 테마 Custom CSS padding / important

워드프레스 테마를 커스터마이징(customizing) 할 때 가장 많이 쓰는 것 중의 하나가  css padding 입니다.

스스로 공부한 것을 잊어버리지 않도록 기억할 겸 정리합니다.

알아야 할 두가지는

1. css padding의 방향이며,

2. 축약형(“상우하좌”의 padding 요소중 크기가 같을 때 많이 씀)의 룰(Rule)입니다.

css padding의 순서는 상단(Top)에서 시계방향으로 돌아갑니다. 이것은 꼭 기억해놔야 커스터마이징할 때 헷갈리지 않습니다.

그리고, 축약형을 만났을 때도 좀 헷갈리니 꼭 기억을 해야 합니다.

 

워드프레스 테마 Custom css padding 룰 설명 이미지 2

 

워드프레스 아바다 테마 (WordPress Avada Theme) 등 어떤 테마라 하더라도, Custom CSS를 사용할 수 있도록 되어 있을 것입니다.

위의 그림은 아바다테마(Avada Theme)의 Custom CSS 메뉴입니다.

 

워드프레스 테마 Custom css padding 룰 설명 이미지 1

 

윗 그림은 css를 css파일이나 <body> 태그 앞에서 정의할 때 쓰는 형식입니다.

#main { padding-top: 30px !important; }을 해석하면, 선택자 id=”main”으로 정의된 css 태그에 상단부 패딩(여백, 또는 띄우기)을 30px로 주며, 뒤에 !important는 다음에 main이라는 id 선택자를 만나더라도, !important가 표시된 이것을 우선 적용하라는 뜻입니다.



important 표시 없이 예를 들어 실수로 값은 이름의 main 클라스를 정의했다면 나중에 나오는 것을 적용합니다.

여기서 선택자라는 말이 나오는 데요. 선택자는 크게 type, class, id 등으로 나뉘고 다음과 같은 형식이니 알아두고 넘어갑니다.


body { 속성1:속성값1; 속성2:속성값2;…}와 같은 html 태그 타입 선택자.

.classname {속성1:속성값2;…}와 같은 클래스 선택자 – 맨앞에 점(.)이 나오는 것을 기억할 필요.

#idname {속성:속성값1;…}와 같은 css 아이디(id) 선택자 형식 – 맨 앞에 ‘#’ 표시가 나옵니다.


inline 형식으로 써보면 <div style=”속성:속성값;속성2:속성값;…”>와 같이 style로 정의합니다.

이제 본론으로 CSS padding 형식을 살펴 봅니다.


상-우-하-좌(top-right-bottom-left)의 순서가 된다는 것 기억하시죠?


#idname {padding:10px 20px 30px 40px} = 상단 10px, 우단 20px, 하단 30px 좌단 40px 띄우기.

#idsname {padding:10px 20px 30px} = 세개가 있을 때는 가운데 값이 좌우 동일(20px), top 10px, bottom 30px

#idname {padding:10px 20px} = 두개가 나올 때는 top과 bottom이 같은 값 10px, right-left이 같은 값 20px

#idname {padding:50px} = 한개가 나올 때는 top-right-bottom-left가 모두 같은 값 50px 적용.


위의 예에서 CSS 선택자를 모두 아이디(id)로 했는데, 다른 선택자의 경우도 마찬가지입니다. inline css에서는 {…} 표시가 아니라 <div style=”…”>과 같이 style로 정의핪니다.

 

워드프레스 테마 Custom css padding important 룰 설명 이미지 3

 

이상 간략히 CSS padding과 !important가 무엇을 뜻하는 지 알아봤습니다.