href 태그법,iframe 태그법

제목: href 태그법, iframe 태그법    

 [링크된 사이트(게시판) 바로가기 또는 바로보이기 tag 연습]

 A.(href 태그법)-[클릭버턴]눌러야 링크된 사이트(게시판)로 가게 하는 법.

 B.(iframe 태그법)-[클릭버턴] 누를 필요없이 링크된 인터넷 사이트(게시판)가 바로 열리게 하는 법
=====================================================================================

A. href 태그법-[클릭버턴]눌러야 링크된 사이트(게시판)로 가게 하는 법.

[사용형식] tag는 html 모드에서 작성되어야 하며, tag 내부의 옵션은 시작과 끝을 표시하는 형태로 짝을 맞춰 작성됩니다. 

A-기본형식1  <a href="?" target=blank> xx바로가기 </a>

A-기본형식2  <a href="?" target=blank> <font color =green> <STRONG> xx바로가기 클릭</STRONG> </font>  </a>

A-기본형식3  <a href="?" target=blank> <b><font color=red size=3>  oo 여기를 클릭 </font></b></a>

설명:  (참고로, 메일로 보낼 때도 이 tag가 적용됩니다. 즉, 메일에서도 사용할 수 있습니다.)

        ? 부분에 링크할 자료의 URL 주소를 대입하시면 됩니다.  

         target=blank 를 지정하면 해당 작업을 마치면 즉, 닫기[x]하면,  이전 사이트로 돌아올 수 있습니다.(원위치로 돌아감)

           즉,  어떤 사이트에 들어가서 작업하다 해당 사이트를 닫기[x]하거나, 동영상 그만보기 즉 닫기[x]를 하면

          다시 이전 작업 장소로 원위치 합니다.(target=blank 의 효과) 

          만약,  target=blank 를 지정하지 않으면, 해당 게시물을 닫기[x]하면 해당 작업 이전 사이트도 같이 닫히게 됩니다.

                  원위치로 돌아갈 수 없어 불편합니다.             

                  따라서, (원위치로 돌아가기) : target=blank 를 작성(적용)하기를 추천합니다.                            

        <font color =green>은 [클릭버턴]의 색깔을 지정하는 것입니다. blue 나 red로 변경할 수도 있습니다.
          < STRONG> 는 글자를 굵게 강조하는 tag입니다.  </STRONG>는 강조 tag 설정 완료 표시입니다.

          < b> <font color=red size=3> 글씨 크기 3호 적색 </font></b> 에서 size=숫자가 클수록 글씨가 커집니다.

          <b> 는 bold체(굵은글씨)로 시작하라는 명령어이며 <font 색갈 지정을 시작한다는 표시이며,

          </font>는 색갈 설정 완료 표시. </b> bold체(굵은글씨) 설정 완료 표시 입니다.

           만약 <b><font color=blue size=2> 글씨크기 2호 청색 </font></b> 작성하면  
           color= 는 blue 로 글씨 크기는 3호보다 작은 2호 크기입니다.

           xx바로가기  또는 oo 여기를 클릭라고 쓴 부분은 tag되는 사이트에 대한 설명으로 ㅇㅇ사이트 이름이나 주소를 써줍니다.  

            Edit 모드에서 'xx바로가기 클릭'  또는 'oo 여기를 클릭' 등 입력한 내용으로 보이게 됩니다.

(A-형식 예1) HTML 모드에서 <a href="www.ahnlab.com/" target=blank>  안랩 바로가기 클릭 </a> 로 작성하면

(결과, edit 모드): (A-형식 예1)는  안랩 바로가기 클릭   요렇게 보입니다.

                         이 부분을 클릭하면 www.ahnlab.com 사이트 즉 안랩 홈페이지로 들어가게 됩니다.  

                         안랩 홈페이지 들어간 다음 해당 사이트를 닫기[x]하면,

                         다시 이전 작업 장소로 원위치 합니다.(target=blank 의 효과) 
 

(A-형식 예2) HTML 모드에서

<a href="www.ahnlab.com/" target=blank> <font color =green> <STRONG> 안랩 바로가기 클릭</STRONG> </font> </a>

