묻고답하기
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
편집시와 실제 표현페이지의 스타일 문제
2011.07.28 00:04
안녕하세요.
편집할때의 문서 스타일과
편집을 저장하고 나서의 실제 보여지는 문서의 스타일이 달라서 글올립니다.
원인이 무엇일까요?
편집시의 스타일
xe/modules/editor/styles/default/style.css
xe/modules/editor/styles/default/editor.css
xe/modules/editor/styles/xeStyle/style.css
본문 내용보기와 에디터에 관여하는 CSS파일들 입니다.(사용하시는 에디터에 따라 /editor/style/ 이후의 디렉토리명이나 파일명이 다를 수 있습니다.)
디렉토리명으로 이미 파악 되실텐데...
xe/modules/board/tpl/css/board.css <- 본문 내용보기에 전체적으로 관여합니다.
그렇다고 나머지 파일들이 꼭 에디트상태 일 때만 관여하는 것은 아니더군요.
본문 보기 상태이거나, 에디트 상태에서 현재 적용되고 있는 파일을 찾아 수정해 주어야 합니다.
기본적으로 관리자 모드의 게시판 -> 추가 설정에서 기본적인 폰트와 폰트 크기를 정해주시고 나서 위 CSS 파일을 조정해 줘 보세요.
익스플로러나 크롬의 개발자 도구 메뉴를 사용하시면 해당 소스의 스타일이 어느파일에 영향을 받는지를 알 수 있습니다.
다시 말해서 어느 CSS파일을 수정해야 하는지 알 수 있다는 거죠.
익스 : 도구 -> 개발자 도구
크롬 : 설정 -> 도구 -> 개발자 도구
개발자 도구를 보시면 좌우 두개의 창으로 구분되는데, 좌측의 소스를 클릭하면 우측에 적용된 스타일 내용을 볼 수 있습니다.
(익스의 경우 화살표 아이콘을 클릭한 후 원래 창의 내용으로 가서 선택할 수도 있습니다)
개발자 도구의 우측창의 제일 하단의 스타일이 최종 적용된(취소선이 그어 있지 않은 스타일) 스타일 입니다.
우측창의 스타일 소스의 근처를 보시면 파일명도 나와 있죠. 클릭하시면 CSS 파일의 경로와 파일명을 알 수 있습니다.
(크롬의 경우는 Resources 메뉴로 옮겨 가시면 나열되는 정보중 Style Sheet 항목으로 CSS 파일의 경로와 파일명을 알 수 있겠습니다.)
이 답글 제일 상단에 나열한 CSS파일 이외에도 최종적으로 선언 되어지지 않은 소스들은 더 상위의 CSS파일이 관여합니다.
개발자 도구를 이용하셔서 제일 나중에 적용되는 해당 CSS 파일을 찾아 원하는 스타일을 넣어 주어야 합니다.