<!--레이아웃/게시판 상단 스크립트-->
<link rel="stylesheet" href="/document_styling/style.css" type="text/css" charset="UTF-8" media="all" />
<script type="text/javascript" src="/document_styling/js/cufon-yui.js"></script>
<script type="text/javascript" src="/document_styling/js/RixHead_M_400.font.js"></script>
<script type="text/javascript" src="/document_styling/js/Yoon_Bomnal_L_400.font.js"></script>
<script type="text/javascript">
Cufon.set('fontFamily', 'Yoon Bomnal L').replace('.kr_bomnal');
Cufon.set('fontFamily', 'RixHead M').replace('h1');
Cufon.set('fontFamily', 'RixHead M').replace('h3');
Cufon.set('fontFamily', 'RixHead M').replace('h4');
Cufon.set('fontFamily', 'RixHead M').replace('h5');
</script>
<script type="text/javascript">
(function($) {
jQuery(function($){
$('.expand .show').click(function(){
var obj = $(this).parents('.expand');
if ($(obj).hasClass('expanded')) {
$(obj).removeClass('expanded');
$('.content',obj).slideUp('fast');
$(this).text('Show example');
} else {
$(obj).addClass('expanded');
$('.content',obj).slideDown('fast');
$(this).text('Hide example');
}
return false;
});
});
}) (jQuery);
</script>
News Today
Top
Bottom
HTML5와 CSS3 전용 튜터리얼 사이트가 베타 오픈하였습니다.
Line
PXE Clio는 스킨의 저작권 정보를 삭제하고 사용할 수 있는 XE용 오픈소스 레이아웃입니다.
Line
제 2회 XE 공모전에 출품한 PXE Clio의 개발 인터뷰 내용을 볼 수 있습니다.
익스프레스엔진
게시물을 아름답게 치장하여 써봅시다!
정현화- 조회 수 3833
- 댓글 수 39
- 추천 수 1
이 자료를 이용하면 현재 유저포럼이나 매뉴얼등에서 제가 사용하는 대제목, 중제목, 소제목 및 클릭 시 나타나는 코드뷰어, 그리고 링크, 경로, 빨간 펜 밑줄 쫙과 같은 아이콘을 비롯해 각종 글 상자를 사용할 수 있습니다. 본래 이것은 에디터에 확장 컴포넌트 형식으로 들어가야 편리한 것이 맞지만, 그렇게하려면 용도에 맞는 컴포넌트를 너무 여러개 만들어야 하기 때문에 배보다 배꼽이 더 커져서 저는 현재 일일이 수동으로 게시물을 작성하고 있습니다.
이런 수작업은 WordPress나 기타 CMS에서도 페이지등을 꾸밀 때 핸드 코딩을 하므로 조금만 태그 사용에 익숙해지면 쉽게 이용하실 수 있습니다. 현재 XE에서 이런 HTML 페이지 입력 화면의 UI를 보기 좋게 개선하겠다는 내용이 있는데, 이 역시 현재 에디터의 HTML 입력기가 다소 사용하기 불편한 점에 근거한 바가 아닌가 생각합니다.
지금부터 절차가 다소 복잡할 수 있으나, 한번 해놓으면 다음부터는 만질일이 거의 없으니 한번 시도해 보세요!
설치하기
특별히 설치라고 할것도 없습니다. V.I.P 서비스 메뉴에서 아름다운 글 쓰기 툴을 다운로드 받아 여러분의 XE가 설치 된 디렉토리에 넣습니다. (이 자료는 PXE 사이트에서 한번이라도 구매 내역이 있는 정회원 이상만 다운로드 가능합니다)
압축을 푼 후 나타난 document_styling 디렉토리를 넣으면 되는 것입니다. 이렇게만 해놓고 HTML 작성시에 불러다 써도 되지만 좀 더 이쁜 기능들을 사용하기 위해 마저 셋팅을 해봅시다.
TTF 폰트 사용하기
웹에서 여러분의 컴퓨터에 설치 된 시스템 폰트를 사용하여 딱딱한 기존 폰트 대신, Clean Type의 서체를 사용할 수 있게 해줍니다. PXE Board Pro 3에서 깔끔한 서체 기능을 활성화하게 되면 제목 등의 서체가 미려하게 나타나는 기능과 동일한 부분입니다.
1. 다음 웹사이트를 방문합니다. http://cufon.shoqolate.com/generate/
2. 아래 그림에서 파란 색 부분을 클릭하여, 서체를 첨부합니다. 서체는 XE가 설치된 폴더/document_styling/fonts 디렉토리에 있는 2개의 폰트입니다. 이 2개의 폰트 중 1개를 첨부합니다. 혹은 여러분의 컴퓨터에 있는 폰트를 사용해도 되지만 일단은 이 폰트들로 해봅니다.
3. 아래 그림에서 체크한 두 부분에 동일하게 체크해줍니다. 그리고 한글의 경우는 반드시 All에 체크를 해야합니다.
4. 이 서체 파일에 접근 보안을 설정할 수 있습니다. 서체 파일은 용량이 크기 때문에 외부에서 이 파일을 링크해서 사용하게 되면 엄청난 트래픽 유실이 발생합니다. 아름다운 글 쓰기 툴을 사용 할 도메인명을 아래와 같이 기재하면 해당 도메인에서만 파일 접근이 가능해집니다.
5. 이용 동의에 체크하고 Let's Do This! 버튼을 클릭합니다.
6. 이제 약간의 시간이 소요되면서 첨부한 폰트를 컴파일합니다. 컴파일이 완료되면 다운로드 창이 뜹니다. 해당 파일을 document_styling 폴더의 js 폴더 안에 넣어줍니다. 파일명은 절대 변경하지 말고 그대로 두세요.
7. 이제 이 과정을 한번 더 해서 fonts 폴더의 나머지 1개의 폰트도 컴파일하여 동일한 장소에 넣어줍니다.
8. 이제 document_styling 폴더속의 fonts 폴더는 빼서 다른 곳에 저장합니다. 이 파일까지 웹 서버에 올릴 필요는 없기 때문입니다. fonts 폴더속의 폰트는 모두 컴파일 되서 js 폴더에 별도로 저장되었으니 필요 없습니다.
9. document_styling 폴더를 웹 서버에 업로드 합니다. 만일 여러분들이 위 과정중에서 4번 단계, 즉 보안 도메인명을 넣었다면 여러분 컴퓨터에서는 이 서체를 사용할 수 없습니다. 이 서체들은 해당 도메인 하에서만 작동합니다.
게시판 설정
에디터 설정하기
이 글 쓰기 툴은 에디터에 상관없이 작동하지만, 그래도 최적화 된 에디터 셋팅에 대해 알려드립니다.
1. 이 툴을 사용할 게시판 설정에서 추가 설정 부분을 아래와 동일하게 맞춰줍니다. 그러면 글 쓰기 화면에서 각 요소를 회색 테두리선으로 표시해주기 때문에 작성이 용이합니다.
이제 글을 써 봅시다
글쓰기 화면에서 엔터 키를 여러번 쳐봅시다. 그럼 아래와 같이 P 단란이 나뉘어 나타나는게 보입니다.
각 영역에 텍스트를 쓰고, 아래 그림과 같이 형식에서 제목1 부터 제목 5까지중에 선택해 주면 시스템 폰트가 적용된 제목 스타일을 사용할 수 있습니다.
등록 버튼을 눌러 글 쓰기를 완료하면 아래처럼 출력됩니다.
2. 에디터 우측에 있는 HTML 버튼을 눌러 HTML 편집 모드로 변환시키고 코드를 붙입니다.
3. 코드를 붙였으면 다시 HTML 버튼을 눌러 위지윅 에디터 모드로 돌아옵니다. 그리고 아래 파란 색으로 표시 한 곳들을 고쳐봅니다.
등록 버튼을 누르면 아래 처럼 깔끔하게 코드뷰어가 나옵니다.
마치며
긴 시간동안 보시느라 고생 많으셨습니다^^. 어떤 때는 위젯이나 컴포넌트 보다는 예전 핸드 코딩 방식이 오히려 편할 때가 있습니다. 지금처럼 준비하는데 고생한 것을 빼면 이제부터는 굳이 게시판이 아니라 내부 페이지나 외부 페이지에서도 이 글 쓰기 툴을 사용할 수 있거든요.
문서스타일링.html에 제가 예제 코드들을 넣어 놓았으니, 하나씩 해보면서 어떤 기능을 하는지 한번 해보세요. 해당 문서 맨 마지막에 있는 자바스크립트 코드는 실행시키지 마셔요. 그건 이미 게시판 상단 내용에 넣은 스크립트를 백업용으로 적어 놓은 겁니다.
여러분의 게시물이 좀 더 아름답게 인터넷을 정화시키기를 기원합니다~
매번 궁금했는데 공개해주시는군요^^ 감사합니다!
한결 게시물을 깔끔하게 정리할 수 있겠네요 ㅎㅎㅎ
오~ 감사합니다. 글을 쓸때에 기냥 CSS 를 정의해야 하는 건지 고민 많이 했었는데, 정말 깔끔하게 해결 해 주셨네요 ㅎㅎㅎ
이게 뭔가.... 하고 블로그 가보니 멋진 애드온이로군요. 기대가 큽니다!
어허 이건 에드온이나 위젯이 아닙니다. 태림씨야님 말씀대로 HTML과 CSS를 정의해놓고 불러서 사용하는 핸드코딩 방식입니다. 위젯이나 애드온으로 안만든 이유는, 스타일링을 수시로 이쁜것으로 바꾸는 일이 잦은데, 위젯이나 애드온처럼 애플리케이션으로 만들면 그때그때 수정하기가 불편해서입니다.
게다가 에디터들도 종류가 여러가지고 호환성 맞추는 것도 힘들기 때문에 어떤 에디터에서나 대부분 통용 될 수 있도록 하기 위한 방법이기도 하고요.
뭐 가장 큰 이유는 제가 하드코딩이 몸에 베어서 그렇긴 하지만요 ㅎ. 에디터에 확장 컴포넌트 형식으로 제공하는 것이 아니라 무조건 손으로 직접 쳐 넣는 것이니 무리한 기대는 하지 마세요~^^
거의가 class로 정의가 되어 있는데, 이걸 하나씩 설정해서 연습해 보자니 ㅡ.ㅡ;; 시간이 걸리네요, 예제로 한 페이지 만드셔야 할 꺼 같은 느낌이... *^^*
아 이렇게 해서 매번 설정하셨던 거군요 ~
자료들 항상 잘 받아서 유용하게 사용하고 배우고 있습니다.
또 연구를 좀 해봐야겠군요~~
블로그 글을 안썼으니 힘들죠 ㅎ. 다 적은거 보면 쉽습니다. 이 방식이 Wordpress에서 페이지 수정할 때 쓰는 방식과 똑같으므로 그리 생소하진 않을겁니다.
오늘 저녁쯤엔 작성을 할 것 같아요.
와우 감사합니다... 제가 딱~~ 찾고 있던 것입니다.
안그래도.. 여기 웹사이트에서 코드 슬적봐서... 적용하고 있었는데요 이렇게 몽땅 공개해주시니... 무한 감사합니다.
아니 뭐 어째 물어보는 사람이 없길래 걍 필요없는 줄 알고 저 혼자 썼죠 ㅋㅋ 아놔 필요한 거 있으시면 걍 말씀들 하세요. 마치 김주년님 처럼 대놓고... ㅋㅋ
요놈은 어떻게 쓰는 놈일려나... 또 머리에 쥐나는건 아닌지..ㅠㅠ
배포 감사합니다~
후후, 전 현화님이 핸드코딩으로 스타일 양식을 만들어 쓰시는걸 보고 진작에 따라했었죠.^^;
현화님의 pxe board 게시판의 css폴더에 저만의 css 파일을 만들어둔후,
새로운 클래스들을 만들어둔뒤에 [대제목],[부제목],[설명글] 식으로 code 를 만들어뒀습니다.
잘 쓰겠습니다^^
포털용 레이아웃은 언제 나오나요, 나오면 구매할려고 기다리고 있는데...^^
우와!!!!!!!!!! 정말 감사해요! 이런 행운이! 제가 PXE정회원이란게 감사할 따름 ㅎㅎ
현재 사용되고 있는 좋은 필기도구인가요? 감사합니다..ㅎ;
아~~ 대놓고 얘기하면 되는거였구나 ;; ㅋㅋㅋㅋ
정말 고생하셨습니다 ㅋㅋㅋㅋ 한번에 날림으로 맘 고생이...;;; 너무 보기 좋네요 ㅎㅎㅎㅎ
바로 적용 ㄱㄱ~~
아.. 미챠.. 적용했는데.. 상태창에 오류가 뜹니다..ㅠㅠ
위에꺼 그대로 따라했는데 뭐가 문제일까요;;;
임페리얼 레이아웃에서 게시판 설정의 상단 내용칸에
<!--레이아웃/게시판 상단 스크립트--> 를 넣으면
레이아웃의 4단 메뉴에서 마우스 커서를 댈 때 밑줄이 생깁니다.
밑줄을 없애려면 어떻게 해야 할까요?
일단 css 에서 10번째 줄의 텍스트 데코레이션에서 underline 속성을 삭제했는데, 큰 문제는 없는지, 다른 부작용은 안생길런지 궁금합니다.
그정도로 부작용은 없습니다. 헌데 레이아웃에 스크립트를 넣으실때는 "헤더 스크립트" 부분에 넣으시는 것이 좋습니다.
너무나 유용하고 좋은 팁입니다. 보다 미려한 글쓰기가 가능해 질 것으로 생각됩니다.
<질문>위 설명 Style.css에서.."위 코드에서 빨간 색 부분을 잘라내어 노란 색 위치에 붙여줍니다"란 말이 이해가 안됍니다.ㅜㅜ. 어케 하시라는 뜻인지요?.ㅠㅠ.
내눈엔 /(red)가...한개만 보이는데요..맨 아래에 /(yellow)가 있고..
다른 분들은 다 잘하시는데..유독 나만 못하고...ㅠㅠ..다른분들은 모두 고수시구나~~.ㅎㅎ
.....
이쁜 글쓰기에는 엄청 좋을텐데요~. 감사합니다.
빨간색으로 되 있는 */ 요놈을 지우시고.. 맨 아래 노란색 부분에 */ 요놈을 넣어서 주석문으로 만들라는 말입니다. 그렇게 되면 그 코드가 페이지에서 안 먹게 되거든요.
해당 파일을 열어보면.. 원래 맨 아래 부분에 */ 요놈이 없으니 추가하라는 말입니다..^^
적용하니... 해당 게시판이 엄청 느려지는데~
원래 그런건가요? 저만 그런건가요?;;
IE6에서는 JS 로딩에 문제가 있어 거의 사용 못할 지경일수도 있습니다. 특히 폰트 JS들을 접근이 느린 도메인에 연결을 해놨으면 더더욱 그렇고요.
와~~~~ 이거 정말 대단한데요???? 나중에 시간되면 설치해서 공부해야겠습니다..^^ 감사합니다.
레이아웃/게시판 헤더에 넣는 스크립트를 보면, 아래 라인이 빠진 것 같습니다.
Cufon.set('fontFamily', 'RixHead M').replace('h2');
그리고 외부페이지에서 h1~h5 가 적용되지 않는것 같습니다.
네 해결 방법을 내일 중으로 올려 놓을께요^^; CSS를 조금 복사해서 붙이고 몇개만 지워주면 됩니다.
또 몇일 고생해봐야겠지만 저는 페이지오류가 있어서 안되네요.
매뉴얼에 있는대로 따라 하니 게시물에는 스타일이 잘 적용되는데, 페이지와 외부 페이지에는 적용이 되지 않네요.....게시판 상단에 옮겨 적는 코드를 레이아웃 상단 부분에 넣었더니 컨텐츠 박스 같은 부분은 적용이 되는데 <h> 부분의 제목들은 적용되지 않습니다. 해결 방법이 없을까요?? 답변 주시면 감사 드리겠습니다.
감사합니다^^~
안녕하세요.
항상 많이 배우고 있습니다.
해외에서는 cufon 사용이 많지만 대부분의 유명한 타이포그라피 회사들이 Cufon 적용을 금지하고 있어서 라이센싱 방법에 대한 토론이 많습니다. SIFR 의 경우 플래시로 대체하는 방식이라 허용하는 곳들이 많습니다. Cufon generator 의 라이센스 agreement 부분에 "without flash" 라는 문구가 있는 이유도 SIFR 방식과는 전혀 다른 방식이기 때문입니다.
반면에 font-face 라이센스는 대부분 허용되고 점점 확장되어 나가고 있는 추세입니다. Typekit (http://www.typekit.com) 과 같은 방식으로 필요할 때 쉽게 embed 할 수 있는 서비스를 제공하는 업체가 여러군데 있고요 (현화님 정도의 실력이면 이미 훤히 알고 계실 것 같네요). Gotham 등의 폰트도 곧 font-face 라이센스를 따로 만든다고 하더라고요.
저도 cufon을 자주 사용하다 보니 한글로도 적용할 수 있다면 편하겠다는 생각을 했었는데, 저작권에 위배되는 건 아닌지 몰라서 피하고 있습니다. 혹시 윤디자인이나 릭스는 cufon 허용에 관한 얘기가 있었나요?
눈팅만 하다가 지금에서야 가입하고 댓글남깁니다.
감사해요. 잘써먹겠습니다 ㅋ
너무 좋을것 같아요.. 아직 해보지는 안았지만..너무 감사드립니다.
PXE공식레이아웃에서 게시판 상단에 붙여넣기 하고 사용은 가능한데....
레이아웃 해더에 붙여넣기 하면 페이지에서 페이지 수정창에서는 적용이 되다가 등록버튼을 누르면 스타일 적용이 되지 않네요..
어떻게 해결해야 할까요..
레이아웃 해더에 붙여넣기 하면 페이지에서 페이지 수정창에서는 적용이 되다가 등록버튼을 누르면 스타일 적용이 되지 않네요..
어떻게 해결해야 할까요..
좋은 자료 늘 고맙습니다. 순서대로 해보니 잘 되네요.
정말이뻐횻~순서대로 착착착 메뉴얼이 너무 쉽게 잘 설명되어있네요. pxe3.0 에서 테스트하니 익스9에서도 잘 나오네요. 극뽀옥~
계속보기만 하다 오늘 적용해 보았습니다.
그런데 "코드보기"에서 전 왜 배경색이 나타나지 않을 까요?
show (hide) sample
경로
코드보기 - 이곳에서 배경색 없이 그냥 글쓰기만 적용됩니다.
주석
방법좀 알려주세요
그런데 "코드보기"에서 전 왜 배경색이 나타나지 않을 까요?
show (hide) sample
경로
코드보기 - 이곳에서 배경색 없이 그냥 글쓰기만 적용됩니다.
주석
방법좀 알려주세요
위에서 사용한 손글씨체를 쓰려면?
<span class="kr_bomnal">여러분의 게시물이 좀 더 아름답게 인터넷을 정화시키기를 기원합니다~</span>