액자에 그림을 올리는 마법사

액자에 그림을 올리는 마법사 [설명] 소라의꿈 카페 -> 태그 공부방 -> 95번  -> 액자에 그림을 올리는 마법사   -테이블 설정하기     테이블 하나에, 배경이미지를 넣고, 음악이 흐르며, 글이 위로 올라가는 기초적인 간단한 영상 시(映像 詩)를 만드는 방법. 테이블(표)를 3개를 만들어 3중 테두리 액자.   초보자를 위한 용어를 겻드림. ○ 표를 지정하는 방법   테이블이란 ? 테이블은 영상 시를 담을 표를 말한다.   보다 더 말하면, 표의 배경으로 그림을 넣고, 그 위에 글씨가 움직이게 하는 것을 의미한다고 말할 수 있다. 테이블 설정하기(영상 시가 표현될)는 크기를 지정   여기에서 쓰는 숫자에 대해 설명하면, 테이블 크기를 설정하는 숫자는 모두 픽셀(pixel)  단위 이다.   픽셀이란 우리가 일반적으로 사용하는 컴퓨터 모니터는 1024 모드 이다. 가로가 1024 픽셀이라는 말 이다. 참고로 현재 17인치 모니터는 1024 픽셀 이다. 보통 게시판에 표시하는 크기는 650 픽셀 정도 이다.   ㎝로 바꾸어서 말하면 1024 픽셀은 36.12㎝(14.2인치) 이다. 1 픽셀=0.35㎜ 650 픽셀은 22.93㎝. ≒ 23㎝ 이다 -> (9인치). (16.67 ≒ 17인치 모니터와 같음). 예제 영상 시를 제작할 때 홈페이지의 메뉴와 게시판 위쪽을 제외하고 가장 편하게 한 페이지를 볼 수 있는 크기는 가로 550 ～ 600 픽셀,  세로 400 ～ 450픽셀 정도 (3 : 2 정도) 일 것이다.   물론 취향에 따라 가로 650, 세로 300 (2 : 1)으로 할 수도 있으니 영상 시를 올릴 때 알맞은 크기가 되도록 예상해서 일단 정해 보고 다음에 수정하면 될 것이다. ○ 용어 설명 과 만드는 방법 1. 직접입력할 때 가로 크기 를 직접 입력한다. 현재 600 픽셀로 되어 있다면 그 자리에 600이라고 쓰면 지금 만들고 싶어하는 영상 시의 가로의 크기가 600으로 설정이 된다. 2. 직접입력  세로 크기 를 직접 입력한다. 현재 기본 값은 400으로 주어져 있다. 여기도 역시 가로의 크기를 수정하듯 400 또는 450 을 써넣어 주면 세로의 크기가 지정이 된다. 3. 가로 너비 는 이미 주어져 있는 설정 값을 이용하는 것인데 옆에 작은 삼각형(▼) 을 눌러보면 50 픽셀 단위로 설정 값이 주어져 있다. 만약 가로의 넓이를 3. 번에서 550으로 설정을 한다면 설정값 바꾸기 를 꼭 눌러주어야 설정이 바뀐다. 하지만 직접 입력을 했다면, 설정 값 바꾸기를 누를 필요는 없다. 4. 세로 너비 는 세로 크기 를 이미 설정된 값(3. 에서 한것과 마찬가지로) 을 이용해서 지정하는 것이다. (방법은 3. 과 똑같다) 5. 설정 값 바꾸기 는 3. 번과 4. 번 너비 설정 값 을 사용했을 때만 눌러야 한다. 1. 2. 에서 직접 입력을 했으면 5. 번(설정 값 바꾸기) 의 버튼을 누르면 안 된다. 6. 결과 보기 는 현재까지 설정한 값을 미리 보는 기능이다. 물론 마음에 들 때는 아래(소스 태그)에 나오는 소스를 복사해서 글 쓰기 또는 게시판에 그대로 올리면 된다. 이 부분의 설명은 나중에 다시 해드리겠습니다. 그 다음은 테이블 위치와 그리고 테이블 테두리의 색상을 바꾸는 것을 설명하겠습니다 7. 정렬하기는 표를 가운데, 왼쪽, 오른쪽, 즉 영상 시가 게시판에서 보여지게 될 위치를 지정하게 되는 것이다.   보통 가운데에 오게끔 하는 것이 일반적이다. 그래서 기본값으로 가운데 정렬로 되어 있다. 8. 테두리 아래쪽 칼라(색상)는 아래의 표(색상표)에서 빨간색으로 표시된 부분을 말한다.     표의 겉 테두리의 색상 선택은 액자의 모습을 결정하는 것으로 만약 아래쪽 테두리가 진한 색이 되고, 위쪽 테두리가 연한 색이 되면 아랫 쪽으로 그림자가 비치는 모양, 즉 왼쪽에서 빛이 비치는 모양으로 보여지게 된다. 대부분 아랫 쪽 테두리에 찐한 색을 써주면 액자의 모양과 같이 보일 것이다.   (예) 빨간색 부분이 테두리의 아래쪽에 있는 모습 9. 색상표 이용은 칼라를 지정해 줄 때, 8. 번은 이름으로 나타내지는 색상만을 지정할 수 있지만, 색상표를 이용하게 되면 다양한 색상을 선택할 수 있다.   색상표 이용을 클릭하면 새로운 창으로 색상표가 뜨는데 아래 예시처럼 원하는 색상에 마우스를 가져다 놓기만 하면 아래쪽 하얀 상자 안에 그 색상코드가 예를 들면 #336666 처럼 6자리 숫자가 나타나게 된다. 그때 # 표시부터 숫자(또는 문자 포함) 6자리를 그대로 복사(Ctrl + C)해서, '색상표 이용' 뒤에 #      를 붙여 넣으면 선택한 색상이 테두리의 색상으로 나타나게 된다. 10. 테두리 위쪽칼라 는 아래의 표에서 파란색으로 보이는 곳을 의미한다. 파란색이 테두리 위쪽 칼라색상 11. 색상표 이용은 9. 번에서 이용법과 역시 마찬가지이고, 9. 번에서 색상표를 이미 띄워서 사용했다면 위쪽 칼라 또한 그 색상표를 그대로 사용하여도 된다. 다만 색상코드만 11. 번 옆에 #      자리에 넣어주시면 된다. 12. 테두리 크기 는 현재 색상으로 표시하는 부분의 크기이다. 만약 가느다랗게 표시하고 싶으면 숫자를 적은 숫자로 바꾸어 표시하면 된다.   기본설정은 15 픽셀로 되어 있다. 아래의 표에서 테두리의 크기를 비교해 보면 잘 알 것이다. 만약 표가 500 픽셀이나 600 픽셀 정도로 큰 표라면 느껴지는 테두리의 크기는 달라 보일 것이다.   표가 작았을 때 더 넓어 보이는 것은 면적의 대비에 의해 더 넓게 보이는 것이기 때문이다. 테두리크기  4 테두리크기 10 테두리크기 15 테두리크기  2 테이블 설정은 여기까지 설명을 합니다. 다음은 간단하게 테이블 소스 에 대한 설명을 하면 테이블 크기 를 설정하게 되면 아래와 같은 소스 가 생성이 된다.  현재 가로 550, 세로 400 으로 설정했다면 <table width="550" height="400"> 이런 소스가 생성되는 것이다. 즉 테이블이 생성되는데, 가로로 550, 세로로 400, 으로 설정 되어라 라는 뜻의 태그 소스이다. 정렬하기는 가운데로 태그 소스는.. align="center" 이 된다. 테두리 아래쪽 칼라는 남색, 테두리 위쪽칼라는 파란색으로 지정을 했다면 bordercolordark="navy" bordercolorlight="blue" 이런 소스가 생성이 된다. 물론 순서에 따라 나오는데 앞쪽에 있는 소스가 테두리 아래쪽 칼라를 의미 하고, 두 번째 나오는 소스가 테두리 위쪽칼라를 의미한다. 그리고 테두리의 크기가 15 로 지정을 했다면 border="15" 로 생성된다. 이번에는 이 모든 것을 한곳에 모아 표시하게 되면 다음과 같이 태그 소스 가 생성되었다는 것을 알 수 있다. <table width="550" height="400" align="center" border="15" bordercolordark="navy" bordercolorlight="blue"> 그리고 다음은 <tr><td> 는 본인이 따로 설정하지 안 해도 자동으로 생성이 되게 되어 있다. tr td 는 표가 셀(cell), 즉 칸(column col.)을 말하는 것이다. 여기서는 표가 하나로 되어 있어 있다면   tr td 는 한번만 쓰여지나 표가 2개이면 TR TD 도 2번 쓰여지게 되는 것입니다.  다음에 배경 그림 넣기 에 대한 자세한 설명을 하겠습니다.                                「초급 영상 시 마법사」 - 배경이미지 넣기  우선 지정하는 값이 어떤 역할을 하는지에 대해 알 게 된다면 아마 더 이해가 빠르겠죠? 아래의 그림과 설명을 참고하시기 바랍니다 예제보기 안녕하세요 지금 여러분이 보고 계시는 것은 영상시 제조기로 만든 영상시의 예제입니다 테이블 설정만 해서 보여드리는 것입니다 소스는 아래에 공개합니다 적용된 소스 <table width="500"height="400" align="center"  border="15" bordercolordark="#ccffcc"  bordercolorlight="#33cc99" > <tr > <td background="http://www.sichenji.com/ez2000/system/db/photo2/upload/111/1022861369 /p010-045.jpg"> <marquee direction="up"scrollamount="1"> 솔체" size="4" color="blue"> <center>안녕하세요 지금 여러분이 보고 계시는 것은 영상시 제조기로 만든 영상시의 예제입니다 테이블 설정만 해서 보여드리는 것입니다 소스는 아래에 공개합니다 </marquee></center> </tr></td></table> <embed src="http://sichenji.com/as/029.asx" hidden= true loop= -1>