ccz-cross 스킨 서식 스타일

ccz-cross 스킨의 서식 스타일입니다. 보관용으로 그대로 옮겨놨습니다.

출처 : http://ccz-cross.tistory.com/6

글을 작성할때 본문에 삽입할 수 있는 각종 스타일에 대한 소개이다.

헤딩

헤딩(제목) 태그들을 이용하여 글을 표현한다.

<h3> 태그를 사용하여 표현한다.

<h4> 태그를 사용하여 표현한다.

<h5> 태그를 사용하여 표현한다.

<h3>태그를 사용하여 표현한다.</h3>
<h4>태그를 사용하여 표현한다.</h4>
<h5>태그를 사용하여 표현한다.</h5>

키보드

<kbd> 태그를 사용하여 F12 와 같이 키보드 자판을 표현하는 용도로 사용한다.

<kbd>F12</kbd>

코드

<code> 태그를 사용하여 .body 와 같이 코드를 표현하는 용도로 사용한다.

<code>.body</code>

마커

<mark> 태그를 사용하여 시각적인효과 와 같이 시각적인 특징을 표현하는 용도로 사용한다.

<mark>시각적인효과</mark>

인용구

<blockquote> 태그 및 에디터의 인용구를 사용하여 인용구를 표현하는 용도로 사용한다.

세상은 코드와 암호로 이루어져 있지.

셜록홈즈중에서

<blockquote>
    세상은 코드와 암호로 이루어져 있지.
    <footer>셜록홈즈중에서</footer>
</blockquote>

리스트

<ul> 과 <ol> 태그를 이용하여 목록을 나열한다.

순서없는 목록

• HTML
• CSS
• Javascript
  • jQuery
    • jQuery 1.9.x
    • jQuery 2.x
  • REACT

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript
        <ul>
            <li>jQuery
                <ul>
                    <li>jQuery 1.9.x</li>
                    <li>jQuery 2.x</li>
                </ul>
            </li>
            <li>REACT</li>
        </ul>
    </li>
</ul>

순서형 목록

1. HTML
2. CSS
3. Javascript
   1. jQuery
      1. jQuery 1.9.x
      2. jQuery 2.x
   2. REACT

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript
        <ol>
            <li>jQuery
                <ol>
                    <li>jQuery 1.9.x</li>
                    <li>jQuery 2.x</li>
                </ol>
            </li>
            <li>REACT</li>
        </ol>
    </li>
</ol>

경보

<div> 태그에 .alert 과 .alert-상태 를 이용하여 경보를 표현한다. <h4> 와 <p> 태그를 포함할 수 있으며, 아래에서 각각의 상태에 해당하는 클래스명에 따른 디자인을 소개한다.

alert-modern

훈민정음 창제와 관련한...

나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져 홇베이셔도

마참네 제 뜨들 시러펴디 몯핧 노미하니아 내 이랄 윙하야 어엿비너겨 새로 스믈 여듫 짜랄 맹가노니 사람마다 해여 수비니겨 날로 쑤메 뻔한킈 하고져 할따라미니라.

<div class="alert alert-modern">
    <h4>훈민정음 창제와 관련한...</h4>
    <p>나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져 홇베이셔도</p>
    <p>마참네 제 뜨들 시러펴디 몯핧 노미하니아 내 이랄 윙하야 어엿비너겨 새로 스믈 여듫 짜랄 맹가노니 사람마다 해여 수비니겨 날로 쑤메 뻔한킈 하고져 할따라미니라.</p>
</div>

alert-info

나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져 홇베이셔도 마참네 제 뜨들 시러펴디 몯핧 노미하니아 내 이랄 윙하야 어엿비너겨 새로 스믈 여듫 짜랄 맹가노니 사람마다 해여 수비니겨 날로 쑤메 뻔한킈 하고져 할따라미니라.

<div class="alert alert-info">
    나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져 홇베이셔도 마참네 제 뜨들 시러펴디 몯핧 노미하니아 내 이랄 윙하야 어엿비너겨 새로 스믈 여듫 짜랄 맹가노니 사람마다 해여 수비니겨 날로 쑤메 뻔한킈 하고져 할따라미니라.
</div>

alert-warning

나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져 홇베이셔도 마참네 제 뜨들 시러펴디 몯핧 노미하니아 내 이랄 윙하야 어엿비너겨 새로 스믈 여듫 짜랄 맹가노니 사람마다 해여 수비니겨 날로 쑤메 뻔한킈 하고져 할따라미니라.

