블로그 스타일을 개선하고 있습니다!

Syntax Highlighter 를 주로 이용했었는데, 모바일에선 제대로 표시되지도 않고 페이지 로딩 속도도 느려지게 되서.. 이제는 <p>~</p> 태그에 스타일 적용해서 코드를 표시하게 되었습니다.

적용 방법은 매우 간단합니다. CSS나 HTML를 잘 못해도 잘 보시고 따라하시면 충분히 쉽게 적용하실 수 있으니 차근차근 보도록 하죠!

우선 관리자 페이지로 가셔서 꾸미기 메뉴의 HTML/CSS 편집 부분으로 가주세요!

HTML/CSS 편집 메뉴로 가시면 style.css 라는 편집 가능한 텍스트 영역이 있습니다.

이 부분에 나눔고딕코딩 폰트를 적용하기 위해 구글이 제공하는 css를 사용할거예요~!

나눔고딕코딩 폰트의 CSS 파일 주소는 아래와 같습니다.

http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css

이걸 CSS 문법으로 고쳐서, CSS 파일에서 포함할 수 있게 만들면 이런 코드가 나옵니다!

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css);

이걸 그대로.. 저 텍스트박스 안에 넣어주시면 됩니다!

그럼 이런 그림처럼 되겠죠?!

그 다음엔 이제 클래스를 만들 차례입니다.

/* Syntax Highlighter 를 대체할만한 최소한 기능이 구현된 코드 텍스트 박스 */
/* 폰트는 고정폭인 나눔고딕코딩을 사용함 */
/* 하지만, 매우 치명적인 단점이 있으니... 자동으로 문법을 확인하고 강조해주지는 않습니다. */
.codetext {

    /* 폰트 설정 */
    font : 12px "Nanum Gothic Coding";

    /* 폰트 색상 설정 */
    color : #000000;

    /* 테두리 굵기와 모양, 색상 설정 */
    border : 1px solid #ABABAB;

    /* 배경색 설정 */
    background : #FFFFFF;

    /* 글씨의 넓이가 짤릴 정도의 넓이를 넘어가면 자동으로 스크롤 바를 표시해준다 */
    overflow : auto;

    /* 글씨의 넓이가 짤릴 정도의 넓이를 넘어가면 자동으로 줄바꿈을 하지 않는다 */
    white-space: nowrap;

    /* 내부 여백은 5픽셀로 통일! */
    padding : 5px;
}

저는 이렇게 만들었는데, 저는 못하니깐.. 잘하시는 분들께선 더 효율적이고 더 멋지게 만드실 수 있을거라 생각합니다...(ㅠㅠ)

그리고, 이걸 어떻게 적용하느냐?

저는 불러오기 쉽게 '서식' 으로 만들어놓았습니다.

글쓰기 -> '글, 공지, 키워드, 서식' 중에서 '서식' 을 선택합니다.

그리고 HTML 편집으로 가신 후에 아래와 같이 코딩을 합니다.

분명 위의 style.css 의 codetext 에도 테두리 굵기와 모양, 색상 설정하는 부분이 있었는데 왜 여기서 또 적용을 하나요?

: style.css 에서 적용을 했다 하더라도, 편집 도중에는 경계면이 보이지 않습니다. 그래서 경계면을 보이게 하기 위해 style에 또 한번 테두리 굵기와 모양, 색상을 설정한 것입니다.

그리고, Enter Your Code Here 이 부분은 서식을 불러오면 초기에 설정되는 텍스트로써, 사용자분들께서 원하는 문구로 변경하시면 되겠습니다.

그 후에 서식을 저장하고 나서, 오른쪽 하단 메뉴에 보시면 작성중인 글 (?) | 서식 (?) 부분이 있습니다.

여기서 저장한 서식의 이름을 클릭하기만 하면...

Enter Your Code Here

이렇게 만들어놓은 서식 (p 태그를 이용한 코드 박스...?)이 나타나게 된답니다!

그리고, 코드에 색을 입히는 작업은 IDE에서 직접 가져오면.. 스타일이 유지된 채로 붙여넣기가 되더라구요.

그래서 IDE에서 코딩하구 코드를 글에 붙여넣기 하는 방식으로 작업을 하고 있습니다.

불편한 부분이 있지만, syntax highlighter 사용하면서 textarea .. 쓰는 것 보단 짧다고 느껴지네요 ㅋㅋㅋㅋ

긴 글 읽어주셔서 감사합니다 :)

좋은 하루 되세요!