문제 해결 일반 - 사이트 운용 - 웹프로그래밍 - 프로그래밍

CSS가 안통할때 대처법 정리

보통 HTML 상태를 CSS가 잘 받아 처리한다면 잘 통합니다. 몇가지 규칙만 잘 지켜주면 되죠. 잘 작동할 것 같은 경우에도 잘 작동을 안할때도 있는데 이 경우 난감하기도 합니다. 이런 경우 몇가지 대처법을 정리해봅니다.

(1) 태그들의 겹쳐진 구조가 잘 반영되어 있는가?

아래와 같은 HTML 이면 아래와 같은 CSS로 되어 있어야 작동합니다.

<div class="entry-content"><p>글 내용</p></div>

이 경우

.entry-content p { font-size: 12px; }

이라고 순서를 지켜서 CSS 코드를 짜야합니다.

<div class="entry-outer entry-compose entry-content"><p>글 내용</p></div>

처럼 선택자가 세개라면 맨마지막에 온 선택자에 온 속성이 적용됩니다.

하나의 CSS 파일에 아래와 같은 순서로 위 HTML을 제어하면요.

.entry-compose { font-size: 12px; // class에 두번째 기재된 속성이지만 효력 상실 }
.entry-content { font-size: 15px; // 세번째에 온 속성이지만 효력 상실 }
.entry-outer { font-size: 18px; // 최종적으로 효력 획득 }

이 경우 폰트 크기는 18px이 될 것입니다.

물론 한 태그에 온 각각의 선택자 CSS 명세에 다른 선택자가 지정하지 않은 속성이 오면 그 속성은 적용됩니다.

.entry-compose { font-size: 12px; font-height: 160%; }
.entry-content { font-size: 15px; }
.entry-outer { font-size: 18px; }

로 되어 있다면 선택자 순서에 상관없이 font-height: 160%가 적용되죠.

(2) 단위가 잘 지정되어 있는가?

px이나 pt 말고도 rem이나 em 등의 단위로 길이나 크기 지정이 됩니다. em이나 rem의 경우 특히 상위 코드에서 온 값에 토대로 작동해서, 다른 테마에서는 제대로 되는 수치가 그대로 적용이 안되기도 합니다. 이 경우 px이나 pt 등으로 바꿔 적용해볼 수 있습니다.

rem은 HTML 태그에서 em은 상위 코드에 토대를 두고 조정됩니다. px이나 pt는 상위 코드에 독립적으로 조정됩니다. 화면 크기와 DPI같은 속성에도 영향을 받지만, 대개 px나 pt로 지정하면 rem이나 em으로 할때보다 숫자에 비례하는 수치가 잘 적용될 것입니다.

(3) HTML 태그가 지원하는 속성인가?

div 인 경우 display 속성이 inline-block 이어야 일렬로 되고

li 인 경우 display 속성이 inline 이어야 일렬로 됩니다.

예외인 경우도 있으나 HTML 태그에 따라 올 수 있는 CSS 속성값이 정해진대로 해야 합니다. 이 경우 CSS 해설을 찾아보고 대처하면됩니다.

(4) CSS 해석기에게 직접 문제없다고 알려야 하는 경우

문법도 잘못없고 꼭 맞는데 안되면 !important 라고 기재하면 되기도 합니다. 아래처럼 하세요.

.entry-content p { font-size: 12px !important; }

(5) 워드프레스에서 지정한 추가 CSS 의 최종 효력 문제

워드프레스에서는 외모 → 사용자 정의하기 → 추가 CSS 에 기재한 CSS 코드가 최종적으로 적용되는 것 같습니다. 그래서 CSS를 파일이나 타메뉴로 고칠때 적용이 안되면 추가 CSS 메뉴에 적용한 내용을 검토하면 될때가 있습니다.

가독성이 있는 해설인지요? 일단 이렇게 정리해둡니다.


이 외에도 오타가 난 부분이 화면에서 밀려나 있어서인 경우도 있구요. class로 온 선택자와 id로 온 선택자를 실수로 잘 못 기재해서일 수도 있습니다. class 선택자는 온점(.) 으로 시작하게 CSS 작성을 해야 하구요. id는 #으로 시작합니다.

.entry-content { font-size: 12pt; }
#entry-content { font-size: 12pt; }

또 한가지 정보를 드리자면요. 아래와 같은 능력도 기르면 좋습니다.

<center><div class=”box”>글자입니다</div></center>

라고 되어 있을때 div 태그 내에 있는 컨텐츠가 중앙으로 정렬되는 경우가 있는데 이 경우 아래처럼 CSS를 구성합니다.

.box { text-align: left !important; }

이런 보완법을 생각하는 능력이 CSS를 통하게 하는 용도도 되구요.

.box { width: 700px; margin: auto; }

로 하고 HTML코드에서

<center>와 </center>

를 삭제하는 등의 방법도 가능합니다. 특히 이 후자의 예는 가운데 정렬을 컨테이너에 할때 잘 통합니다. (다른 코드가 저해하지 않을 때)


그리고 추가로 PC 상태나 서버 상태에 따라 바꾼 CSS가 작동하지 않을때도 있습니다. 이 경우 서버 캐시를 지우시고 웹브라우저 임시파일도 지우시고 페이지를 새로고침 버튼을 눌러 다시 불러오시면 반영이 될 것입니다. 다른 문제가 아니라면요.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

청색공책은 프리랜서 프로그래머 겸 정보 제공자입니다. 어린 시절의 특별한 체험은 청색공책에게 큰 힘으로 남았습니다. 홀로서기를 하고 재능을 충분히 활용하기 위해 여러 블로그를 열어 여러 유형의 정보를 전해드리고 있습니다. 잘 부탁드립니다.