728x90
반응형
자바스크립트 기술에 대해 알 수 있는 사이트
https://developer.mozilla.org/ko/
MDN Web Docs
The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
developer.mozilla.org
DOM (Document Object Model)
HTML 또는 XML document와 상호작용하고 표현하는 API입니다.
DOM은 browser에서 로드되며, 노드 트리(각 노드는 document의 부분을 나타냅니다)로 표현하는 document 모델입니다(예, element, 문자열, 또는 코멘트).
트리구조 형식으로 인식해서 화면에 표현해주는 API
컴퓨터는 인터프리터로 파악을 함 html 전체 안에 태그를 트리로 인식 > 화면에 배치를 함 > 텍스트 노드를 인식
dom_style1
hr: hrizontal line
인라인 스타일: 우선적용됨
<p style="color: blue;">이것은<span id="mySpan" style="color: red;"></span> 문장입니다</p>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function change(){
// id가 mySpan인 객체찾기
var span = document.getElementById('mySpan');
span.style.color = 'green'; // 글자색 green 적용
// CSS 속성 font-size를 자바스크립트에서는 fontSize 카멜(낙타등)네이밍적용
span.style.fontSize = '30px'; //글자크기는 30픽셀 적용
span.style.display = 'block'; //블록 박스 형식으로 변경
span.style.width = '6em'; // 박스의 폭은 6배 글자 크기
// 3픽셀 점선 magenta 색상 테두리 적용
span.style.border = '3px dotted magenta';
// 상하좌우 여백 20px 적용
span.style.margin = '20px';
}
</script>
</head>
<body>
<h3>CSS 스타일 동적 변경</h3>
<hr>
<p style="color: blue;">이것은<span id="mySpan" style="color: red;">문장입니다</span> </p>
<input type="button" value="스타일 변경" onclick="change()">
</body>
</html>
dom_style2
클릭을 하면 style="transform: rotate(90deg);" 이 클릭할수록 90도씩 누적되고 360도가 되면 0이 된다.
파일 압축 해제 : Explore.compact Folders
728x90
반응형
'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글
| [JAVASCRIPT] AJAX _2 (0) | 2023.08.03 |
|---|---|
| [JQUERY] 플러그인 (0) | 2023.08.02 |
| JAVA 설치 / 아파치 톰캣 (0) | 2023.08.01 |
| [백엔드]OS 단축키 및 네트워크 IP (0) | 2023.08.01 |
| 비주얼 스튜디오 코드 외전 (0) | 2023.07.31 |