728x90
반응형
Javascript를 이용해서 html 글 내용 변경하기
Javascript 를 사용하는 곳과 방법은 다양하다
html 조작, 서버와 통신 , 클릭-타이핑 감지 , 비동기 처리 , 자료 다루기 등이 가능하게 해준다
html에서 javascript를 사용하기 위해서 html 을 하나를 만들어 작성해준다
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Title - javascript</title>
</head>
<body>
<h2 id="hello">안녕하세요!</h2>
</body>
</html>
<script> HTML 조작 하는 코드 </script>
<script>
document.getElementById("hello").innerHTML = "안녕";
</script>
document.getElementById()를 사용해서 아이디의 이름을 가져오는 셀렉터이고
innerHTML 속성은 HTML안에있는 id 값을 변경 해주는 코드이다
이렇게 자바스크립트를 작성하는 방법을 알고
Java Script를 사용해서 다양한 동작을 만들수 있다
폰트 사이즈 변경하는 방법
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Title - javascript</title>
<link href="index-css.css" rel="stylesheet" />
</head>
<body>
<h2 id="hello" style="font-size: 20px">font size : 20px 안녕!</h2>
</body>
</html>
폰트의 사이즈를 변경하기 위해서는 다음과 같은 코드로 변경해주어야한다
document.getElementById("demo").style.fontSize = "x-large";
폰트 사이즈 20px 에서 폰트 사이즈를 14px로 변경 하려고 한다
<script>
document.getElementById("hello").innerHTML = "font size : 14px 안녕!";
document.getElementById("hello").style.fontSize = "14px";
</script>다음과 같이 Id 값을 받아서 스크립트 안에 적용해주면
폰트 사이즈를 원하는 사이즈로 변경이 가능하다
728x90
반응형
'PROGRAMING📚 > WEB📑' 카테고리의 다른 글
| [WEB]JS, Funtion 만들기-동적 UI 만들기 (0) | 2023.09.11 |
|---|---|
| WEB-참고 자료 모음 (0) | 2023.09.11 |
| [WEB]HTML, @keyframes 로 animaiton 만들기 (0) | 2023.09.06 |
| [WEB]HTML, transform사용하기 (0) | 2023.09.06 |
| [HTML]HTML 안에 Video, Audio 적용하는 방법 (0) | 2023.09.06 |
댓글