전체배경 강의 (5)

본문 시작 위치 (게시글 본문 영역 -> 빨강색 선으로 표시된 박스)

수강생 명단

1 그대의 열정님~ (열정님)

2 샤방샤방님~ (샤방님)

3 사과향기님~ (향기님)

4 초록지안님~ (초록님)

5 인촌1님~ (인촌님)

==================================================================================================================

[ 강의 목차 ]

1. 기초사용법

(가) 소스 사용법

- 1,2,3번 소스와 게시글 본문을 결합하여 게시글을 올리는 방법

- 1,2,3번 소스와 게시글 본문을 분리하는 방법

(나) 게시글 본문영역 식별하기

2. 배경 깔기

(가) 이미지 배경 깔기

(나) 스위시 배경 깔기

(다) 동영상 배경 깔기

(라) 배경에 칠하기 / 배경에 글넣기

(마) 배경 겹쳐 깔기

3. 게시글판 화면 디자인

(가) 본문 가로 넓이 조절하기와 본문 경계선 표시하기

(나) 타이틀 디자인

(다) 카페메뉴 표시하기와 카페메뉴 디자인

(라) 댓글판 디자인

====================================================================================================================

동영상 배경깔기

<! 배경 - 동영상>
<div style="z-index: -2000; position: absolute; width: 100%; left: 0%; top: 0%; ">

<! 동영상 1 >
<div class='embed-container' >
<embed type=application/x-shockwave-flash src= https://www.youtube.com/v/sf1drbOSrK8?version=2&autoplay=1&loop=1&controls=0&showinfo=0&autohide=1&cc_load_policy=0&iv_load_policy=3&vq=highres&fs=0&rel=0&start=1&playlist=1 x-x-x-allowscriptaccess="sameDomain" x-x-x-allowscriptaccess="always" allowfullscreen="true" wmode="transparent" x-x-x-allowscriptaccess='sameDomain'>
</div>

<! 동영상 2>
<div class='embed-container' >
<embed type=application/x-shockwave-flash src= https://www.youtube.com/v/sf1drbOSrK8?version=2&autoplay=1&loop=1&controls=0&showinfo=0&autohide=1&cc_load_policy=0&iv_load_policy=3&vq=highres&fs=0&rel=0&start=1&playlist=1 x-x-x-allowscriptaccess="sameDomain" x-x-x-allowscriptaccess="always" allowfullscreen="true" wmode="transparent" x-x-x-allowscriptaccess='sameDomain'>
</div>
</div>

 

위 소스는 동영상 배경깔기 견본 소스입니다.

유튜브 동영상을 배경으로 활용할 수 있습니다.

Full_v9.3 소스와 함께 사용하여야 합니다.

====================================================================================

잠시 주의 사항 한가지 알려드립니다.

소스를 퍼가서 사용해보면

뭔가 다른 현상이 생기는 경우가 있습니다.

예컨데...

배경깔기 소스를 복사하여 본문에 넣었을 경우

또는 다른 게시글에 넣어서 사용했을 경우~

디스플레이가 다르다든지~

또는 디스플레이가 안되거나~

그런 현상입니다.

똑 같은 소스라 할지라도

모든 소스는 독립적으로 고유한 작동 코드를 가지는 경우는 없고~

반드시 다른 소스와 연관성을 지닙니다.

<브라우즈 창>의 크기를 기준으로 어쩌구 어쩌구~

이 기준이 수시로 달라진다는 것~

배경깔기에서의 100%~

그리고 본문에서의 100%~

똑같은 100%지만 결과는 크게 다릅니다.~

기준이 다르게 적용되기 때문에~

이 중요한 이야기를 왜 지금 하는가...

전달의 복잡성을 최대한 피하기 위하여 말하지 않았습니다.

그렇다면 우리가 배우는 소스들의 연관성을 정리해 달라?~ ㅋ~

못합니다.~

레고를 사용하여 만들 수 있는 모든 모양들을

모두 집대성 해달라는 요구와 같습니다.~ ㅎ~

소스를 옯겨가서 응용함에~

또는 여러가지 소스들을 모아서 사용함에~

언제나 이런 복병이 있음을 기억해야 합니다.~

요약정리를 해봅니다.~

소스를 가져가서 사용함에~

원하는 결과가 나오지 않을 경우가 항상 존재합니다.

이유인즉~

실행환경의 차이로 인한 결과입니다.

최근 열정님께서 내가 제공한 소스를

여러 가지 스타일의 게시글 본문에 넣는 것을 보았습니다.

그러나 그 디스플레이 결과는 달랐습니다.

똑같은 소스지만 독립적이지 않기에~

그러한 현상이 생기는 것입니다.

여기까지 주의 사항 전달 마치고요.~

동영상 배경깔기 이어갑니다.~

================================================================================

모니터는 정사각형 모양에서 가로길이가 점점 커지는 직사각형으로 변화되어 왔습니다.

