css - first-child 가 안먹히는 문제 > 그누4 질문답변

그누4 질문답변

그누보드4 관련 질문은 QA 로 이전됩니다. QA 그누보드4 바로가기
기존 게시물은 열람만 가능합니다.

css - first-child 가 안먹히는 문제 정보

css - first-child 가 안먹히는 문제

본문

참고사항)
-----------------------------------------------------------------------------
01. 그누보드의 head.sub.php 에 아래처럼 문서타입을 지정 해둔 상태입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

02. 게시판환경설정은 'DHTML 사용'은 하지 않고 그냥 HTML만 사용가능하도록 설정됨

03. 그누버젼은 최신버젼 / 브라우저는 '익스8, 파폭'
-----------------------------------------------------------------------------------


...... 질문내용은 CSS의 가상클래스 :first-child 적용시의 문제와 관련한 내용입니다.


문서상단에 위처럼 DOCTYPE을 지정하고
아래의 코드를 만들어서 html로 출력해보면 td:first-child 태그가 정상적으로 실행되어서
첫번째 TD에 들어있는 문자들은 모두 '파란색'글꼴로 변경되어 정상 출력이 됩니다.


---- TEST.html 파일내용 -----------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<style type="text/css">
.mg_tbl {
font:normal 12px gulim,verdana; color:#333333;
border-collapse:collapse;
}
.mg_tbl td {
padding:5px;
border:1px solid #666666;
}

.mg_tbl td:first-child {        //---------- 이부분 적용관련 내용임
color:#0066cc;
}
</style>

 
<table class='mg_tbl' align="center" width="600">
<colgroup>
<col width="270" />
<col width="" />
</colgroup>

<tr><th>책제목</th><th>저자/출판사</th>
<tr>
<td>Ajax대응 JavaScript 실무프로그래밍</td><td>김은옥</td>
</tr>
<tr>
<td>거침없이 배우는 자바스크립트</td><td>데이비드 소이어 맥파랜드 저 김태곤 역</td>
</tr>
<tr>
<td>자바스크립트 기초부터 Ajax jQuery까지 마스터 북 </td><td>야 마다 요시히로 저 정인식 역</td>
</tr>
<tr>
<td>자바스크립트 완벽 가이드</td><td>데이비드 플래너건 저, 이동기, 이유원 외 1명 역 인사이트</td>
</tr>
<tr>
<td>모던 웹을 위한 JavaScript + jQuery 입문</td><td>윤인성 저 한빛미디어</td>
<tr>
<td>웹디자이너를 위한 jQuery</td><td>Nishihata Kazuma 저 박건태, 신대호</td>
</tr>
<tr>
<td>css 완벽가이드</td><td>에릭 마이어 저 연홍석, 남덕현</td>
</tr>
<tr>
<td>css 비밀매뉴얼</td><td>데이빗 소여 맥팔랜드 저, 김지원 역 한빛미디어 </td>
</tr>
<tr>
<td>PHP4 웹프로그래밍 가이드</td><td>이승혁 저 마이트프레스</td>
</tr>
<tr>
<td>PHP5 웹프로그래밍 가이드</td><td>이승혁 저 비비컴</td>
</tr>
</table>

---------------------- 여기까지 ------------------------------------------------



그런데,
기본게시판의 글쓰기에서 html 사용체크후, 
위 내용에서 DOCTYPE 부분을 제외한 코드 전체를 붙여넣으면
td:first-child 와 관련한 코드가 먹히질 않아서 모든 글꼴색상이 #333333 로 나타나 버립니다.


앞서 언급했듯이, head.sub.php 파일에 DOCTYPE을 선언한 상태인데도
일반 html 파일로 만들어서 테스트할때는 글색상이 '파란색'으로 보여지는데
게시판내에 글쓰기를 해서 본문을 확인해보면 적용이 되지를 않네요.

게시판은 기본형(basic)에서 테스트한거라 코드를 손댄것은 없는데....
왜 ....

.mg_tbl td:first-child { 
color:#0066cc;
}

위 코드가 '게시판 본문'에서는 먹히지 않는것일까요??

댓글 전체

