어디든지 여러분의 소스코드를 보기좋게 올리세요

Color Scripter로 Action Script, ASP, C, C#, CSS, HaXe, HTML, Java, JavaScript, JSP, Objective C, Perl, PHP, Python, Ruby, SQL, Swift, Visual Basic 등
 다양한 언어를 하이라이트하여 소스코드를 더 보기좋게 블로그등에 업로드 할 수 있습니다.

Color Scripter는 네이버 블로그등 <script> 태그가 지원되지 않아 Syntax HighLighter를 사용할 수 없는 곳에서도 사용할 수 있으며,
간단한 설정만으로 자신이 원하는 방식으로 소스코드를 하이라이팅 할 수 있습니다.

위치는  https://colorscripter.com/

 

디자인

보다 더 깔끔하게 코드를 볼 수 있게 디자인을 변경했습니다.
특히 HTML과 CSS가 더 다양한 색상을 지원하여 더 보기 좋게 하이라이트 됩니다.

 

 


<html>
    <head>
        <title>Untitled 1</title>
    </head>
    <body>
        <p align="center">
            Hello World!
        </p>
    </body>
</html>

 


package{
    public class Class1{
        public static void main(String arg[]) {
            System.out.println("Hello World!");
        }
    }
}

툴바

최대한 간단하면서 편리하게 제작했습니다.
키보드나 마우스 모두 어떤 것을 사용하더라도 편하며 검색기능을 이용하면 더욱 빠르게 언어를 선택할 수 있습니다.

 

스타일패키지를 선택하기 전에 대략적인 색상을 파악할 수도 있습니다.

  확장 스토어

이제 확장스토어에서 언어팩이나 스타일패키지를 적용하거나 제작 및 업로드 할 수 있습니다.
확장스토어에서 플러그인 적용 후 colorscripter.com 사이트를 새로고침 하면 바로 사용 가능합니다

 

               

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

 홈페이지제작할 때 꼭 필수적으로 알아야 하는 것일 수 있습니다.

그래도 아직도 사용하는 html 태이블 구조에 관해서 학습을 해보겠습니다.

 

예전에는 이 테이블태그를 이용하여 레이아웃을 잡았습니다.

 

div로 레이아웃을 잡는데요 표로 레이아웃을 요즘은 안잡고요. 그래도 달력이나 게시판 등은 그렇게 한답니다.

지금까지 강좌에 올린 태그들은 그 기능에만 충실히 설명을 하고 꾸미기 쪽은 아에 설명을 안했습니다. h태그로 작성한텍스트의

색을 바꾼다던지 글씨를 더 크게 한다던지의 align을 써서 오른쪽으로 정렬을 시킨다던지 그런 설명을 안했습니다.

이미지 태그도 border를 줘서 외곽을 어떻게 처리 한다던지 그런 설명도 안했는데요. 그 이유는 CSS에서 그러한 것들을 하기 때문입니다.

요즘은 html은 저렇게 구조만 짜주면 됩니다. 그리고 스타일은 스타일시트인 CSS 로 한답니다.

예를 들어서 다음페이지를 봐보겠습니다.

인터넷 익스플로러를 띄우시고 클릭하면 다음으로 갑니다.

메뉴에서 보기 - 스타일 - 스타일 없음을 눌러 보시면요 CSS가 해제된 저희가 지금 작성하고 있는 html 자체만 보실수 있습니다.

저거 입니다. html 로는 저렇게만 작성을 해주시면 되고요 CSS로 아까와 같이 배치 및 글씨 색 글씨 크기, 백그라운드 이미지, 백그라운드 색, 외곽선 굵기 스타일 외곽선색 등을 다 지정해준답니다.

 

만약 스타일 없음 했는데도 스타일 있는 페이지와 차이가 별로 없다면 그것은 웹표준을 지키지 않고 테이블로 레이아웃을 작성한 옛날 방식의

사이트 입니다. 그냥 혹시 왜이렇게 강좌를 대충 대충 하나 하시는 분이 계실까봐  말씀 드렸습니다.

 테이블에 대해서 말씀드리면

 

<table> <-- 테이블 태그의 시작

<tr> <-- ()의 시작

<td>A <-- ()의 시작

</td> <-- ()의 끝

</tr> <-- ()의 끝

</table> <-- 테이블 태그의 끝

 

위에서 tr을 열고 td1개만 사용했으므로 그냥 1칸뿐인 테이블이 됩니다.

 

 

  

 
<body bgcolor="#FF99CC">
<table border="1">
<tr>
<td align="center" colspan="2">A</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>

결과는

 



 

<table border="1" > 
<tr>
<td rowspan="2">A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
</tr>
</table>

 

결과는

 

 

 

<table border="1" > 
<tr>
<td rowspan="2">A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>

 

결과는

 

 

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,