친절한효자손 취미생활

새롭게 선보이는 카테고리 입니다. 여기에는 티스토리 스타일을 꾸며주고 사용 편의성을 높이는 모듈들을 만들어 올리는 콘텐츠 입니다. 어떤 스킨에서든지 다 통합니다. 단! 티스토리 전용 어플리케이션에서는 비정상으로 보여집니다. 하지만 상관 없습니다. 티스토리 앱을 이용하시는 분들은 거의 적을 뿐더러 원래 기존에 사용하던 표도 정상적으로 보여지진 않았으니까요.


적용 방법은 간단합니다. CSS 스타일에 코드를 추가해주시고, 사용하실 때, HTML 태그 요소들만 조금씩 수정해서 사용하시면 됩니다. 이름하야, "친절한효자손 애드온" 이라고 명명 합니다. 오늘은 그 첫번째로 티스토리에서 취약하기로 소문난(?) 표 만들기에 대한 방법입니다.


TIP

알림 :
친효애드온의 저작권은 저에게 있습니다. 코딩에 마크업된 태그 요소들은 수정하셔서 사용하셔도 됩니다. 하지만 주석처리된건 절대로 지우시면 안 됩니다.


1. 친효애드온 테이블 CSS 세팅하기

티스토리 글쓰기 화면에서 저 아이콘을 누르시면 편리하게 표를 만드실 수 있습니다. 하지만 이상하게도 글씨를 작성하면 앞글씨의 좌측에 스페이스바를 한번 누른듯한 공백이 생성되어 있습니다. 이 부분이 많이 불편합니다. 또한 표 수정이 용이하지 못합니다. 그래서 저는 수동으로 사용하기위해 별도로 모듈을 만들었습니다.


제목1 제목2
내용1-1 내용1-2
내용2-1 내용2-2
내용3-1 내용3-2
내용4-1 내용4-2
내용5-1 내용5-2


이 코드를 사용하시면 이렇게 노란색 테마로 이루어진 표가 삽입됩니다. 먼저 적용하셔야 할 부분이 CSS 스타일태그 입니다.


#rgyTable {

width: 100%; <!--전체 가로 사이즈-->

margin: 0 auto;

border-collapse: collapse;

border: 2px solid black;

text-align: center;

}


#rgyTable tr,

#rgyTable th,

#rgyTable td {

border: 1px solid black;

padding: 5px;

}


#rgyTable tr:nth-child(2n+1) {

background: #ffff9f; <!--교차 색상-->

}


#rgyTable th {

border-bottom: 2px solid black;

font-size: 20px;

background: yellow; <!--제목 부분 색상-->

}


이 CSS 스타일 코드를 티스토리의 CSS 아무곳에나 붙여넣기를 하시고 저장을 눌러주시면 됩니다. 위의 태그는 아래 메모장에 넣어두도록 하겠습니다.


친효애드온-표(CSS).txt


이렇게 붙여두시면 됩니다. 저는 보통 위쪽에 넣는 편 입니다. 이미 작성된 곳 사이에 넣는것이 아닌, 빈 줄이 있다면 그 사이에 공간을 만들어 넣어주시면 됩니다.


잘 모르시겠다면 이런 주석 사이사이에 공간을 확보하여 넣어주시면 됩니다. 다음은 HTML 부분입니다.


<table id="rgyTable">

    <colgroup>

        <col width="50%">

        <col width="50%">

    </colgroup>

    <tbody>

        <tr>

            <th>제목1</th>

            <th>제목2</th>

        </tr>

        <tr>

            <td>내용1-1</td>

            <td>내용1-2</td>

        </tr>

        <tr>

            <td>내용2-1</td>

            <td>내용2-2</td>

        </tr>

        <tr>

            <td>내용3-1</td>

            <td>내용3-2</td>

        </tr>

        <tr>

            <td>내용4-1</td>

            <td>내용4-2</td>

        </tr>

        <tr>

            <td>내용5-1</td>

            <td>내용5-2</td>

        </tr>

    </tbody>

</table>


제목이 들어갈 부분, 그리고 내용이 들어갈 부분이 구분되어 있으며, 두줄 간격으로 색 구분이 있어서 알아보기가 쉽습니다. 색 변경에 대해서는 CSS 태그를 보시면 주석으로 표시를 해두었으니 원하는 색으로 입력해서 사용하시면 됩니다. 위의 HTML 태그 부분은 아래의 첨부파일에서도 확인하실 수 있습니다.


친효애드온-표(HTML).txt


2. 테이블 행과 열 추가 및 삭제 방법

가로줄을 행, 세로줄을 열이라고 합니다. 테이블의 행과 열 추가 및 삭제 방법에 대하여 설명하겠습니다. 어렵지 않습니다.


<table> 안쪽에는 이렇게 tr 요소들이 있습니다. 이것이 행을 구성하는 요소 입니다. 즉, 행을 추가하려면 저기 표시된 빨간색 상자 요소들을 모두 복사해서 아래에 붙여넣기 하시면 한 행이 추가가 되며, 반대로 삭제는 저만큼을 없애면 됩니다.


열은 이 부분입니다. 주의하실점은 각 행에 대해서 일괄 작업을 해야 한다는 점 입니다. 이렇게 각 행 안쪽에 있는 th 혹은 td 태그가 열을 구성하는 요소들 입니다. 결국 하나의 표에서 한 열을 추가하고 삭제하려면 각 행마다 빨간색 표시가 된 부분을 밑으로 똑같이 복사하거나 일괄 삭제를 해야 최종적으로 행이 추가 및 삭제가 됩니다.


또한 colgroup 부분도 수정해야 합니다. 여기는 표의 "열" 사이즈에 대해서 정의하는 부분입니다. 현재 50%씩 두개가 주어진건, 가로열에 대한 크기가 두개가 모두 동일하다는 뜻이 됩니다. 만약 첫번째 열은 작고 두번째 열은 크게 만들기 위해서는 30%, 70%로 하던지 20%, 80%로 진행하시면 됩니다. 첫번째 col이 첫 열입니다. 그리고 위에서 열을 추가하실 때 마찬가지로 colgroup 안에 있는 col 요소도 새늘어난 열만큼 추가해 주셔야 합니다.


HTML의 table 태그에 대해서는 아래의 관련글을 참고하시면, 셀을 부분적으로 합치는 방법도 나와있으니 참고하시어 나만의 멋진 테이블 표를 만들어 보시기 바랍니다. 끝.




"친절한효자손 취미생활" 을 검색!


공유하기

facebook twitter kakaoTalk kakaostory naver band