메뉴 건너뛰기

FAQ

floma 2009.06.11 07:46 조회 수 : 1778

글이 너무 길어졌습니다.

그냥 한 번 읽고 내려가시고 이런 예가 있다는 것만 보시기 바랍니다.

 

 

 

 

 

 

1. 예제-1

일반적으로 글을 등록하면 아래와 같이 왼쪽에 등록이 되겠지요?

편집기에서 글을 작성했을 때 아래 그림과 같이 작성을 합니다.

편집기에서 아래 그림과 같이 작성 합니다.

 

89853_001.jpg

 

 

등록한 결과는 아래와 같이 나타납니다.

 

89853_002.jpg

 

 

 

 

 

예제-2.

편집기의 가운데정렬 아이콘을 클릭하는 방법으로 가운데 정렬을 한 경우를 알아봅니다.

편집기에 등록한 내용을 마우스로 드래그하여 선택합니다.

 

89853_013.jpg

 

 

 

 

89542_017.jpg 아이콘들 중에 89542_018.jpg를 클릭합니다.

아래 그림과 같이 가운데로 정렬이 됩니다.

 

 89853_014.jpg

 

 

등록을 하게 되면 다음과 같이 보이게 됩니다.

 

89853_015.jpg

 

 

 

 

 

 

예제-3.

테이블을 이용하여 가운데로 정렬을 해 봅니다.

아래 그림과 같이 88500_004.jpg 버턴을 클릭하고 HTML 편집기로 이동한 다음에 기존 HTML 코드 상단에 아래 그림과 같이 파란색으로 선택되어진 부분처럼

<table align=center><tr><td> 를 입력하고 맨 아랫줄에 </td></tr></table>를 추가합니다.

 

 

89853_003.jpg

 

 

글을 등록하면 아래 그림과 같이 등록됩니다.

 

89853_004.jpg  

 

89542_018.jpg 아이콘을 눌러서 가운데로 정리할 때와는 또 다른 형태의 결과가 나타나게 됩니다.

위의 경우에는 그림이 없고 문자로만 구성이 되었을 경우의 예입니다.

항상 기존의 맨 위에 <table align=center>의 테그가 들어가야 하는 것이 아니고 코드의 중간에 어디든지 들어갈 수 있습니다.

 

 

 

 

 

예제 - 4.

그림이 있을 경우에 왼쪽에 배치시킬 경우의 예제입니다.

그림이 있을 경우 아래와 같이 왼쪽은 그냥 평범한 것이라고 해야 하나요?

편집기에서 아래의 그림과 같이 작성 합니다.

 

89853_005.jpg

결과물은 아래와 같이 나타나게 됩니다.

 

89853_006.jpg

 

 

 

 

 

예제 - 5.

이번에는 그림과 글을 가운데로 정렬하도록 해 보겠습니다.

편집기 우측 상단의 88500_004.jpg 버턴을 클릭하고 HTML 코드 창에서 아래 그림과 같이

맨 위에 줄에 <table align=center><tr><td> 를 입력하고 맨 아랫줄에 </td></tr></table>를 추가합니다.

 

 

89853_007.jpg 

 

 

등록한 결과는 아래 그림과 같습니다.

 

89853_008.jpg 

 

 

 

예쁘게 정렬이 되었습니까?

위의 경우에는 그림의 가로의 크기가 480 픽셀로 작기 때문에 가운데로 정렬이 예쁘게 되어 있는데 실제로 900픽셀의 그림이

배치 된다면 글은 거의 왼쪽 정렬이나 마찬가지로 됩니다.

가로가 큰 그림의 경우 아래 그림과 같이 됩니다.

 

89853_019.jpg 

 

 

 

 

예제 - 6.

큰 그림일지라도 그림도 가운데로 정렬이 되고 글들도 가운데로 정렬이 되도록 하겠습니다.

 

89853_009.jpg

 

위의 그림에서 파란색의 <table align=center><tr><td> ..... </td></tr></table>은 전체를 가운데로

맞추게 됩니다.

붉은색의  <table align=center><tr><td> ..... </td></tr></table>은 글자 부분만을 가운데로 맞추게 됩니다.

결과는 아래 그림과 같습니다.

 

89853_010.jpg

 

 

큰 그림에서도 아래 그림과 같이 적용됩니다.

 

89853_020.jpg

 

 

 

 

가운데로 정렬을 하려고 할 때는 이 방법이 가장 좋을 것 같습니다.

만약에 그림과 그림 사이에 있는 문자도 가운데로 정렬할 때도 이런 방법을 응용하시면 됩니다.

 

 

 

 

 

 

예제 - 7.

그림에 테두리를 만들어 봅니다.

예를 들어 하늘이 파란색이 아니고 흰색의 여백이 많을 경우에는 그림에다 테두리를 씌우면 바탕과

구분이 잘 되어 보기에 좋습니다.

이 경우에도 HTML 코드를 건드려야 하는데 그리 어려운 것은 아닙니다.

코드에서 <img ......  로 시작하여 .... /> 로 닫히는 부분까지가 그림을 나타내는 부분입니다.

아래 그림과 같이  .... /> 앞에다 style="border:1px solid #000000" 를 추가해 주시면 그림에 테두리가

생기게 됩니다.

 

89853_011.jpg  

 

결과물은 아래 그림과 같습니다.

 

89853_012.jpg

 

여기서 테두리에 대해서 좀 더 살펴 가기로 하겠습니다.

style="border:1px solid #000000" 로 추가되어 있습니다.

여기서 border 는 테두리를 나타냅니다. border 다음에 있는 문자는     :   프롬프트 입니다.

다음에 있는 1px은 테두리의 굵기를 의미합니다. 여기서는 제일 가는 1px로 지정을 했습니다.

픽셀을 숫자로 지정을 하는데 숫자가 클수록 테두리의 굵기가 굵어집니다.

다음에 solid 가 있는 이는 실선을 의미합니다.

#000000 이 부분이 테두리의 색상을 결정합니다.

색상은 # 을 제외하고 앞에 두자리는 빨간색, 중간에 두자리는 초록색, 마지막 두자리는 파란색의

농도를 의미합니다.

빛의 삼원색인 적(R),녹(G),청(B) 를 조합하여 색상을 표현합니다.

색상에 대해서 더 알아보시려면 http://www.floma.kr./ColorTable 를 클릭하세요.

 

 

 

 

 

 

 

여기까지 아주 장황하게 내려왔네요.

글을 작성하시다 필요한 부분만 참조하세요.