아래 검정색 사각형으로 그 변화된 모양을 그려봤습니다.

요즘은 가로 길이가 긴 와이드 모니터가 대세지만~

정사각형 모니터도 여전히 많이 사용되고 있습니다.

이런 모니터의 모양은 천차만별까지는 아니고요.~

십차백별은 충분히 됩니다.

유튜브 동영상을 배경으로 사용할려고 코딩을 하다보니~

난제가 있었습니다.

위 그림에서 검정박스는 <브라우즈 창>이고~

빨강박스는 동영상 화면입니다.

유튜브 동영상은 영상화면 가로 세로 비율이 16대9 비율입니다.

동영상의 크기는 마음대로 바꿀 수 있지만 이 비율은 못바꿉니다.~

위 그림에서 보시는바와 같이 이 제약은

동영상 배경이 브라우즈 창을 모두 채우지 못하거나

동영상 화면 일부가 보이지 않게 됩니다.

모양이 다른 여러 종류의 컴 모니터에서 브라우즈를 돌려서~

유튜브 동영상배경을 보면~

위 그림 빨강사각형 모양으로 동영상이 보여집니다.~

브라우즈 창의 크기를 축소하여

모양을 정사각형으로 조정하여 보시면

확인이 가능합니다.

결국 완벽한 동영상 배경은 구현하지 못했습니다.

이런 결점을 극복하지 못한 상태에서

동영상을 배경으로 깔아서 사용하며 보급한 점~

죄송하게 생각합니다.

위 동영상 배경 소스는

동영상 두 개가 새로방향으로 보이도록 작성되었는데요.~

이제 그 이유를 짐작하실 수 있을 겁니다.

그러나 이것은 상술한 결점을 보완하는 대안은 아니고~

근본적인 해결안이 현재 없습니다.

다만 배경 동영상을 한개 이상 여러 개를 새로로 줄을 세워서

디스플레이 할 수 있음을 알려드립니다.~

 

 

========================================================================================

배경 겹쳐깔기

배경을 겹쳐깔게 되면

아래에 깔리는 배경은 보이지 않게 됩니다.

그러나 필요에 따라~

배경의 투명도를 조절하여~

여려겹의 배경이 은은하게 겹쳐진 상태로 보이게 하는 기법~

알아두면 유용한 점 매우 많습니다.

투명도 조절 소스

opacity:0.5; filter:alpha(opacity=50);

0.5 값은 0.1부터 0.9까지 숫자가 커질수록 투명에서 불투명으로 강도가 점점 강해집니다.

50 값은 1부터 99까지 숫자가 커질수록 투명에서 불투명으로 강도가 점점 강해집니다.

이 두개의 숫자는 수준을 같이 맞춰주는 것이 좋습니다.

 

반투명 소스를 적용한 견본

<! 배경 - 동영상>
<div style="z-index: -2000; position: absolute; width: 100%; left: 0%; top: 0%; opacity:0.5; filter:alpha(opacity=50); ">

<! 동영상 1 >
<div class='embed-container' >
<embed type=application/x-shockwave-flash src= https://www.youtube.com/v/sf1drbOSrK8?version=2&autoplay=1&loop=1&controls=0&showinfo=0&autohide=1&cc_load_policy=0&iv_load_policy=3&vq=highres&fs=0&rel=0&start=1&playlist=1 x-x-x-allowscriptaccess="sameDomain" x-x-x-allowscriptaccess="always" allowfullscreen="true" wmode="transparent" x-x-x-allowscriptaccess='sameDomain'>
</div>

</div>

<! 배경 - 이미지 >
<img style="z-index: -2000; position: absolute; width:100%; height: 100%; left: 0%; top: 0%; opacity:0.5; filter:alpha(opacity=50); " src=https://t1.daumcdn.net/cfile/cafe/275527445718BD460A >

<! 배경 - 스위시 >

<EMBED style="z-index: -2000; position: absolute; width:100%; height:100%; left: 0%; top: 0%; opacity:0.5; filter:alpha(opacity=50); " scale="exactfit" type=application/x-shockwave-flash src=https://t1.daumcdn.net/cfile/cafe/1338A7584D0F70831E?original wmode="transparent" allowNetworking='internal' x-x-x-allowscriptaccess='sameDomain'>

===================================================================================

겹쳐깔기 순서 결정하기

순서를 결정하지 않으면 서술순으로 깔립니다.~

그러나 순서를 결정하면 서술순은 무시됩니다.

꼅쳐깔기 순서의 결정은 z-index: 입니다.

z-index: -2000;

이 예제의 값은 -2000 인데요.~

이 값이 큰것이 위에 깔리고, 이 값이 같다면 서술순으로 깔립니다.

=======================================================================================

수강생분은 실습과제를 연습방에 올려주세요.~

동영상 배경 1개짜리 게시글 하나~

동영상 배경 2개짜리 게시글 하나~

 

====================================================================================================================