Chapter 05. 스타일 다루기. Lesson 01. 스타일 소개

WEB/JQUERY-CONCEPT 2017. 11. 10. 15:33 |

Chapter 05. 스타일 다루기. 


Lesson 01. 스타일 소개


01. 스타일 종류

01. 내부 스타일

02. 외부 스타일

03. 인라인 스타일


common.css

1
2
3
4
5
.content
{
    border: 1px solid #00f;
    text-align: center
}
cs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> // 외부 스타일
    <title></title>
    <link rel="text/css" type="stylesheet" href="common.css"/>
<style> // 내부 스타일
    div
    {
        margin: 30px;
        padding: 30px;
        font-size: 24px;
    }
</style>
</head>
<body>
    <div id="test1" class="content" style="color:#f00"> // 인라인 스타일
        스타일 다루기 테스트입니다.
    </div>
</body>
</html>
cs


02. 스타일을 다루는 방법

정적인 방법

작성한 스타일을 직접 변경하는 방법을 말하며, 스타일 변경 후 문서를 재실행해야 한다.


동적인 방법

웹 문서를 실행한 상태에서 자바스크립트와 jQuery를 이용해 스타일을 다루는 방법을 말한다.

문서를 재실행할 필요가 없다.


03. jQuery를 활용한 스타일 다루는 방법의 특징


특징 01. 스타일 위치와 관계 없이 스타일 속성 접근 가능


- 자바스크립트를 이용하는 경우

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
window.onload = function() 
{
    var content = document.getElementById("test1");
    
    // 인라인 스타일 접근 방법
    // style 속성으로 접근할 수 있는 스타일 속성은 인라인 속성만 접근가능.
    console.log("1. color =", content.style.color);
    
    // 인라인 스타일이 아닌 속성을 접근하는 경우
    // 인라인 속성은 color뿐이기 때문에 외부 속성인 border를 style 속성으로 접근불가능. 
    console.log("2. border =", content.style.border); // null;
    
    // 내부, 외부 스타일 접근 방법
    // 내부, 외부 스타일 속성은 window.getComputedStyle() 메서드를 이용한다.
    console.log("3. border =", window.getComputedStyle(content).border);
}
</script>
cs


출력결과
1. color = rgb(255, 0, 0)
2. color
3. border = 1px solid rgb(0, 0, 255)


- jQuery를 이용하는 경우 // 인라인 스타일 속성인지 아닌지 신경 쓸 필요없이 스타일 속성값을 구할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
<script>
$(document).ready(function()
{
    var $content = $("#test1");
    // 인라인 스타일 접근 방법
    console.log("1. color =", $content.css("color"));
            
    // 내부, 외부 스타일 접근 방법
    console.log("2. border =", $content.css("border"));
});
</script>
cs


특징 02. 스타일 속성 이름을 그대로 사용 가능


- 자바스크립트를 이용하는 경우

1
2
3
4
5
6
7
8
<script>
window.onload=function()
{
    var content = document.getElementById("test1");
    content.style.fontSize="12px"; // font-size와 같이 두 개의 단어로 된 속성은 낙타표기법으로 접근해야 한다.
    content.style.font-size="12px"; // 에러 
}
</script>
cs


- jQuery를 이용하는 경우 // 둘다 사용가능

1
2
3
4
5
6
7
8
9
10
11
<script>
$(document).ready(function() 
{
    var $content = $("#test1");
    $content.css(
    {
        fontSize : "12px",
        border : "4px solid #f00"
    });
});
</script>
cs


특징 03. 여러 스타일 속성값을 쉽게 변경 가능


- 자바스크립트를 이용하는 경우

1
2
3
4
5
6
7
8
<script>
window.onload = function() 
{
    var content = document.getElementById("test1");
    content.style.fontSize = "12px";
    content.style.border = "4px solid #f00";
}
</script>
cs

여러 스타일의 속성값을 변경하는 경우 위의 풀이처럼 style.속성이름 = 값; 방식으로 스타일 개수만큼 작성해야 한다.


- jQuery를 이용하는 경우

1
2
3
4
5
6
7
8
9
10
11
<script>
$(document).ready(function() 
{
    var $content = $("#test1");
    $content.css(
    {
        fontSize : "12px",
        border : "4px solid #f00"
    });
});
</script>
cs

jQuery에서는 리터럴 방식을 이용해 스타일 속성이름과 값을 묶어 한 번에 변경하거나 구할 수 있다.


특징 04. 단위 생략 가능


- 자바스크립트를 이용하는 경우

1
2
3
4
5
6
7
8
<script>
window.onload = function() 
{
    var content = document.getElementById("test1");
    content.style.fontSize = "12px";
    content.style.fontSize = 14; // 적용 안 됨 (단위가 포함된 문자열로 설정해줘야함)
}
</script>
cs


- jQuery를 이용하는 경우

1
2
3
4
5
6
7
8
<script>
$(document).ready(function()
{
    var $content = $("#test1");
    $content.css("fontSize", "12px"); 
    $content.css("fontSize", 14);  // 적용 가능
});
</script>
cs


저작자표시 비영리 동일조건

'WEB > JQUERY-CONCEPT' 카테고리의 다른 글

Chapter 06. 속성 다루기. Lesson 01. 속성 소개. Lesson 02. 핵심 내용  (0) 2017.11.10
Chapter 05. 스타일 다루기. Lesson 02. 핵심내용  (0) 2017.11.10
Chapter 04. 노드 다루기 - 노드 생성/추가/삭제/이동. Lensson 03. 노드 삭제  (0) 2017.11.10
Chapter 04. 노드 다루기 - 노드 생성/추가/삭제/이동. Lensson 03. 노드 삭제  (0) 2017.11.10
Chapter 04. 노드 다루기 - 노드 생성/추가/삭제/이동. Lensson 02. 노드 이동  (0) 2017.11.10
Posted by 너래쟁이
:

티스토리툴바