예쁜 코드 입력창 만들기
이 포스트에서는 코드를 이쁘게 입력하는 창을 만들어 보고자 한다. 여러 웹사이트에서 이런 서비스를 제공하는데, 코드를 입력하면 자동으로 예쁜 색깔을 넣어주고, 해당 코드창을 그대로 가져올 수 있게끔 HTML 코드를 자동으로 생성해 준다. 오늘은 그 중에서도 Color Scripter[참고1]가 제공하는 코드창을 구현해 보겠다. 아래의 구현결과는 컬러 스크립터가 제공하는 코드창이다.
1 2 3 4 | <div> 우리도 컬러 스크립터처럼 멋진 코드 창을 만들수 있어요. </div> | cs |
기본 스타일 설정
- 기본 HTML 구조는 table 태그로 구현한다.
- 테이블의 첫 번째열에는 숫자를 넣고, 두 번째열에는 코드를 넣을 예정이다.
- table의 CSS
background-color: #272727; // 테이블 배경을 약간 밝은 검정색(■)을 넣는다.
border-radius: 4px; // 테이블의 모퉁이를 둥글게 처리한다.
color: white; // 글자색은 하얀색으로 한다. - td의 CSS
padding: 10px; // 셀의 안쪽 여백을 약간 넣어준다.
Our Small Joy
HTML
1 2 3 4 5 6 7 8 | <div id=“container” > <table cellspacing=“0” cellpadding=“0”> <tr> <td class=“primary”>[왼쪽 숫자 열]</td> <td class=“secondary”>[오른쪽 코드 열]</td> </tr> </table> </div> | cs |
CSS
1 2 3 4 5 6 7 8 9 10 | <style> table { background-color: #272727; border-radius: 4px; color: white; } td { padding: 10px; } </style> | cs |
RESULT
| [왼쪽 숫자 열] | [오른쪽 코드 열] |
첫 번째 열 (숫자)
- 첫 열은 첫 번째 td를 꾸며주면 된다.
- 전체 디자인은 오른쪽 테두리선을 회색을 만들고, 안에 줄의 숫자를 넣어준다.
- HTML
첫 번째 td의 class=”primary”로 설정해주고, 그 안에 줄 숫자들의 container로 div.primary를 만들어준다. 그 안에 차례대로 <div>숫자</div>를 넣어준다. - td.primary의 CSS
border-right: 2px solid #4f4f4f; // 첫 열의 오른쪽 테두리를 어두운 회색(■) 처리한다.
color: #aaa; // 글자색을 밝은 회색(■)으로 한다.
width: 1%; white-space: nowrap; // 열의 너비를 내용물 크기에 맞게 조절한다.
Our Small Joy
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <div id=“container” > <table cellspacing=“0” cellpadding=“0”> <tr> <td class=“primary”> <div class=“primary”> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> </td> <td class=“secondary”> <div class=“secondary”> <div>안녕하세요</div> <div>여기는</div> <div>코드를</div> <div>넣어주는</div> <div>곳입니다.</div> </div> </td> </tr> </table> </div> | cs |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <style> table { background-color: #272727; border-radius: 4px; color: white; } td { padding: 10px; } td.primary { border-right: 2px solid #4f4f4f; color: #aaa; width: 1%; white-space: nowrap; } </style> | cs |
RESULT
|
1
2
3
4
5
|
[오른쪽 코드 열] |
두 번째 열 (코드입력창)
- 두 번째 열은 두 번째 td를 꾸며주면 된다.
- 전체 디자인은 왼쪽 정렬을 하고, 줄의 간격을 첫 열과 같게 맞춰준다.
- HTML
두 번째 td의 class=”secondary”로 설정해주고, 그 안의 코드 내용을 넣는다. 줄 마다 <div></div>로 둘러싸준다. - td.secondary의 CSS
text-align: left; // 글자를 왼쪽 정렬한다.
color: #f0f0f0; // 글자 색깔은 회색(■)으로 설정한다. - div.primary > div, div.secondary > div의 CSS
line-heigth: 130%; // 첫 열과 두 번째 열의 높이를 130%로 설정한다.
Our Small Joy
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <div id=“container” > <table cellspacing=“0” cellpadding=“0”> <tr> <td class=“primary”> <div class=“primary”> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> </td> <td class=“secondary”> <div class=“secondary”> <div>안녕하세요</div> <div>여기는</div> <div>코드를</div> <div>넣어주는</div> <div>곳입니다.</div> </div> </td> </tr> </table> </div> | cs |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <style> table { background-color: #272727; border-radius: 4px; color: white; } td { padding: 10px; } td.primary { text-align: right; border-right: 2px solid #4f4f4f; color: #aaa; width: 1%; white-space: nowrap; } td.secondary { text-align: left; color: #f0f0f0; } div.primary > div, div.secondary > div { line-height: 130%; } </style> | cs |
RESULT
|
1
2
3
4
5
|
안녕하세요
여기는
코드를
넣어주는
곳입니다.
|
예쁜 코드창이 완성되었는데, 하나씩 뜯어보면 생각보다 어려운 HTML이나 CSS를 사용하지 않았다. 기본 개념만 충분히 가지고 있다면, 이렇게 이쁜 코드창을 간단히 만들 수 있다.
