고정 헤더 영역
상세 컨텐츠
본문
우리가 매일 접속하는 웹사이트는 크게 3가지 요소로 구성된다. ‘HTML(Hyper Text Markup Language)’, ‘CSS(Cascading Style Sheets)’, ‘자바스크립트(Javascript)’다. HTML은 웹페이지의 큰 뼈대를 제공하고, CSS는 색깔이나 글씨체와 같은 디자인 요소를 관리한다. 자바스크립트는 크로스 플랫폼(cross platform), 객체지향 스크립트 언어로 웹페이지의 동작을 담당한다. 예를 들어 자바스크립트를 이용하면 ‘버튼을 클릭하면 밑에 날짜를 보여줘’라는 식의 명령을 내릴 수 있다.
[네이버 지식백과]
iframe으로 브라우저에 다른 내용 보여주기
브라우저의 특정 영역을 설정해서 또 다른 콘텐츠를 보여줄 수 있다
[형식]
<iframe>최신 브라우저 설치 요망 </iframe>
iframe_src속성
HTML iframe은 웹 페이지 내에 웹 페이지를 표시하는 데 사용
src속성으로 iframe안의 콘텐츠 지정
<iframe src="test09-1.htm"></iframe>
iframe_사이트 연결, 가로 /세로 지정
가로, 세로 크기 지정 width="n" height="n"
사이트 연결할 때
iframe_ 이미지 불러올 때
내 컴퓨터에 저장된 이미지 불러올 때
<iframe src="img\avocado.png" width="600" height="700"></iframe>
iframe_ 동영상을 불러올 때
내 컴퓨터에 저장된 동영상 불러올 때
<iframe src="img\night.mp4" width="900" height="400"></iframe>
iframe_ 링크 걸기
iframe안에서 링크 열기
iframe에 name속성으로 값을 지정하고 그 값을 a태그에 target의 값으로 설정하면
링크가 그 iframe안에 열린다
※<nav>는 메뉴 영역을 의미하는 태그
<iframe src="test01.htm" width=800" height="500" name="if-box01"></iframe>
<nav> <nav>는 메뉴영역을 의미하는 태그
<a href="test01.htm" target="if-box01"> test01.htm </a>
<a href="test02.htm" target="if-box01" > test02.htm </a>
<a href="test03.htm" target="if-box01"> test03.htm </a>
<a href="test04.htm" target="if-box01"> test04.htm </a>
<a href="test05.htm" target="if-box01"> test05.htm </a>
<a href="test06.htm" target="if-box01"> test06.htm </a>
<a href="test07.htm" target="if-box01"> test07.htm </a>
</nav>
iframe_테두리 없애기
기본적으로 iframe 주위에는 테두리가 있는데
테두리를 제거하려면 style속성을 추가하고 CSSborder속성을 사용
style="border:none;"
ㅣ읽느라 수고 많으셨어요~ㅣ
부족한 글을 읽어주셔서 감사드립니다
아직 부족한 게 많으니
틀린 곳이 있다면
조언의 말씀 꼭 부탁드립니다!!!!
반응형