로 작성하면 그 결과는 다음과 같습니다.

 (결과, edit 모드): (A-형식 예2)는 초록 글씨로   안랩 바로가기 클릭  요렇게 보입니다.

                         이 초록색 글씨 부분을 클릭하면 www.ahnlab.com 사이트 즉 안랩 홈페이지로 들어가게 됩니다. 

                         안랩 홈페이지 들어간 다음 해당 사이트를 닫기[x]하면,

                         다시 이전 작업 장소로 원위치 합니다.(target=blank 의 효과)  

(A-형식 예3)  HTML 모드에서

<a href="www.cha.go.kr/" target=blank> <b><font color=red size=3> www.cha.go.kr/  문화재청바로가기 </font></b></a>

로 작성하면 그 결과는 다음과 같습니다.

(결과, edit 모드): (A-형식 예3)은 빨간글씨(size=3)로 www.cha.go.kr/ 문화재청바로가기  요렇게 보입니다.  

                        이 바로기를 부분을 클릭하면 www.cha.go.kr/ 사이트 즉 문화재청 홈페이지로 들어가게 됩니다. 

                        문화재청 홈페이지로  들어간 다음 해당 사이트를 닫기[x]하면,

                        다시 이전 작업 장소로 원위치 합니다.(target=blank 의 효과) 

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

 B.(iframe 태그법)-[클릭버턴] 누를 필요없이 링크된 인터넷 사이트(게시판)가 바로 열리게 하는 법

     iframe tag 는 html 웹 문서 안에 또 다른 웹문서, 뮤직비디오, 동영상 등을 담을 수 있는 태그입니다.

    여기서는  인터넷 게시판에서 [클릭버턴] 없이 바로 링크된 사이트가 바로 열리게 하는 법에 중점을 두어 설명합니다. 

    하지만, 어떤 사이트는 바로 열리지 않을 수도 있으며, 메일로 보낼 때도 이 tag가 안 먹힙니다.

   (주의: 어떤 사이트에서 iframe tag가 허용되지 않았을 경우에는 iframe tag가 실행되지 못합니다.   

              이럴 경우에는 앞서 사용한 href tag를 이용하면 됩니다.)  

[iframe 태그 작성법] tag는 html 모드에서 작성되어야 함

iframe 형식 

B-형식1    <iframe src="?"> target=blank </iframe>

B-형식2   <iframe src="?" width=800 height=1000> target=blank </iframe>

B-형식3  동영상 바로 보이기  <iframe src="?" width=800 height=600> target=blank </iframe>

B-형식4-A  동영상 바로 보이기 (전체화면 fullscreen 허용 tag)  -

             <iframe src="?" width=800 height=600 frameBorder=no allowfullscreen> target=blank </iframe>  - 추천 tag-

B-형식4-B) (size 작은)동영상 바로 보이기 + fullscreen 허용. - 추천 tag-

<IFRAME  src="?" frameBorder=no width=544  height=306 scrolling=no allowfullscreen="" allow="autoplay; encrypted-media"> target=blank </IFRAME>