<div class="alert alert-warning">
    나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져 홇베이셔도 마참네 제 뜨들 시러펴디 몯핧 노미하니아 내 이랄 윙하야 어엿비너겨 새로 스믈 여듫 짜랄 맹가노니 사람마다 해여 수비니겨 날로 쑤메 뻔한킈 하고져 할따라미니라.
</div>

alert-danger

나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져 홇베이셔도 마참네 제 뜨들 시러펴디 몯핧 노미하니아 내 이랄 윙하야 어엿비너겨 새로 스믈 여듫 짜랄 맹가노니 사람마다 해여 수비니겨 날로 쑤메 뻔한킈 하고져 할따라미니라.

<div class="alert alert-danger">
    나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져 홇베이셔도 마참네 제 뜨들 시러펴디 몯핧 노미하니아 내 이랄 윙하야 어엿비너겨 새로 스믈 여듫 짜랄 맹가노니 사람마다 해여 수비니겨 날로 쑤메 뻔한킈 하고져 할따라미니라.
</div>

alert-success

나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져 홇베이셔도 마참네 제 뜨들 시러펴디 몯핧 노미하니아 내 이랄 윙하야 어엿비너겨 새로 스믈 여듫 짜랄 맹가노니 사람마다 해여 수비니겨 날로 쑤메 뻔한킈 하고져 할따라미니라.

<div class="alert alert-success">
    나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져 홇베이셔도 마참네 제 뜨들 시러펴디 몯핧 노미하니아 내 이랄 윙하야 어엿비너겨 새로 스믈 여듫 짜랄 맹가노니 사람마다 해여 수비니겨 날로 쑤메 뻔한킈 하고져 할따라미니라.
</div>

더보기

훈민정음 해례본 더보기

나랏말씀이 중국과 달라

문자끼리 서로 맞지 아니할쎄.

이런 전차로 어린(어리석은) 백성이 이르고자 할 바가 있어도

마침내 제 뜻을 실히 펴지 못하는 사람이 하니라(많으니라).

내 이를 위하여 어엿비 여겨 새로 스물 여덟 자를 만드노니

모든 사람으로 하여금 쉽게 익혀 날로 씀에 편안케 하고자 할 따름이니라.

나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져 홇베이셔도 마참네 제 뜨들 시러펴디 몯핧 노미하니아 내 이랄 윙하야 어엿비너겨 새로 스믈 여듫 짜랄 맹가노니 사람마다 해여 수비니겨 날로 쑤메 뻔한킈 하고져 할따라미니라. 

경보와 더보기 유의사항

경보와 더보기는 스타일링에 display: table-cell 이 적용되어 있다. 이는 경보나 더보기 뒤에 연속적으로 더보기 및 경보 - 그 밖의 모든 table-cell 값이 적용된 요소가 뒤따른다면 <table> 의 <td> 와 같은 셀요소처럼 작동한다는 것을 의미한다.

원치 않는 디자인이 될테니 이를 방지하기 위해 <p></p> 나 <br /> 같은 공백을 연속적인 경보 및 더보기 사이에 추가하도록 하자.

링크 스타일

링크를 삽입하는 일반적인 경우와 에디터의 링크기능을 이용했을때의 링크 스타일을 분리했다.

기본 링크

《훈민정음》(훈민정음, 訓民正音)은 조선 초기 세종대왕이 지은 책의 제목, 그리고 그 책에서 해설하고 있는 뒷날 한글로 불리게 된 한국어의 표기 문자 체계를 말한다.

<a href="링크주소">링크</a>

에디터 링크

《훈민정음》(훈민정음, 訓民正音)은 조선 초기 세종대왕이 지은 책의 제목, 그리고 그 책에서 해설하고 있는 뒷날 한글로 불리게 된 한국어의 표기 문자 체계를 말한다.

<a href="링크주소" class="tx-link">링크</a>

링크 박스

.link-box 형 디자인

HOME

CCZ-CROSS

REPO

준비중

DEMO

CCZ-CROSS 데모보기

<dl class="link-box">
    <div class="link-row">
        <dt>HOME</dt>
        <dd><a href="http://ccz-cross.tistory.com" target="_blank">CCZ-CROSS</a></dd>
    </div>
    <div class="link-row">
        <dt>REPO</dt>
        <dd><a href="#" target="_blank">준비중</a></dd>
    </div>
    <div class="link-row">
        <dt>DEMO</dt>
        <dd><a href="http://ccz-cross.tistory.com" target="_blank">CCZ-CROSS 데모보기</a></dd>
    </div>