독타입까지 설정된 상태에서 먹질 않는다면 다른 css가 적용된다고 볼 수밖에 없겠네요. #333 이 설정된곳을 찾아 보시면 될듯합니다.
말씀하신 부분은 가장 일반적으로 생각할수 있는 방법이죠.
view.skin.php 내용을 들여다 봐도 별도의 css 관련코드가 잡힌게 보이질 않고
전체 태그에서도 위 태그를 잡아먹을(?) 관련 설정값은 보이질 않네요.. -_- ;;
그러시다면 퍼스트차일드를 사용하지마시고 컬러 같은걸로 바꿔보시고 적용이 되시는지 확인 해보시면 되겠네용. 퍼스트 차일드만 적용이 안된다면 독타입에 문제가 있는거 겠죠?
다시 말씀드리지만, doctype은 문제가 없습니다. 
앞서 언급했듯이 test.html 파일로 표시된 해당부분만 떼어내서 테스트 해보시면 아실수 있을겁니다.

보다 확실한 테스트를 위해서 비어있는 호스팅계정에 현재 '그누보드 최신버젼'만 새로 설치후,
head.sub.php 에  위 언급한 DOCTYPE 만 추가하고
게시판에 질문의 내용을 추가해서 테스트해봐도 먹히지를 않는군요.

아무래도 gnuboard 원소스코드 자체의 어떤 부분에서 코드충돌이 일어나거나
제대로 :first-child 가상클래스를 처리해주지 못하는 문제가 있는거 같군요.
 
그렇다면 소스코드의 버그로 보이는데, 해당부분을 찾아내기가 힘들군요~
http://jamong2.dothome.co.kr/gnuboard/bbs/board.php?bo_table=test_01&wr_id=12&page=0&sca=&sfl=&stx=&sst=&sod=&spt=0&page=0

말씀하신 조건으로 하니깐 잘되네요. head.sup에 독타입 설정하고.

css에 위 css추가하고.

아참 다른 점 하나라면
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

1/DTD/xhtml1-transitional.dtd">  1앞에 띄어쓰기로 독타입을 바로잡았을 뿐이네요.

솔직히 답변 안달아 드릴려다 "욱"해서 답변드렸습니다.

저도 자주 범하는 실수인데 저는 맞게 썻는데 적용안되면 무조건 버그라고 생각해서 보이지 않는 부분이죠 세미콜론이나 스페이스나.

"다시 말씀드리지만, doctype은 문제가 없습니다.  "
지금보니 독타입과 상관없이 css가 씹히는 문제 같네요.
주소공개를 안하시니 더이상 도움이 되드리지는 못하겠고. 상단의 DTD선언 관련해서는 제가 ANSI에서 utf-8로 변환하는 과정에서 생긴 실수 같습니다.
DOCTYPE의 문구내에서 '1앞에 띄어쓰기' 를 한다???? !!!!! ...이건 아닌거 같은데요.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml 1/DTD/xhtml1-transitional.dtd">

앞서 언급했듯이, 선언된 DOCTYPE은 맞습니다.

원소스의 버그인듯하다고 언급한 부분은 좀더 확인을 해봐야 할거 같아서 정정하도록 하겠습니다.
아마도 코드의 충돌부분을 먼저 확인해봐야 할거 같군요.

관심댓글 달아준 부분에 대해서 감사하고요~ 욱~~~하지 마시고, 좋은 주말 보내시길~
글쓰는 동안 먼저 글을 다셨군요..네, CSS 씹히는 부분이 있는듯 합니다.
한번더 확인을 해봐야 할거 같군요....근데, 당체 찾아내기가 힘들군요.
어쨋던 감사~
에고................원인을 찾았네요..... -_- ;;

head.sub.php 상단에 선언되어있는....

<!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">

........ 위 부분을.... 주석처리된 부분을 제거하고 아래처럼 하니까 되는군요.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">


이전에 사용하던 DOCTYPE 을 삭제하지 않고 <!-- ..... -->  ...이렇게 주석해뒀는데
이부분을 삭제하니까.... 아래 코드가 먹히는군요.

.mg_tbl td:first-child { 
color:#0066cc;
}


주석(<! ~ ) 처리한 부분은 말그대로 주석처리를 했기에 문서에 영향을 주지 않는다고
생각하고 질문글에서도 뺐었는데.... -_- ;;  ....


■ ■ ■ ■ 그럼, 다시 생기는 의문점은........

어떻게 해서 주석처리된 부분이 인식이 되어서 CSS 코드에 영향을 주게 된건지가 궁금해지는군요.
<!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> -->


이 내용에 대해서 혹시, 도움글 주실수 있는분 계시면 댓글 부탁합니다 ㅠㅠㅠ
doctype은 항상문서 맨 윗줄에 들어가야 한다네요. 2번째줄은 안되고.
그래서 최초 작성하신것은 "무슨 타입인지는 모르나 html파일이다" 만인식 된 상태로 볼수있겠네요
<!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 경우는

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> -->
이렇게 하면 되겠네요.
전체 66,558 |RSS
그누4 질문답변 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT