제이쿼리 팁 특정 태그에 CSS 적용 jquery .each(), .text(), .addClass(), $(this), .css(), .replace() 크롬/IE color 해석 방식 차이

[제이쿼리 팁] 워드프레스 포스팅 글 내용 중 특정 태그에 CSS를 적용하라 크롬/IE color 해석 방식 차이. jquery .each(), .text(), .addClass(), $(this), .css(), .replace()

요즘 특허 사이트의 콘텐츠용 사이트를 의뢰받아서 워드프레스로 제작 중인데요.

워드프레스 적용 자체는 별 것 아닌 작업이지만, 우리의 까다로운 클라이언트님의 소소한 요청이 워드프레스나 워드프레스 테마의 PHP를 건드리지 않고, 원하는 모양을 만들어 달라는 고난도 요청이 좀 많다.

이 번 요청은 이미 클라이언트가 작성해 둔 글 내용에서 링크들을 특정 모양을 "디자인 스타일대로 CSS를 입혀라"라는 미션입니다.

단! 제한 조건은 클라이언트는 html이나 css에 대해 전혀 모르고 임의로 작성해 놓은 콘텐츠들에서 특정 링크들을 식별해서 변경하는 작업입니다.

위의 빨간색 박스 안의 {캡처 화면: A372}처럼 되어 있는 영역들을 아래와 같이 변경하는 미션입니다.

헌데 이 부분의 태그에 어떤 인식자도 없고, 구분자도 없어요.

즉, 링크든 링크를 둘러싼 요소에 건 ID나 CLASS가 부여되어 있지 않고 오직 워드프레스 에디터에서 글을 작성할 때 색만 입혀 놓은 상태입니다.

소스는 다음과 같습니다.

낯선 공간님이 식별자 1개를 득템 하였습니다.

다행히 저 부분의 차이점은 span태그가 사용되었고, 인라인 스타일이 적용되어 있다는 점입니다.

이 부분에 착안해서 다음과 같은 조건을 걸기에는 문제가 있습니다.

span 태그 중에 attr가 style이고 그 값이 color:#3366 ff 이면 

이라는 조건을 걸기에는 브라우저마다 코드의 해석 방식이 다르기 때문에 되지 않습니다.

보다시피 크롬에서는 color의 값을 헥스로 받아들이지만, IE11에서는 유독 특이하게 rgb로 풀어버립니다.

따라서 다음과 같은 코드를 작성하면 크롬에서는 동작하지만, IE11에서는 되지 않습니다.

게다가 IE10에서는 칼라 값을 헥스로 해석하는 것은 크롬과 같지만 맨 마지막에 착실히 세미콜론(;)을 붙여주는 게 다릅니다.

일단은 이 부분을 무시하고 크롬 기준으로 한 번 제이쿼리를 작성해겠습니다.

<script>
jQuery(document).ready(function(e) {
//CaptureCaption
	jQuery('.pf-content span').each(function(index, element) { 
		if(jQuery(this).attr('style') == "color: #3366ff") {
			jQuery(this).addClass('thisCap');
		}
	});
});
</script>

위의 제이쿼리 코드를 설명하자면, pf-content 클래스는 워드프레스에서 사용하고 있는 테마에서 콘텐츠를 둘러싼 영역의 클래스입니다.

이 영역 내의 span 태그들을 모두 조사하라.

만약 조건에 맞는 span 요소의 스타일 속성이 "color: #3366ff" 라면 해당 span요소에 thisCap이라는 클래스명을 부여하라.

입니다.

동작시켜보면 잘 동작합니다.

Tip. 워드프레스에서는 제이쿼리의 인식자인 $대신에 jQuery를 씁니다.

해당 태그에 thisCap이라는 클래스를 부여했습니다.

나머지는 소소한 작업입니다.

인라인 스타일로 적용된 컬러를 디자인에서 요구하는 컬러 값인 979797로 변경하고, 텍스트중의 { 와 }를 제거해 주면 됩니다.

<script>
jQuery(document).ready(function(e) {
//CaptureCaption
	jQuery('.pf-content span').each(function(index, element) { 
		if(jQuery(this).attr('style') == "color: #3366ff") {
			jQuery(this).addClass('thisCap');
			jQuery(this).css('color','#979797');
			jQuery(this).text(jQuery(this).text().replace('{',''));
			jQuery(this).text(jQuery(this).text().replace('}',''));
		}
	});
});
</script>

그렇게 하면 위와 같은 코드로 작성되는데요.

앞서도 지적했지만, 문제는 컬러의 코드를 해석하는 방식의 차이인데요.

이를 해결하려면 OR연산을 시켜주어도 됩니다.

if(jQuery(this).attr('style') == "color: #3366ff" || jQuery(this).attr('style') =="color: rgb(51, 102, 255);") {

이렇게 말이죠.

혹은 조건을 바꿔 보겠습니다.

다시 생각해보면, 굳이 span의 속성에 집중할 필요는 없습니다.

저 형식의 요소에서 텍스트중에 {로 시작하고 }로 끝나는 것도 조건이 될 수 있습니다.

if(jQuery(this).text().indexOf('{')==0) {

조건을 위와 같이 바꿔 주어도 같은 효과가 나오게 됩니다.

{로 시작하는 span요소가 다른 형식이 더 없다는 가정하에 말이죠.

좀 더 확실히 하려면 이들을 AND와 OR연산으로 묶어 주면 됩니다.

해서 최종본은  아래와 같이 됩니다.

<script>
jQuery(document).ready(function(e) {
//CaptureCaption
	jQuery('.pf-content span').each(function(index, element) { 
  if((jQuery(this).text().indexOf('{')==0) && (jQuery(this).attr('style') == "color: #3366ff" || jQuery(this).attr('style') =="color: rgb(51, 102, 255);")) {
			jQuery(this).addClass('thisCap');
			jQuery(this).css('color','#979797');
			jQuery(this).text(jQuery(this).text().replace('{',''));
			jQuery(this).text(jQuery(this).text().replace('}',''));
		}
	});
});
</script>

thisCap 클래스의 CSS는 다음과 같습니다.

.thisCap { display:inline-block; background:#f2f2f2 url(/wp/images/bg/bg_caption.png) 15px 10px no-repeat; padding:8px 15px 8px 40px; border-radius:2px; }

Demo Page : https://about.patentpia.com/wp/kr/a372/

요점정리:

워드프레스의 제이쿼리는 $대신에 jQuery를 사용한다.

크롬과 IE는 color 속성의 해석 값이 다르다.

뭔가 하나만 달라도 특정지어서 변경이 가능하다.