<head>
<style>
.container {
width: 400px;
}
#content{
width: 100%;
height: 100px;
}
#size{ width: 30px;}
#color{width: 100px;}
</style>
</head>
<body>
<h1>크기, 색상, 내용 지정해서 등록하기</h1>
<div class="container">
크기 : <input type="number" id="size"> px
|
색상 : <input type="text" id="color">
<button id="apply">적용</button>
<hr>
<textarea id="content" rows="5"></textarea>
</div>
<button id="registration">등록</button>
<div id="result"></div>
<script src="../js/5.크기,색상,내용지정해서등록하기.js"></script>
</body>
- 요소 가져오기 id값으로 다 가져옴
- 버튼 눌렀을 때 함수 작성
- value 붙여서 값 자체 넣어주기(안 붙이면 적용 안됨)
const size = document.getElementById("size");
const color = document.getElementById("color");
const content = document.getElementById("content");
const apply = document.getElementById("apply");
const registration = document.getElementById("registration");
const result = document.getElementById("result");
apply.addEventListener("click", () => {
result.style.fontSize = `${size.value}px`
result.style.color = color.value;
})
registration.addEventListener("click", () => {
result.innerText = content.value;
})
