THINK-PRO BLOG

티스토리 블로그 등을 사용해서 소스 코드를 입력하는 경우 일반적으로,

syntaxhighlighter 라고 하는 유틸리티 프로그램을 자주 사용하게 됩니다.

신택스 하이라이터의 단점은 블로그 글쓰면서 까지도 복잡한 html 코딩을 해야 하는 불편함이 있죠...

저는 C++ 프로그래밍 관련 블로깅을 위해 다음의 소스 코드를 사용했는데요...

--------------------------------------------------------------------

<pre class="brush: cpp">

#include <iostream>

using namespace std;

int main()

{

cout << "Hello World!" << endl;

return 0;

}

</pre>

----------------------------------------------------------------------

아니 글쎄 이놈이 이렇게 찍히는 거 아닙니까!!!!

급당황...;; <iostream>이 html 태그 처럼 사용된겁니다...ㅠㅠ 자동으로 </iostream> 태그가 생성되었어요;;; 망할

아 이거 어떡해야 하지 하던 찰나에 떠오른게 있더군요

어차피 html으로 작업하는거니까 <> 자체를 html 태그로 걸어주자는 겁니다.

html 태그 중 <> 를 쓰려면 &lt; ... &gt; 를 써야 한답니다. 즉...

 <iostream> 이라고 쓰고 싶다면 "&lt;iostream&gt;"

이렇게 써야 합니다... 그래서 저는 다음과 같이 코드를 바꾸었습니다.

--------------------------------------------------------------------

<pre class="brush: cpp">

#include &lt;iostream&gt;

using namespace std;

int main()

{

cout << "Hello World!" << endl;

return 0;

}

</pre>

----------------------------------------------------------------------

그러고 나니 원하는대로 잘되더군요! ㅎㅎ

하여간 삽질 했다가 해결책 찾아서 참 다행이군요 ㅋㅋㅋㅋ;;;;

혹시나 저처럼 티스토리 블로그 운영한지 얼마 안된 초보 개발자분들이 계실까봐 싶어서 포스팅해보았습니다!!

도움이 되었다면 댓글좀 달아주세요 ㅋㅋㅋ @,@

src는 그림을 올릴때 사용하는 속성이죠

ex)<img src="그림파일.jpg">

근데 여기서 주의하실점이,

저 그림파일이 htm파일과 같은곳에 저장되있어야

인터넷으로 켯을때 이미지가 안깨지고 제대로 나옵니다.

아니면 저장을할때 그 폴더 까지 써주시면되는데요.

예를들어서,

<img src="내 그림/그림파일.jpg">

이렇게 앞에 내 그림은 폴더 이름이죠.

저건 내그림 폴더안에 그림파일.jpg 그림을 불러오는거예요.

2.width

width는 가로크기를 변경해주는 속성입니다.

ex) <img src="그림파일.jpg" width=100>

이렇게 쓰면 저 그림파일의 가로크기를 100픽셀로 설정 한것입니다.

3.height

height는 세로크기를 변경해주는 속성입니다.

ex) <img src="그림파일.jpg" height=200>

이렇게 쓰면 그림파일의 세로크기를 100픽셀로 설정 한것입니다.

4.border

border는 그림 테두리를 표시하는겁니다.

ex)<img src="그림파일.jpg" border=2>

이렇게 쓰면 그림파일의 테두리가 2만큼 되는데요.

만약 테두리를 표시하지 않으려면 border를 0으로 주면되고

크게하려면 숫자를 점점 올리면 됩니다.

5.alt

alt는 그림에다가 마우스를 대면 설명글이 나오게하는 거예요.

ex)<img src="그림파일.jpg" alt="히히하하">

이렇게하면 그림에다 마우스를 갖다대면 히히하하 라고 뜨게됩니다.

6.align

align은 다 아시죠?

그림을 특정위치로 정렬 해주는 거예요.

왼쪽,가운데,오른쪽 만 있는게 아니고

위,아래등등의 옵션도 있어요.

ex)<img src="그림파일.jpg" align=right>

=그림 오른쪽 정렬

<img src="그림파일.jpg" align=bottom>

=그림 하단에 맞춰 정렬

7.hspace

hspace는 그림 좌우에 여백을 설정하는 거예요.

ex)<img src="그림파일.jpg" hspace=20>

이건 그림 좌우에 20픽셀의 여백을 설정 하는 것입니다.

8.vspace

vspace는 그림 상하에 여백을 설정하는 거예요.

ex)<img src="그림파일.jpg" vspace=20>

이건 그림 상하에 20픽셀의 여백을 설정 하는 것입니다.