반응형
HTML5 에서 중요한 개념은 HTML로 문서의 구조를 정하고 CSS로 문서의 디자인을 하도록 나누는 것.
이 때 HTML요소에 디자인을 적용하는 부분에서 DOM을 활용하게 된다.
DOM으로 스타일시트를 조작하는 방법
- 인라인 스타일에 접근(style 프로퍼티 사용)
- 외부 스타일시트를 적용(className 프로퍼티 사용)
1. 인라인 스타일에 접근
인라인 스타일이란 객체의 노드에 직접 설정된 스타일
|
1
|
<div style='color:Red'＞붉은 문자입니다.</div>
|
cs |
styletest.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>style프로퍼티</title>
<script type="text/javascript">
function changeStyle(elem, color) {
elem.style.backgroundColor = color;
}
</script>
</head>
<body>
<div onmouseover="changeStyle(this, 'Pink')"
onmouseout="changeStyle(this, 'White')">
마우스를 올려놓으면 색이 변합니다.</div>
</body>
</html>
|
cs |
위와 같이 인라인 스타일 접근 시 프로퍼티명에 대해 주의해야 한다.
CSS속성 이름 중에 하이픈을 포함하는 것(background-color)과 같은 프로퍼티이름은
자바스크립트에서 직접 접근 시 하이픈을 제거하고 카멜표기법으로 고쳐야 한다.
background-color -> backgroundColor
border-top-style -> borderTopStyle
단. float 속성만 예외로 styleFloat으로 사용한다.
자바스크립트에서 이용 가능한 주요 스타일 프로퍼티를 찾아본다.(테두리 관련, 배경, 텍스트 표시. 폰트, 표시/배치 등)
외부 스타일시트 적용하기 className
인라인 스타일 적용은 간단하지만 스타일 속성이 많으면 소스가 혼란스러워진다.
스타일 변경에도 유연하기 어렵다.
따라서 스타일시트는 별도의 파일에서 관리하도록 하는 것이 일반적이다.
이때 외부에 정의된 스타일시트에 접근하기 위해 className속성을 사용하게 된다.
styletest.css 파일 작성
|
1
2
3
4
5
6
7
8
|
.highlight {
background-color: Pink;
}
.normal {
background-color: White;
}
|
cs |
classNametest.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>className프로퍼티</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript">
function changeStyle(elem, clazz) {
elem.className = clazz;
}
</script>
</head>
<body>
<div onmouseover="changeStyle(this, 'highlight')"
onmouseout="changeStyle(this, 'normal')">
마우스를 올려 놓으면 색이 변한다.</div>
</body>
</html>
|
cs |
className 에는 복수의 클래스와도 연결지을 수 있다.
반응형
'교육자료 > Javascript' 카테고리의 다른 글
| 18-5. 이벤트 처리 고급 (0) | 2019.05.13 |
|---|---|
| 18-3. 노드 치환하기 (0) | 2019.05.13 |
| 18-2. 속성 값 가져오기 (0) | 2019.05.13 |
| 18-2. DOM특정 노드 참조하기 (0) | 2019.05.13 |
| 18-1. DOM(Document Object Model) (0) | 2019.05.13 |