워드프레스 테마를 만들거나 수정보완할때 CSS 설정이 필요한 경우가 많습니다. 보통 CSS는 아래 구조를 갖습니다.
태그명 { 속성: 속성값; }
선택자 { 속성: 속성값; }이구요. 이 구조를 응용해서 CSS를 지정할 수 있습니다. HTML 태그명에 대해 속성을 주거나, HTML 태그명에 붙은 id나 class 값을 지정해서 속성을 주는 것입니다. 예를 들면 태그가 <div class=”greetings”>안녕하세요!</div> 라고 하면 가능한 CSS 코드는 아래와 같습니다.
div { font-size: 12px; /* 안녕하세요의 글자 크기를 12px로 변경 */ }
.greetings { font-size: 12px; }우선 이 두가지가 가능하구요.
태그명 { 속성: 속성값; }
선택자 { 속성: 속성값; }의 형태로 비교해보시면 이해가 되실 것입니다.
div 태그명만 기재한 첫번째 예시처럼 하면, HTML 코드 내에 있는 모든 div 에 적용됩니다. (블락을 지정한 구조에 따라 예외는 있음) 이와 달리 div 태그마다 다른 CSS 설정을 하고 싶다면, id나 class 값을 태그에 기재하고, 이를 선택자로 해서 선택자를 지정한 두번째 예시처럼 하면 .greetings 값을 쓰는 모든 태그에만 적용됩니다. 이것의 의미는
<div class="greetings">안녕하세요!</div>
<span class="greetings">안녕하세요!</span>
<p class="greetings">안녕하세요!</p>처럼 된 HTML을 제어할때 .greetings { font-size: 12px; } 코드 하나로 해당 선택자가 온 모든 태그가 제어가 된다는 것입니다. 이와 달리
<div>안녕하세요!</div>
<div>안녕하세요!</div>
<div>안녕하세요!</div>를 제어할때 div { font-size: 12px; } 처럼 하면 모든 div 태그에 적용되구요.
<div>안녕하세요!</div>
<div class="greetings">안녕하세요!</div>
<div>안녕하세요!</div>를 제어할때 .greetings { font-size: 12px; } 처럼 하면 중앙의 div 에만 적용됩니다.
구조에 따라 특정 구조에만 적용하려면
<div class="greetings">안녕하세요!</div>
<span class="greetings">안녕하세요!</span>
<p class="greetings">안녕하세요!</p>일때,
div .greetings { 속성: 속성값; }
span .greetings { 속성: 속성값; }
p .greetings { 속성: 속성값; }처럼 하면 각각 지정됩니다.
HTML 태그 중첩 상태에 따라서는 선택자들끼리 포함 순서를 직접 지정해도 됩니다.
.outermost .middle .innermost { 속성: 속성값; } 처럼요. 이 경우는
<div class="outermost"><div class="middle"><div class="innermost">안녕하세요!</div></div></div>처럼 여러 태그가 중첩되어 선택자를 가진 구조일때 유효합니다.
{ } 블락안에 지정할 속성값을 결정하려면, 태그마다 다릅니다. 태그마다 다른 속성이 정의되어 있기도 하고, 모든 태그에 공통적인 속성이 있기도 합니다. 위의 예에서는 태그로 감싼 부분에 들어가 있는 레이아웃 구성 요소가 문자열이라 타이포그라피 제어를 하는 font-size: 를 속성으로 주었구요. 이외에도 많은 속성이 가능합니다. 태그마다 달라서 살펴보고 지정하면 됩니다. 필요에 따라 지정하면 됩니다.
HTML 코드가 사이트마다 다르고, 포함구조도 달라서 HTML 코드를 보고 어떤 태그명인지, 어떤 선택자인지를 알아야 해서 HTML 코드 상태를 잘보고 CSS를 구성해야 합니다. 보통 오른쪽 클릭이 되는 경우라면 소스보기가 가능합니다. 웹브라우저에서 해당 HTML이 표시된 상태에서 오른쪽 클릭해서 나온 컨텍스트 메뉴에서 소스보기 메뉴를 선택하면 HTML 코드를 살펴볼 수 있습니다. HTML 코드를 살펴보고 지금까지 해설한 문법을 준수해서 지정하면 됩니다. 오른쪽 클릭이 안되면 개발자 모드를 켜는 F12키를 눌러서 확인해도 되구요. 소스보기 메뉴와 F12키를 눌러서 보는 개발자 모드를 쓰는 방법은 서로 다른 기능으로, 목적에 맞게 선택해서 쓰면 됩니다.
시선에 방해안되는 것은 후자보다 전자인 소스보기 기능으로 하는 것입니다. F12키로 확인하는 것은 기능이 많아 간단한 확인용으로는 이것보다 소스보기 기능을 쓰면 좋습니다. F12키로 켜는 개발자 모드가 더 강력하고 다양한 기능을 제공하지만, 이와 별도로 소스보기 기능을 쓰면 빠르고 간단한 확인에 좋습니다.
아래 순서대로 하시면 됩니다.
(1) CSS 설정을 할 레이아웃 요소가 포함된 웹페이지를 웹브라우저로 불러옴
(2) 불러와진 화면에서 오른쪽 클릭 후 소스보기 실행
(3) CTRL+F로 검색 (위의 코드예시에서면 “안녕하세요!”로 검색)
(4) “안녕하세요!” 문자열이 포함된 유사한 라인을 찾아준다.
(5) 즉시 찾아지지 않았다면 F3 키를 눌러가며 바라는 위치의 라인으로 이동
(6) 라인이 찾아지면 id나 class값, 태그명을 주목
(7) CSS에 반영
이렇게 찾아낼 수 있습니다.