[내부평가] target 속성 활용, iframe : 화면구현

이번 내부평가는 화면구현 실습이다.

아래의 화면처럼 왼쪽에는 링크를 두고, 오른쪽에는 해당 사이트가 출력되게 하고자 한다. 웹페이지를 구현하여라.

풀이

링크는 대부분이 알다시피 a이고 target이라는 속성을 가지고 있다.

iframe을 활용하라는 말은 없었으나 이런 유형의 대다수가 iframe을 활용하여 링크를 클릭하였을 때 iframe 내부에 출력되도록 하는 내용이다.

이는 target을 활용하는데, target을 iframe의 name으로 지정하면 해당 iframe에, 아니라면 다양한 _blank , _self 등의 속성으로 지정해서 다른 윈도우에 출력되게 할 수 있다.

구현한 화면부터 보자.

결과화면

왼편에 siteList를, 오른편에 보여주는 view를 배치한 구조이다. iframe은 siteList와 view 두개를 배치한다.

코드

useTarget.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
  <title>target 속성 활용</title></head>
<body>
  <h3>target 속성 활용</h3>
  <hr>
  <div>
    <iframe src="siteList.html" name="siteList" width="300" height="300">
    </iframe>
    <iframe name="view" width="600" height="300">
    </iframe>
  </div>
</body>
</html>

iframe을 div 내부에 siteList, view 2개로 작성해주었다.

siteList.html

<h3>사이트리스트</h3>    
<ul>
    <li><a href="http://www.w3.org" target="view">W3C</a>
    <li><a href="http://www.etnews.com" target="view">전자신문</a>
    <li><a href="http://www.mk.co.kr" target="view">매일경제신문</a>
    <li><a href="http://www.w3.org" target="_blank">새 창에 W3C</a>
</ul>

모두 view iframe에 출력해주고, 마지막 "새 창에 W3C"만 새 창에 출력되도록 _blank 속성값을 넣어준다.

다양한 속성값은 아래에서 정리하겠다.

visual studio code를 이용해서 개발을 진행했고, useTarget.html을 Run(Chrome) 해서 출력되는 화면까지 제출하였다.

target 속성값

_blank

: 새로운 윈도우나 탭에 오픈

_self

: 링크가 위치한 현재 프레임에 오픈, default(생략 시 _self)

_parent

: 현재 프레임의 부모 프레임에 오픈

(여기에선 iframe의 부모, 상위 프레임이 윈도우 전체에 해당하므로 윈도우 전체에 출력)

_top

: 현재 윈도우 전체에서 오픈

간단하게 화면구현 끝!

이 화면구현 부분은 나중에 외부평가에서도 사용하기 때문에 꼭 잘 알아두도록 하자.

평소에 화면구현에 있어서 코드 구조를 잘 파악해두도록 하자.

728x90

저작자표시 비영리 동일조건

'IPP > SW일학습병행 내부평가' 카테고리의 다른 글

[내부평가] JAVA로 개발할 때 성능을 저하시키는 소스코드 : 애플리케이션리팩토링 (0)	2022.02.14
[내부평가] 모듈화, 패키징, 릴리즈 노트 : 제품소프트웨어 패키징 (0)	2021.10.12
[내부평가]통합테스트 수행절차 : 애플리케이션 테스트 관리 (0)	2021.10.08
[내부평가] 결함관리:애플리케이션 테스트 수행 (0)	2021.10.06
[내부평가] 암호화 , 시큐어코딩:소프트웨어 개발 보안 구축 (0)	2021.09.10

𝙸𝚠𝚘𝚛𝚕𝚍𝚃

[내부평가] target 속성 활용, iframe : 화면구현

아래의 화면처럼 왼쪽에는 링크를 두고, 오른쪽에는 해당 사이트가 출력되게 하고자 한다. 웹페이지를 구현하여라.

풀이

결과화면

코드

target 속성값

'IPP > SW일학습병행 내부평가' 카테고리의 다른 글

댓글

티스토리툴바

[내부평가] target 속성 활용, iframe : 화면구현

아래의 화면처럼 왼쪽에는 링크를 두고, 오른쪽에는 해당 사이트가 출력되게 하고자 한다. 웹페이지를 구현하여라.

풀이

결과화면

코드

target 속성값

'IPP > SW일학습병행 내부평가' 카테고리의 다른 글

관련글

댓글

티스토리툴바