</dl>

참고문헌 및 관련링크

.link-refer 형 디자인

참고문헌 및 관련링크.

1. 참고문헌 링크
2. 참고문헌 링크
3. 참고문헌 링크

<div class="link-refer">
    <h3>참고문헌 및 관련링크.</h3>
    <ol>
        <li><a href="#">참고문헌 링크</a></li>
        <li><a href="#">참고문헌 링크</a></li>
        <li><a href="#">참고문헌 링크</a></li>
    </ol>
</div>

파일첨부

티스토리에는 기본적으로 첨부파일의 파일 형식에 대한 각각의 이미지가 지정되어 있다. 이 디자인을 하나로 통일하고 버튼형으로 디자인이 가능하다.

건축학개론.txt

각주

한글은 1443년(세종25년) 훈민정음^[각주:1] 28자를 연구·창제하고 3년 동안 다듬고 실제로 써본 후, 1446년 음력 9월에 이를 반포하면서 조선 세종은 『훈민정음 해례본(訓民正音 解例本)』을 통하여 문자와 천지인을 바탕으로 하는 음양오행의 관계를 설명하였다.

한글은 1443년(세종25년) 훈민정음 28자를 연구·창제하고 3년 동안 다듬고 실제로 써본 후, 1446년 음력 9월에 이를 반포^[각주:2]하면서 조선 세종은 『훈민정음 해례본(訓民正音 解例本)』을 통하여 문자와 천지인을 바탕으로 하는 음양오행의 관계를 설명하였다.

테이블

스킨에 적용된 테이블 서식은 부트스트랩 테이블 을 차용하였다. 아래에서 그 중에 몇몇 스타일에 대하여 언급한다.

기본 테이블

<table> 에 .table 클래스를 추가하여 테이블 서식의 기본을 설정한다.

제목셀	제목셀	제목셀
나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져	나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져	나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져

<table class="table">
  ...
</table>

.table-bordered

<table> 태그에 .table 과 더불어 .table-bordered 를 이용하여 테이블의 테두리를 생성한다.

제목셀	제목셀	제목셀
나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져	나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져	나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져

<table class="table table-bordered">
    .....
</table>

.table-striped

<table> 태그에 .table 과 더불어 .table-striped 를 이용하여 테이블의 행을 줄무늬 배경색으로 대체한다.

제목셀	제목셀	제목셀
나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져	나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져	나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져
나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져	나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져	나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져
나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져	나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져	나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져

<table class="table table-striped">
    ..... 
</table>

IE8 이하에서는 줄무늬 배경색이 적용되지 않는다.

반응형 테이블

.table 을 .table-responsive 으로 감싸서 작은 기기에서는 수평 스크롤을 할 수 있는 반응형 테이블을 만든다(768px 이하). 768px 보다 큰 기기에서는 보기에 차이가 없다.

제목셀	제목셀	제목셀
나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져	나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져	나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져

<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th>제목셀</th>
                <th>제목셀</th>
                <th>제목셀</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져</td>
                <td>나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져</td>
                <td>나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져</td>
            </tr>
        </tbody>
    </table>
</div> 

그 밖의 테이블 서식이 궁금하다면 부트스트랩 테이블을 참고하시기 바랍니다.

1. 훈민정음(訓民正音)은 조선 초기 세종대왕이 지은 책의 제목, 그리고 그 책에서 해설하고 있는 뒷날 한글로 불리게 된 한국어의 표기 문자 체계를 말한다. [본문으로]
2. 사실 훈민정음 반포일의 정확한 날짜는 모른다. 조선왕조실록에 따르면, 1446년 음력 9월 29일에 훈민정음이 이루어졌다고 되어 있는데, 1940년에 발견된 《훈민정음》 해례본 말문(末文)에는 ‘정통 11년 9월 상한-세종 28년 9월’ (正統十一年九月上澣)에 책으로 펴냈다고 되어 있다. 그래서 1446년 9월 상한(上澣)의 마지막 날인 음력 9월 10일을 훈민정음 반포일로 정했는데, 이를 그레고리력으로 환산하면 10월 9일이 되므로, 10월 9일을 훈민정음 반포일로 정했다. 그러나 지금 우리가 사용하는 그레고리력이 아닌, 1446년 당시 서양이 사용했던 율리우스력으로 환산하면, 1446년 음력 9월 10일은 9월 30일이 된다. [본문으로]