파일 목록
-
📁 이후
-
📁 jquery
-
📁 js
- ex10-1.html
- ex10-2.html
- ex10-5.html
- ex8-11.html
- Ex8-4.html
- Example8-2.html
- example9-18.html
- example9-19.html
- Examplt8-3.html
- exapmle9-21.html
- practic9-4.html
- practice 9-6.html
- practice8-1-3.html
- practice8-2.html
- practice8-3.html
- practice8-5.html
- practice8-6.html
- practice8-7.html
- practice9-1.html
- practice9-5.html
- practice9-8.html
- test6.html
- Test8.html
- test9.html
- test9_10.html
- test9_3.html
- test_9._0.html
- win1_ob2.html
- 챌린지 copy.html
-
- desktop.ini
- ex10-1,2.html
- ex10-3.html
- ex10-5.html
- Title.png
.jpg){kind=link}
.jpg){kind=link}
.jpg){kind=link}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery.js"></script>
<style>
body {
font: 14px Malgun Gothic, "맑은고딕"
}
</style>
<!--파일 불러오기-->
<script>
function openTextFile() {
let input = document.createElement("input");
input.type = "file";
input.accept = "text/plain";
input.onchange = function (event) {
let file = event.target.files[0]; //선택한 파일명에 불가함 (가져올 객체 피요)
let reader = new FileReader(); // 가져올 객체 만들기
reader.onload = function () { // 불러올 파일 내용 가져오기
output.innerText = reader.result;
};
reader.readAsText(file, "utf8"); //한글 안깨지게 UTF8변환
};
input.click(); // 실행 가능하게 input에 click을 넣어줌
}
</script>
<!--여기부터 제이쿼리-->
<script>
$(function () {
let baseFontSize = 14;
$(".zoomBtnZone Button").on("click", zoomInOut);
function zoomInOut() {
if ($(this).hasClass("zoomOutBtn")) {
if (baseFontSize <= 8) return false;
baseFontSize--;
} else if ($(this).hasClass("zoomInBtn")) {
if (baseFontSize >= 30) return false;
baseFontSize++;
} else {
baseFontSize = 14;
}
$(".fontSize").text(baseFontSize + "px"); //폰트 사이즈 알려주게하는 함수 구간 p fontSize와 연동
$("body").css({ fontSize: baseFontSize + "px" });
}
});
</script>
</head>
<body>
<button onclick="openTextFile()">Open</button><br><br>
<p class="zoomBtnZone">
<button class="zoomOutBtn">-</button>
<button class="OriginBtn">100%</button>
<button class="zoomInBtn">+</button>
</p>
<p class="fontSize">14px</p>
<div id="output">
...
</div>
</body>
</html>