JS를 이용하여 입력 값 폰트 바꾸기
안녕하세요! 코딩팜 주인장 입니다.
오늘은 HTML과 JavaScript를 이용하여
사용자가 입력한 값을 제가 원하는 폰트 키기와 설정을 자유롭게 할수있는
페이지를 만들어 보았습니다.
Fisrt
첫번째로 사용자가 입력한 값을 페이지 화면에 띄어주는 코드 입니다.
function nWrite(){
var uInput = document.getElementById('name').value;
var getOutput = document.getElementById("answer")
getOutput.innerHTML=uInput;
}
<body>
<input type = "text" id ="name" value = "">
<input type = "button" value ="미리 보기" onclick ="nWrite()"><br>
<p id="answer"></p>
<body>우선 위의 <body> 안에 <input> 를 보시면 사용자 입력값을 받는 text type과 button type 으로 두가지가 존재합니다.
그리고 button type같은 경우 onclick을 이용하여 버튼을 눌렀을 경우 nWrite()라는 함수를 실행 시키게 끔 합니다.
그리고 "name"라는 id를 가진 값을 "uInput"이라는 곳에 저장을 합니다.
"answer"이라는 id를 가진 경로를 "getOutput"이라는 곳에 저장을 합니다.
그리고 innerHTML을 이용하여 "uInput"값을 "getOutput"에 삽입을 해줍니다.
그러면 사용자 입력값이 <p>에 삽입이 되면서 출력값이 잘나오는 것이 확인이 됩니다.
innerHTML이란?
innerText와는 달리 innerHTML은 element 안의 HTML이나 XML을 가져옵니다.
Second
이번엔 색상과 폰트 크기 설정 입니다.
function nWrite(){
var uInput = document.getElementById('name').value;
var getOutput = document.getElementById("answer")
getOutput.innerHTML=uInput;
//색상 변경
var getColor = document.getElementById("color").value;
document.getElementById("answer").style.color = getColor;
//폰트 크기 변경
var getFont = document.getElementById("size").value;
document.getElementById("answer").style.fontSize= getFont;
}
<body>
<input type = "text" id ="name" value = "">
<input type = "button" value ="미리 보기" onclick ="nWrite()"><br>
색상:<select id ="color">
<option value="red">red</option>
<option value="blue">파랑</option>
<option value="green">초록</option>
</select><br>
크기:<select id ="size">
<option value="10px">10</option>
<option value="20px">20</option>
<option value="30px">30</option>
<option value="40px">40</option>
<option value="50px">50</option>
</select><br>
<p id ="answer"><p>크게 어려울 것 없습니다.
var getColor = document.getElementById("color").value;option에서 선택된 색깔을 가진 id값을 getColor에 저장 합니다.
바꾸기 편하게끔 id값들은 모두 영어로 저장합니다.
document.getElementById("answer").style.color = getColor;그리고 answer이라는 id의 값의 style.color을 통해 getColor의 색상으로 바꾸어 줍니다.
폰트크기 또한 같습니다.
var getFont = document.getElementById("size").value;option에서 선택된 글자 크기를 가진 id값을 getFont에 저장 합니다.
바꾸기 편하게끔 id값들은 모두 "크기+px"로 저장합니다.
document.getElementById("answer").style.fontSize= getFont;그리고 answer이라는 id의 값의 style.fontsize을 통해 getFont의 크기로 바꾸어 줍니다.
Third
글자들의 특수 효과입니다.
(이게 사실 페이지의 메인기능)
<html>
<head>
<title>폰트 바꾸기</title>
<script language ="javascript">
function nWrite(){
var uInput = document.getElementById('name').value;
var getOutput = document.getElementById("answer")
getOutput.innerHTML=uInput;
//색상 변경
var getColor = document.getElementById("color").value;
document.getElementById("answer").style.color = getColor;
//폰트 크기 변경
var getFont = document.getElementById("size").value;
document.getElementById("answer").style.fontSize= getFont;
//글자 옵션
var arrFont = document.getElementsByTagName("input");
for(i=0;i<arrFont.length;i++){
if(arrFont[i].checked){
if(arrFont[i].value == "취소선"){
getOutput.innerHTML = getOutput.innerHTML.strike();
}
else if(arrFont[i].value == "크게"){
getOutput.innerHTML = getOutput.innerHTML.big();
}
else if(arrFont[i].value == "작게"){
getOutput.innerHTML = getOutput.innerHTML.small();
}
else if(arrFont[i].value == "두껍게"){
getOutput.innerHTML = getOutput.innerHTML.bold();
}
else if(arrFont[i].value == "기울임"){
getOutput.innerHTML = getOutput.innerHTML.italics();
}
else if(arrFont[i].value == "위첨자"){
getOutput.innerHTML = getOutput.innerHTML.sub();
}
else if(arrFont[i].value == "아래첨자"){
getOutput.innerHTML = getOutput.innerHTML.sup();
}
else if(arrFont[i].value == "소문자로"){
getOutput.innerHTML = getOutput.innerHTML.toLowerCase();
}
else if(arrFont[i].value == "대문자로"){
getOutput.innerHTML = getOutput.innerHTML.toUpperCase();
}
}
}
}
</script>
<title> Option</title>
<body>
<input type = "text" id ="name" value = "">
<input type = "button" value ="미리 보기" onclick ="nWrite()"><br>
색상:<select id ="color">
<option value="red">red</option>
<option value="blue">파랑</option>
<option value="green">초록</option>
</select><br>
크기:<select id ="size">
<option value="10px">10</option>
<option value="20px">20</option>
<option value="30px">30</option>
<option value="40px">40</option>
<option value="50px">50</option>
</select><br>
<input type="checkbox" value="취소선" >취소선
<input type="checkbox" value="크게">크게
<input type="checkbox" value="작게">작게
<input type="checkbox" value="두껍게">두껍게
<input type="checkbox" value="기울임">기울임<br>
<input type="checkbox" value="위첨자">위첨자
<input type="checkbox" value="아래첨자">아래첨자
<input type="checkbox" value="소문자로">소문자로
<input type="checkbox" value="대문자로">대문자로
<p id="answer"></p>
</body>
</head>
</html>전체 코드 입니다.
var arrFont = document.getElementsByTagName("input");모든 <input>을 배열순서로 arrFont에 저장합니다.
for(i=0;i<arrFont.length;i++){
if(arrFont[i].checked){
if(arrFont[i].value == "취소선"){
getOutput.innerHTML = getOutput.innerHTML.strike();
}
else if(arrFont[i].value == "크게"){
getOutput.innerHTML = getOutput.innerHTML.big();
}
else if(arrFont[i].value == "작게"){
getOutput.innerHTML = getOutput.innerHTML.small();
}
else if(arrFont[i].value == "두껍게"){
getOutput.innerHTML = getOutput.innerHTML.bold();
}
else if(arrFont[i].value == "기울임"){
getOutput.innerHTML = getOutput.innerHTML.italics();
}
else if(arrFont[i].value == "위첨자"){
getOutput.innerHTML = getOutput.innerHTML.sub();
}
else if(arrFont[i].value == "아래첨자"){
getOutput.innerHTML = getOutput.innerHTML.sup();
}
else if(arrFont[i].value == "소문자로"){
getOutput.innerHTML = getOutput.innerHTML.toLowerCase();
}
else if(arrFont[i].value == "대문자로"){
getOutput.innerHTML = getOutput.innerHTML.toUpperCase();
}
}
}for문을 이용하여 checked = 체크된 박스인 경우를 비교하여 맞는 함수를 적용시켜 줍니다.
글꼴 변경 함수 참조 -> https://ckim0531.tistory.com/entry/JavaScript-2-자바스크립트-객체-내장-객체
[JavaScript] 2. 자바스크립트 객체 - 내장 객체
String 객체 ▷ 문자의 모양을 지정하거나 문자열을 다루기 위한 객체 ＊ new 연산자를 사용하지 않고 문자열을 그냥 변수에 할당 ＊ 속성 ☞ length → 문자열의 길이를 반환 ＊ 메서드 ☞ 글꼴 관
ckim0531.tistory.com
오늘은 이렇게 JavaScript를 이용하여 간단하게 입력받아 입력값을 맘대로 폰트설정하는
페이지를 만들어 보았습니다. 다음엔 또 어떤 재미난 코딩을 할지 벌써 기대가 됩니다.
모두들 코딩마스터가 될 때까지 코딩팜은 무럭무럭 성장하여 누구나 수확할 수 있는
블로그가 되겠습니다. 감사합니다.
🚨코딩 3대 행동 강령 🚨
🚩남의 코드를 그대로 보고 친 코드는 내코드가 아니다!
🚩어제 짠 나의 코드는 오늘이 되면 까먹을 수있으니 주석설명을 습관화 하자!
🚩항상 누군가가 코드를 보았을때 이해할 수 있게 코딩을 하자!
-블로그 주인장-
잘못된 정보가 있다면 언제든지 댓글로 알려주시면 감사하겠습니다!
- 블로그 주인장 -