<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글자 크기 조절</title>
<!-- 아이콘 사용을 위한 Font Awesome 6 CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<!-- 구글 웹 폰트 사용을 위한 CDN -->
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/commons.css">
<link rel="stylesheet" type="text/css" href="./css/test.css">
<!-- 스크립트 코드 -->
<script>
//(주의) 자바스크립트 기본 함수명과 충돌할 우려가 있으니 가급적 길게 이름을 지을 것
// - 예) open, close, alert, confirm, ...
//(주의) 미리 태그를 선택하지 말 것
//var tag = document.querySelector(".target");
//console.log(tag);
function small(){
var tag = document.querySelector(".target");
tag.style.fontSize = "12px";
}
function normal(){
var tag = document.querySelector(".target");
tag.style.fontSize = "16px";
}
function big(){
var tag = document.querySelector(".target");
tag.style.fontSize = "24px";
}
</script>
</head>
<body>
<div class="container w-800">
<div class="row">
<h1>글자 크기 조절 문제</h1>
</div>
<div class="row">
<button class="btn" onclick="small();">작게</button>
<button class="btn" onclick="normal();">보통</button>
<button class="btn" onclick="big();">크게</button>
</div>
<div class="row left target">
<p>
스위스에서 오셔서 산새들이 속삭이는 산림 숲속에서 숫사슴을 샅샅이 수색해 식사하고 산 속 샘물로 세수하며 사는 삼십 삼살 샴쌍둥이 미세스 스미스씨와 미스터 심슨씨는 삼성 설립 사장의 회사 자산 상속자인 사촌의 사돈 김상속씨의 숫기있고 숭글숭글한 숫색시 삼성소속 식산업 종사자 김삼순씨를 만나서 삼성 수산물 운송수송 수색 실장에게 스위스에서 숫사슴을 샅샅이 수색했던 것을 인정받아 스위스 수산물 운송 수송 과정에서 상해 삭힌 냄새가 나는 수산물을 수색해내는 삼성 소속 수산물 운송수송 수색 사원이 되서 살신성인으로 쉴새없이 수색하다 산성수에 손이 산화되어 수술실에서 수술하게 됐는데 쉽사리 수술이 잘 안돼서 심신에 좋은 산삼을 달여 슈르릅 들이켰더니 힘이 샘솟아 다시 몸사려 수색하다 삼성 소속 식산업 종사자 김삼순씨와 셋이서 삼삼오오 삼월 삼십 삼일 세시 삼십 삼분 삼십 삼초에 쉰 세살 김식사씨네 시내 스시식당에 식사하러 가서 싱싱한 샥스핀 스시와 삼색샤시참치스시를 살사소스와 슥슥삭삭 샅샅이 비빈 것과 스위스산 소세지를 샤샤샥 싹쓸어 입속에 쑤쎠넣어 살며시 삼키고 스산한 새벽 세시 삼십 삼분 삼십 삼초에 산림 숲속으로 사라졌다.
</p>
<p>
이수지가 저수지에 갔는데 이 수지가 저수지에 간 걸까 저 수지가 저수지에 간걸까 그 수지가 저수지에 간 걸까 하며 이수지는 고민했는데 고민 끝에 이수의 마이웨이를 부르며 불쾌지수가 올라가며 저수지를 떠나 경기도 수지구의 한 학원으로 달려가더니 지수함수를 배워서 잘 사용하여 주식 수지를 맞아 "나 이수지, 바로 고단수지! 수지맞았다!"하며 행복해했다.
</p>
<p>
딸날 돌하르방 코인가를 묻는 너를 보며 난 액자 속 사진을 찢어 버렸다.너와 헤어진 후 힘들어 하는 내게 박 법학사님과 백 법학사님께서 차라리 상담담당 선생님 성 선생님을 추천해 주셨어.그렇게 찾은 러브코치 상담당담 선생님 성 선생님이 내게 말했어.자기는 참치 꽁치찜을 좋아한다고 이게 무슨 헛 소리 인가 싶어.난 청송콩찰떡이 좋다고 했지 시답잖은 농담 속에 서울 찹쌀같이 나눠저 있던 마음이 쿵더더덕 덩기더더덕 녹아 버렸어.너로 인해 고장난 내 마음에 보일러 지금부터 난 난방방법변경을 할거야.공간감각이 사라질 정도로 내 몸에서 합성
</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글자 크기 조절 변형</title>
<!-- 아이콘 사용을 위한 Font Awesome 6 CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<!-- 구글 웹 폰트 사용을 위한 CDN -->
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/commons.css">
<link rel="stylesheet" type="text/css" href="./css/test.css">
<!-- 스크립트 코드 -->
<script>
//함수에서 공용으로 사용할 데이터를 외부에 정의할 수 있다
//(주의) 태그 선택은 안된다(시점이 안맞음)
var size = 16;
function increase(){
if(size >= 40) return;
size++;
changeFontSize(size);
}
function decrease(){
if(size <= 8) return;
size--;
changeFontSize(size);
}
function changeFontSize(size) {
var tag = document.querySelector(".target");
tag.style.fontSize = size+"px";
var button = document.querySelector(".size");
button.textContent = size;
}
</script>
</head>
<body>
<div class="container w-800">
<div class="row">
<h1>글자 크기 조절 문제</h1>
</div>
<div class="row">
<button class="btn" onclick="decrease();">-</button>
<button class="btn size">16</button>
<button class="btn" onclick="increase();">+</button>
</div>
<div class="row left target">
<p>
스위스에서 오셔서 산새들이 속삭이는 산림 숲속에서 숫사슴을 샅샅이 수색해 식사하고 산 속 샘물로 세수하며 사는 삼십 삼살 샴쌍둥이 미세스 스미스씨와 미스터 심슨씨는 삼성 설립 사장의 회사 자산 상속자인 사촌의 사돈 김상속씨의 숫기있고 숭글숭글한 숫색시 삼성소속 식산업 종사자 김삼순씨를 만나서 삼성 수산물 운송수송 수색 실장에게 스위스에서 숫사슴을 샅샅이 수색했던 것을 인정받아 스위스 수산물 운송 수송 과정에서 상해 삭힌 냄새가 나는 수산물을 수색해내는 삼성 소속 수산물 운송수송 수색 사원이 되서 살신성인으로 쉴새없이 수색하다 산성수에 손이 산화되어 수술실에서 수술하게 됐는데 쉽사리 수술이 잘 안돼서 심신에 좋은 산삼을 달여 슈르릅 들이켰더니 힘이 샘솟아 다시 몸사려 수색하다 삼성 소속 식산업 종사자 김삼순씨와 셋이서 삼삼오오 삼월 삼십 삼일 세시 삼십 삼분 삼십 삼초에 쉰 세살 김식사씨네 시내 스시식당에 식사하러 가서 싱싱한 샥스핀 스시와 삼색샤시참치스시를 살사소스와 슥슥삭삭 샅샅이 비빈 것과 스위스산 소세지를 샤샤샥 싹쓸어 입속에 쑤쎠넣어 살며시 삼키고 스산한 새벽 세시 삼십 삼분 삼십 삼초에 산림 숲속으로 사라졌다.
</p>
<p>
이수지가 저수지에 갔는데 이 수지가 저수지에 간 걸까 저 수지가 저수지에 간걸까 그 수지가 저수지에 간 걸까 하며 이수지는 고민했는데 고민 끝에 이수의 마이웨이를 부르며 불쾌지수가 올라가며 저수지를 떠나 경기도 수지구의 한 학원으로 달려가더니 지수함수를 배워서 잘 사용하여 주식 수지를 맞아 "나 이수지, 바로 고단수지! 수지맞았다!"하며 행복해했다.
</p>
<p>
딸날 돌하르방 코인가를 묻는 너를 보며 난 액자 속 사진을 찢어 버렸다.너와 헤어진 후 힘들어 하는 내게 박 법학사님과 백 법학사님께서 차라리 상담담당 선생님 성 선생님을 추천해 주셨어.그렇게 찾은 러브코치 상담당담 선생님 성 선생님이 내게 말했어.자기는 참치 꽁치찜을 좋아한다고 이게 무슨 헛 소리 인가 싶어.난 청송콩찰떡이 좋다고 했지 시답잖은 농담 속에 서울 찹쌀같이 나눠저 있던 마음이 쿵더더덕 덩기더더덕 녹아 버렸어.너로 인해 고장난 내 마음에 보일러 지금부터 난 난방방법변경을 할거야.공간감각이 사라질 정도로 내 몸에서 합성
</p>
</div>
</div>
</body>
</html>
'Javascript' 카테고리의 다른 글
| 정규표현식 (0) | 2023.09.11 |
|---|---|
| 글자수 입력제한 (0) | 2023.09.08 |
| 색상 바꾸기 (0) | 2023.09.06 |
| 이벤트(Event) (0) | 2023.09.05 |
| 함수(Function) (0) | 2023.09.04 |