B-형식5. 유튜브 동영상 보이기 HTML  tag
형식5-A  기본형식 <iframe width="640" height="360" src="?"  frameBorder=no allowfullscreen> </iframe>  - 추천 tag -
형식5-B 유튜브동영상 자동실행+무한 반복  tag 
<iframe width=640 height=360 src="유튜브주소?amp;autoplay=1&loop=1;playlist=유튜브뒷주소" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

 설명:  "?" 에서  ? 자리에  URL주소를 대입하면 됩니다)  (단, 유튜브 자동실행,무한반복 tag용 옵션에 쓰인 ?은 그대로 둡니다)

          width=800 height=1000 의 숫자는 게시물(보여 주는) 화면 크기를 지정한 것입니다.

        일반적인 동영상은  세로보다 가로폭이 크므로   width=800 height=600 로 크기를 지정해줍니다.

          - 화면 size을 너무 작게 지정하면 화면내용의 그림이 왜곡되고

            아래쪽 slide 막대나 우측에 보이는 scroll 막대를 움직여야하므로,  이 크기가 무난할 것입니다.

         target=blank 지정하면, 해당 작업을 마치면(닫기[x]하면)  이전 사이트로 돌아올 수 있습니다.(원위치로 돌아감)

       만약,  target=blank 를 지정하지 않으면, 해당 게시물을 닫기[x]하면 해당 작업 이전 사이트도 같이 닫히게 됩니다.

                 원위치로 돌아갈 수 없어 불편합니다. 따라서, (원위치로 돌아가기) : target=blank 를 작성(적용)하기를 추천합니다.  

                 하지만 target=blank 의 효과는  유트브 등 일부 사이트에서는 의미없는 경우도 있습니다.

       autoplay=1 는 자동실행(Autostart) 되며, loop=1 는 무한 반복합니다.  

        autoplay 옵션 지정이 없으면 ▷  눌러야  영상 시작되며, loop= 지정안되면 1회만 실행 합니다.

       frameBorder=no 는 영상 테두리(경계) 없이, allowfullscreen 는 fullscreen 지원한다는 의미입니다.

      여기서는  인터넷 게시판에서 [클릭버턴] 없이 바로 링크된 사이트가 바로 열리게 하는 법에 중점을 두어 설명합니다. 

      하지만, 어떤 사이트는 바로 열리지 않을 수도 있으며 화면 속의 ▷ 표시를 눌러야 영상이 나오기도 합니다.

      유트브 영상 자동실행 및 무한 반복의 경우 tag 작성 시에는   

      scr= "유튜브주소?amp;autoplay=1&loop=1;playlist=유튜브뒷주소" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen    (주의: 주소와 ?사이는 띄어쓰지 않고 붙여 씁니다)

     이렇게 설정하면 (선전없이) 유튜브 영상이 자동 실행되며,  해당 영상이 끝나면 유튜브 광고 화면이 안나오고 지정한 영상이 반복됩니다.
       autoplay=0 으로 설정하면 play버턴▷ 눌러야 play되며, loop=0 으로 설정하면 1회만 play(실행)되고 종료합니다. 

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

(B-형식 예1) HTML 모드에서

<iframe src="http://www.heritage.go.kr/heri/idx/index.do> target=blank </iframe> 로 작성하면 그 결과는 다음과 같습니다.

(결과, edit 모드): 크기를 지정해주지 않아서, 불려나온 화면 속의 그림들이 왜곡되어 보이고 화면 전체가 다 보이지 않아 불편합니다.

(B-형식 예2) <IFRAME src="http://www.heritage.go.kr/heri/idx/index.do"  target=blank height=800 width=1000 ></IFRAME>

로 작성하면 그 결과는 다음과 같습니다

(결과, edit 모드): 화면이 좀 더 키지고 내부 그림의 왜곡도 없습니다. height=800 width=1000  size 추천  

만약, (B-형식 예2)에서 <IFRAME src="http://www.heritage.go.kr/heri/idx/index.do"  target=blank height=315 width=420 ></IFRAME>로  size를 축소하여 작성하면 그 결과는 다음과 같습니다.

(결과, edit 모드): 설명 - 화면을 크기를 너무 작게 지정하였기에 화면이 작아지고 그림들이 왜곡되어 보입니다.

                          화면 아래쪽 slide 막대나 우측의 scroll 막대를 움직여야하므로 불편합니다.
                          따라서 크기는 height=800 width=1000  정도의 설정이 무난합니다.

 

(B-형식 예3)  동영상 바로보이기 tag 작성법입니다. (주의: iframe tag를 막은 곳에서는 동영상이 보이지 않습니다.)

HTML 모드에서 iframe  tag 로 작성한  '국민건강체조 동영상 및 동작설명 메뉴얼 다운로드' 영상 보기 tag와 그 결과입니다.

<iframe src="http://serviceapi.nmv.naver.com/flash/convertIframeTag.nhn?vid=0B75CDF029F1BA1521073F4C32C0FD5447B8&outKey=V124eb70d3559f275f94f994d9e29bba102c3a7eb36cfc26adbfb994d9e29bba102c3&width=544&height=306 " width=800 height=600> target=blank </iframe>

작성한 결과는 다음과 같습니다. 하지만 전체화면으로 볼 수가 없어 불편합니다. 

