반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="./css/main.css">
<script src="./js/main.js"></script>
<style>
div {
text-decoration: underline;
}
*.iframe {
/* width: 500px; */
/* height: calc(100vh) !important; */
width: 100% !important;
height: 100vh;
}
</style>
<script>
console.log('직접입력');
//$('.aaa').append('<a>125</a>');
$(document).ready(function() {
$('ul' ).append('<li>Test3</li>' );
$('.aaa').append('<div>125</div>');
// $('.iframe').children('<div>125</div>');
// alert('aaaa');
} );
function show(params) {
console.log(params);
//$('.iframeShow').append('<iframe class="iframe" id = "iframe"src="'+params+ '"frameborder="0"></iframe>');
//$('.iframeShow').append('<div>확인</div>');
$('.iframe').attr('src',params);
}
</script>
</head>
<body>
<div class="aaa">
<a href="https://naver.com">NAVER</a>
<a href="/TEST/about/">About</a>
<a href="/TEST/login/">Login</a>
</div>
<button onclick="show('/TEST/about')">about</button>
<button onclick="show('/TEST/login')">login</button>
<ul>
<li>Test1</li>
<li>Test2</li>
</ul>
<div class="iframeShow">
<iframe class="iframe" id = 'iframe'src="/TEST/login" frameborder="0"></iframe>
</div>
<!-- <div>Hello World!</div> -->
<!-- <div></div> -->
<!-- <img src="./images/logo.png" alt="dreamdog">
<img src="https://mblogthumb-phinf.pstatic.net/MjAxNzExMjRfMTE5/MDAxNTExNTAwMTU5OTAy.o5AjoyDFlU81ZDlnS9R6aMrPVekWFwCM2pd655bybcwg.s11lssgDvgnGOzD1EqsAgtwTCxkHTUDVtpgTxnKdiK4g.JPEG.knightsws/%EB%AC%B4%EB%A3%8C_%EA%B0%95%EC%95%84%EC%A7%80_%EC%95%84%EC%9D%B4%EC%BD%98_8.JPEG?type=w800" alt=""> -->
</body>
</html>반응형
'프론트엔드 > CSS' 카테고리의 다른 글
| 속성 선택자 (0) | 2021.04.13 |
|---|---|
| 가상 클래스 선택자 (0) | 2021.04.13 |
| 기본 선택자 (0) | 2021.04.12 |
| CSS 선언 방식(link, import) (0) | 2021.04.11 |
| CSS 초기화 (크로스브라우저 이용시) 권장 (0) | 2021.04.11 |
