11.Nas_1


새창 작성 수정 목록 링크 Edit G카랜다 HDD HDD HDD 게시물 주소 복사


iframe 사용법

♨ 카랜더 일정 :
  • 링크

  • 첨부

  • 컨텐츠 정보

    본문

    \r\n

    iframe 사용법

    \r\n
    \r\n
    \r\n


    사용법은 간단합니다. 위치하고 싶은 부분에 다음과 같이 삽입합니다.

    =================================//

    <iframe src="아이프레임에 들어갈 페이지" scrolling=no name=ce width=329 height=180 frameborder=0 style="border-width:0px; border-color:white; border-style:solid;"></iframe>

    ================================//

    width와 height는 화면에 보여질 iframe의 가로/세로의 길이입니다. 그리고 src는
    보여질 사이트 또는 페이지의 주소가 됩니다.

    scrolling=no  스크롤 즉 옆에 바가 생기질 않게 no 로 잡아줬군요.
    yes 로 해주시면 스크롤바가 생깁니다.
    auto 일 경우는 아이프레임 안에 내용이 길어지면 자동으로 생기게 됩니다.

    name=ce 아이프레임의 네임을 ce 로 적었군요 어떤 것이라고 해도 상관없습니다.
    링크 거실때 타겟을 아이프레임 네임으로 적어주시기만 하면 됩니다.

    frameborder=0 아이프레임의 테두리 두께를 0 으로 잡아줬군요. 테두리가 안보이죠.
    1 로 잡아주시면 테두리가 나타납니다

    단, iframe는 익스플러어 전용입니다.

    * 아이프레임 으로 페이지를 보여주려고 하실땐
      링크를 target="아이프레임 Name" 이렇게 타겟을 지정해주시면 됩니다.
    위를 예를 들면 name=ce 로 잡아줬기에 링크를 target="ce" 로 잡아주시면
    즉 <a href="yesman.htm" target="ce"> 이렇게 해주시면 아이프레임 안에 yesman.htm 파일이 나타나는 거죠^^
    아이프레임에 링크된 페이지가 나타나는 것이죠..^^

    \r\n
    \r\n

    div 및 iframe 사용법

    |
    \r\n
    \r\n
    \r\n
    \r\n

    <html>
    < head>
    < title>Untitled Document</title>
    < meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
    < /head>

    \r\n

    <body>

    \r\n

    <div style="include-source:url('http://www.naver.com')">
     <iframe src="http://www.naver.com" width="822" height="150"></iframe>
    < /div>

    \r\n

    </body>
    < /html>

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

    < head>
    < table width="100%" height="171">
       <tr>
          <td>
          </td>
       </tr>
    < /table>
    < /head>
    < body>
    < div id="pdacafe" style="position:absolute;left:180px;top:0px;z-index:1">
    < img src="main.jpg">
    < /div>

    \r\n

    <div style="include-source:url("http://signes.com.ne.kr/memo2">
     <iframe src="http://signes.com.ne.kr/memo2" width="600" height="450"></iframe>
    < /div>

    \r\n

    <P ALIGN="CENTER">
    < iframe
    frameborder="0"
    height="450"
    leftmargin="0"  
    marginheight="3"
    marginwidth="3"
    scrolling="no"  
    src="http://signes.com.ne.kr/memo2" topmargin="0"   width="600">
    < /iframe>
    < /P>
    < /body>

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

    배경음악(<EMBED>) 관련 태그

    \r\n

    <EMBED> 태그 설명 및 기본형식

    \r\n


    홈페이지가 뜨자 마자 화면과 함께 배경음악이 나오도록 하는 태그입니다.
    그러나 큰 용량의 음악화일은 자칫 방문자로 하여금 지루함을 주므로 주의할 필요가 있습니다.

    \r\n

    - <EMBED SRC="음악화일명(wav, midi)>

    \r\n


    < EMBED> 태그 옵션
    - <EMBED SRC="음악화일명" autostart=true> : 자동으로 음악이 나오게 하는 옵션입니다.
    - <EMBED SRC="음악화일명" border=2 width=145 height=60 autostart=true> : 화면에서 볼륨이나 멈춤을 제어하는 옵션입니다.

    \r\n


    그림을 html에 삽입하고 그 위에 글을 쓰거나 다른 작은 그림을 겹쳐넣을때
    사용하면 좋습니다. 바로 요런걸 레이어(layer)라고들 하죠~!
    포토샵이나 페인트샵등에서 사용하는 개념하고 비슷하다고 생각하시면 됩니다.
    // 원하는 부분을 아래 태그를 사용해서 써보세요.

    \r\n

    <div id="layer1" style="position:absolute; left:20px; top:20px; width:100px; height:100px; z-index:1; border-width:1px; border-style:none;"><img src="그림.gif"></div>

    \r\n

    <div id="layer2" style="position:absolute; left:20px; top:20px; width:100px; height:100px; z-index:1; border-width:1px; border-style:none;">여기에 글을 씁니다</div>

    \r\n


    // 이건.. 우선 <div> </div>로 레이어를 두개 맹글어서..

    \r\n

    position:absolute로 해서 그 레이어들 위치 고정시켜줍니다.

    \r\n

    left : 왼쪽으로부터의 여백, top: 위쪽으로부터의 여백

    \r\n

    width : 레이어의 폭, height : 레이어의 높이

    \r\n

    즉 이 레이어라는 건 투명한 셀룰러판같은 거랍니다.
    눈에는 안보이지만 그 레이어 위에 원하는걸 넣어주게 되면..
    그 레이어가 있는 위치에 있게 되는거죠.

    \r\n

    그리고 그 레이어 두개를 겹쳐놓으면 차곡차곡 쌓여서 겹쳐보이는거죠.
    그림을 넣은 layer1이 밑에 깔리고, 그 위에 글을 쓴 layer2가 겹쳐지면..
    보일때는 그림위에 글을 쓴것과 같은 효과가 나타난답니다~!

    \r\n

    프레임이란 화면을 한 개 이상으로 쪼갤 때 사용하는 명령어에요.

    \r\n

    프레임 명령으로 화면을 둘로 쪼개면,
    쪼개진 두 개의 화면에는 각자 다른 Html 문서가 쓰이는 거죠.
    즉 프레임으로 쪼개진 만큼의 Html 파일이 필요합니다.

    \r\n

    프레임 구조를 짜는 태그는 <Frame> </Frame>에요.
    프레임 태그는 html 문서에서 <Head> </Head> 사이에 있어야 하구요.

    \r\n

    우선 예를 들어 설명할까요.

    \r\n

    <Frameset Row="50,*" , border="1">
    < Frame Src="test1.html" name = "test1" scrolling = "no" noresize>
    < Frame Src="test2.html" name = "test2" scrolling = "yes">
    < /Frameset>

    \r\n

    이제 각 태그를 설명해 볼께요.

    \r\n

    1> Name : 해당 프레임의 이름이에요. 아무 이름이나 써 주세요.

    \r\n

    2> Scrolling : 화면에 스크롤 막대를 보여 줄 것인지를 설정합니다.
    Auto라고 하면 화면의 분량에 따라 자동으로 생기기도 하고 생기지 않기도 하죠.

    \r\n

    3> Row : 행을 뜻해요. 위와 같은 경우 화면은 가로로 2개로 나뉘는데
    위에서부터 50 픽셀을 하나의 프레임으로 하고
    나머지를 또 다른 프레임으로 만들죠.

    \r\n

    세로로 프레임을 나누고 싶다면 Row 대신 Cols를 쓰면 되요.
    그냥 50이라고 하면 50 픽셀을 말하는 것이고,
    50%라고 하면 웹브라우저 창의 절반을 의미해요.

    \r\n

    4> Border는 프레임의 두께를 설정해요.
    보이지 않게 하려면 0으로 해야겠지요.

    \r\n

    5> Noresize라고 써주면 사용자가 임의로 프레임 크기를 변경할 수가 없어요.

    \r\n


    하이홈 홈빌더에서는 프레임 기능을 지원하지 않아요.
    하지만 익스플로러 5.0에서 지원하는 Iframe을 사용하는 것은 가능합니다.

    \r\n

    <Meta HTTP-Equiv="Refresh" Content="n;URL=">
     일정시간(초)동안 현재화면에서 다른 URL로 이동
     
    < Meta HTTP-Equiv="Refresh" Content="3;http://members.tripod.co.kr/A_Plus"> ~  3초후  A_Plus 사이트로 이동하라. 기존의 홈페이지를 다른 사이트로 옮겼을 때 많이 쓰이지요.
     

    \r\n


    < DIV Align="Center|Left|Right|Justify"> </DIV>
     특정 화면 분할(Division)로  중앙, 좌, 우, 로 정렬시킵니다.
     
    < [안내]태그제한으로등록되지않습니다-BGSound SRC="URL" Loop="n|Infinite">
     소리파일 위치 및 파일명, 반복회수
     

    \r\n

      이렇게 이름을 주었습니다. 그리고 B문서를 작성할 때 링크에 다음 내용을 줍니다. <a href="~~" target="content"> 자 보세요 링크에 타겟은 content 라는 프레임이다~라고 되어있네요 그러므로 이 링크를 누르면 main으로 지정되어있는 B에 나타나는 것이 아니라 content로 지정되어 있는 C에 나타나는 것이죠. 여기의 프레임 네임은 작성자 마음대로 줄 수 있습니다. 참고로 target를 사용할 때 몇가지 예약어(정해져있는 것)이 있습니다. 우리가 링크를 공부할 때  target="_blank"라고 하면 새창이 떳죠? 이것도 하나의 예약어입니다. 자..그럼 예약어를 알아보죠...

    \r\n

    _top
     프레임을 해제하고 링크될 문서를 창 전체로 불러온다.
     
    _parent
     링크될 문서를 링크 전 원래의 프레임인 부모 프레임에 나타낸다. 부모 프레임이 없는 경우는 _self와 같다
     
    _self
     링크될 문서를 원래 위치와 같은 프레임으로 불러온다.
     
    _blank
     이름이 없는 새로운 창을 열고 링크될 문서를 그 창으로 불러온다.
     
     
     <style type="text/css">
     <!--
       a.nls0:link { text-decoration: none; color:#000000; font-size:10pt; }
       a.nls0:visited { text-decoration: none; color:#000000; font-size:10pt; }
       a.nls0:hover { text-decoration: underline; color:#000000; font-size:10pt; }
     -->
     </style>

    \r\n

     class=nls0----->한메일 링크 모습을 보여줍니다~
     

    \r\n


    \r\n
    \r\n
    ###\r\n\r\n■ 11q.kr은 정보를 찾아 공유 합니다. https://11q.kr
    [ 추가 정보 ... 더보기) ]
    뷰PDF 1,2



    office view text|top|||||||||||||||||

    관련자료

    댓글목록

    profile_image

    11q.kr관리자님의 댓글

    11q.kr관리자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 아이피 (192.♡.0.1) 작성일

    <iframe src="아이프레임에 들어갈 페이지" scrolling=no name=ce width=329 height=180 frameborder=0 style="border-width:0px; border-color:white; border-style:solid;"></iframe>

    목록

    새창 작성 수정 목록 링크 Edit G카랜다 HDD HDD HDD 게시물 주소 복사




    Total 1,674 / 5 Page
    [ 모바일빌더_림스 모바일 빌더 설치 문제점 ]

    .1) 홈피 path가 되지 않는다//림스 모바일 빌더 경로 추가$g4['url']="https://11q.kr/web/m";//하단 경로 제거…

    [ 배추 스킨 본문 html 의 photostation embed 삽입 ] 댓글 1

    Shims HomePage[https://11q.kr 홈피]\r\n====================\r\n\n\n[이 게시물은 관리자님에 의…

    [ 하마 반응형 빌더 g4s 빌더 기존 db작업 ]

    ### ■ https://11q.kr는 정보를 찾아 공유 합니다.. ■ https://11q.kr\r\n1) hama를 설치 구동에 문제 없는지…

    [ 배추스킨 cheditor의 그림 내 pc 사진넣기 사진아이콘이 나타나지 않을시 ]

    배추스킨 chedit의 그림 내 pc 사진넣기 > 사진아이콘이 나타나지 않을시\r\n주소창에chrome://plugins/ 넣고( 링크 누…

    [ IPCAMERA FOSCAM 8918W / IPCAM VIEWER 설정 ]

    IPCAMERA FOSCAM 8918W / IPCAM VIEWER 설정\r\n\r\n\n[이 게시물은 관리자님에 의해 2013-11-17 19:…

    [ ds-712+에 ds-107 2대 사용하기 / ds107 /ds712 ]

    iptime 공유기에서 ds-712+에 ds-107 2대 사용하기 / ds107 /ds712아래와 같이 외부포트를 설정하여 원래의 port로 접…

    [ 마운트 검증 3개의 홈피 data 공유 ]

    11q.kr 는 네이버/구글에서 검색 찾아오세요------------------------------------------------------…

    [ Tbl-Black 최근글 헤드스킨 ...설치참고 ]

    Tbl-Black 최근글 헤드스킨AD 아미나0조회 171그누보드2013.11.02 03:28첨부파일 - tbl-black.zip (4.2K) […

    [ ds nas HDD 교체 방법 정보 ]

    http://cafe.naver.com/synologynas/50443\r\n\r\n기존NAS하드 USB 연결 방법 참조\r\nhttp://ca…

    [ 나만의 홈페이지를 무료로 제작하세요 ] 댓글 1

    나만의 홈페이지를직접 제작하세요.무료입니다.내 마음대로 편집. 코딩없는 웹디자인.전세계 58,930,436명의 사용자 커뮤니티.시작하기나만을 위…

    [ [배추빌더5] 시놀로지 nas 서버에 배추빌더 /배추스킨 설치하기 20160429 ] 댓글 3

    시놀로지nas에 배추빌더 설치를 home path 로 설정 설치 가능하게 만들었습니다아래 php.ini를 참조하여config.php를 변경 해당…

    [ 헤놀로지 설치준비)관련 참조자료 EX익스트림매뉴얼 ]

    출처 EX익스트림매뉴얼http://extrememanual.net/2823♠\r\n♠ https://11q.kr는 정보를 찾아 공유 합니다..\…

    [ MySQL 가져오기 에러 오류메시지 해결방법 a6004ns iptime 공유기 phpmyadmin에 data… ] 댓글 1

    MySQL메시지:문서오류메세지아시는분조언좀아래와같이가겨오기하면에러가나서복원을못하는상황입니다조언좀부탁합니다오류SQL질의:----테이블의덤프데이터`…

    [ 자료펌)별도 PHOTO 폴더 piwigo 설치 mount --bind A B 마운트 심 볼릭 링크 방법 ] 댓글 17

    Photo2 piwigo mount --bind 옵션으로 아파치 연결 웹서비스`목적 : 시놀로지 photo station은 섬네일 및 사용사의 …


    ♥간단_메모글♥


    최근글


    새댓글



    PHP 안에 HTML ☞ 홈페이지 화면갱신 시간은 ♨
    ▶ 2024-06-15 22:00:59

    오늘의 홈 현황


    • 현재 접속자♨ 237 명
    • 오늘 가입자※ 1 명
    • 어제 가입자※ 8 명
    • 주간 가입자※ 24 명
    • 오늘 방문자 1,215 명
    • 어제 방문자 1,323 명
    • 최대 방문자 13,042 명
    • 전체 방문자 4,379,682 명
    • 전체 게시물※ 8,635 개
    • 전체 댓글수※ 24,736 개
    • 전체 회원수 11,050 명

    QR코드


    ☞ QR코드 스캔은 kakao앱 자체 QR코드

    알림 0








    최신글↑