(B-형식4  동영상 바로 보이기 (전체화면 fullscreen 허용 tag)입니다.

<iframe src=http://serviceapi.nmv.naver.com/flash/convertIframeTag.nhn?vid=0B75CDF029F1BA1521073F4C32C0FD5447B8&outKey=V124eb70d3559f275f94f994d9e29bba102c3a7eb36cfc26adbfb994d9e29bba102c3& width=800 height=600 frameBorder=no  allowfullscreen> target=blank </iframe>

 (결과, edit 모드):  width="800" height="600" 크기의 화면이 나옵니다만, 화면 아래 우측에  fullscreen(전체화면) 보기 화살표

                       가 있어 이를 클릭하면 fullscreen(전체화면)으로 볼 수 있습니다. 화면이 커서 약간 부담스럽습니다.

B-형식 예4-B) (size 작은)동영상 바로 보이기 + fullscreen 허용. - 추천 tag-

<IFRAME  src="http://serviceapi.nmv.naver.com/flash/convertIframeTag.nhn?vid=0B75CDF029F1BA1521073F4C32C0FD5447B8&outKey=V124eb70d3559f275f94f994d9e29bba102c3a7eb36cfc26adbfb994d9e29bba102c3" frameBorder=no width=544  height=306 scrolling=no allowfullscreen="" allow="autoplay; encrypted-media"> target=blank </IFRAME>

 

 (예4-B결과, edit 모드):

 이처럼 적당한 width=544  height=306 크기의 화면이 나오며, 화면 아래 우측에  fullscreen 확장 화살표시가 나옵니다. 

 해당 동영상이나 해당 사이트 닫기[x]하면, 다시 이전 작업 장소로 원위치 합니다.(target=blank 의 효과) 

 하지만 target=blank 의 효과는  유트브 등 일부 사이트에서는 의미없는 경우도 있습니다.

B-형식5 (유튜브)동영상 바로 보이기 + fullscreen 허용. 

유튜브 자체에서 제공한 추천 tag는 다음과 같습니다. 

<div style="position:relative;height:0;padding-bottom:56.25%"><iframe src="유튜브주소" style="position:absolute;width:100%;height:100%;left:0" width="640" height="360" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen> </iframe></div>

그러나, 보다 간단한 아래 tag 양식도 추천합니다. 

형식5-A <iframe width="640" height="360" src="?"  frameBorder=no allowfullscreen> target=blank </iframe>  입니다. - 추천 tag-
유튜브주소를 ? 자리에 입력합니다. target=blank는 의미가 없어

예5-A)  <iframe width="640" height="360" src="https://www.youtube.com/embed/UgwIHtwx-2U?ecver=2"  frameBorder=no allowfullscreen > target=blank </iframe>  

예5-A 결과 Edit 모드):  이처럼 적당한 크기의  화면이 나오며, 화면 아래 우측에  fullscreen 확장표시 □가 나옵니다. 

 

형식5-B 유튜브동영상 자동실행+무한 반복 HTML  tag - 추천 tag-

<iframe width=640 height=360 src="유튜브주소?amp;autoplay=1&loop=1;playlist=유튜브뒷주소" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

(주의: 주소와 ?사이는 띄워쓰지 않고 붙여 씁니다.)  

예5-B) ?amp;autoplay=1&loop=1;playlist=유튜브 뒷주소 를 추가하면 자동실행, 무한반복합니다.

<iframe width=640 height=360 src="https://www.youtube.com/embed/UgwIHtwx-2U?amp;autoplay=1&loop=1;playlist=UgwIHtwx-2U" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> 

예5-B 결과 Edit 모드): 동영상 화면이 autoplay="1" 로 설정되어 자동실행되며, 끝나면 loop="1" 설정되어 무한반복됩니다.

                                     화면 아래 우측에  fullscreen 확장표시 □가 나옵니다. 

    (선전없이) 유튜브 영상이 자동 실행되며, 해당 영상이 끝나면 유튜브 광고 화면이 안나오고 지정한 영상이 반복됩니다.
    만약, autoplay=0 으로 설정하면 play버턴▷ 눌러야 play되며, loop=0 으로 설정하면 1회만 play(실행)되고 종료합니다.  


이상  href 와 iframe tag 작성법을 알아 보았습니다.

참고로 음악, 그림등을 가져 올 때는 저작권 관련 문제의 소지가 있을 수 있으니 참고 하시기 바랍니다. 

-끝-