반응형

JavaScript에서 Scope(스코프)는 변수가 유효한 범위를 나타내는 개념입니다.
Scope는 변수가 선언되었을 때 해당 변수가 어디에서 접근 가능한지를 결정합니다.
JavaScript는 두 가지 Scope 타입을 가지고 있습니다

  • Global Scope
  • Local Scope

Global Scope

Global Scope(전역 스코프)는 프로그램 전체에서 접근 가능한 스코프입니다.
전역 스코프에서 선언된 변수는 어느 곳에서든지 접근할 수 있습니다.
전역 스코프에서 변수를 선언하려면, 함수나 블록 안에서 선언하는 것이 아니라 스크립트의 가장 바깥쪽에 선언해야 합니다.

// Global Scope에서 변수를 선언합니다. 
var globalVariable = 'Hello World!'; 
function sayHello() { 
  console.log(globalVariable); 
} 
sayHello(); // 'Hello World!'

위의 예시에서 globalVariable 변수는 함수 안에서 선언되지 않았으므로 전역 스코프에서 선언된 것입니다. 함수 sayHello()에서도 이 변수를 접근할 수 있습니다.

Local Scope

Local Scope(지역 스코프)는 함수나 블록 안에서 선언된 변수가 해당 함수나 블록 안에서만 접근 가능한 스코프입니다. 함수나 블록 안에서 선언된 변수는 해당 함수나 블록 밖에서는 접근할 수 없습니다.

function sayHello() {
// Local Scope에서 변수를 선언합니다. 
    var localVariable = 'Hello World!';
    console.log(localVariable); 
} 
sayHello(); // 'Hello World!' 
console.log(localVariable); // ReferenceError: localVariable is not defined

위의 예시에서 localVariable 변수는 함수 sayHello() 안에서 선언되었으므로 해당 함수 안에서만 접근할 수 있습니다. 함수 밖에서 이 변수를 접근하려고 하면 ReferenceError가 발생합니다.

변수 Shadowing

JavaScript에서는 Local Scope 안에서 동일한 이름을 가진 변수를 다시 선언할 수 있습니다. 이를 변수 Shadowing이라고 합니다. Local Scope 안에서 새로운 변수가 선언되면, 이 변수는 해당 Local Scope에서만 유효하며, 해당 Scope에서는 이 변수의 이름으로 원래의 변수에 접근할 수 없습니다.

var globalVariable = 'Hello World!'; 
function sayHello() { 
    // Local Scope에서 globalVariable 변수를 shadowing합니다. 
    var globalVariable = 'Hi there!'; 
    console.log(globalVariable); 
} 
sayHello(); // 'Hi there!' 
console.log(globalVariable); // 'Hello World!'

위의 예시에서 sayHello() 함수 안에서 globalVariable 변수를 shadowing하여 새로운 값을 할당했습니다. 함수 밖에서 globalVariable 변수는 여전히 'Hello World!' 값을 유지하고 있습니다.
하지만 함수 안에서 선언한 globalVariable 변수는 함수 밖에서는 접근할 수 없습니다. 함수 밖에서 globalVariable 변수를 사용하려면, 함수 안에서 globalVariable 변수를 shadowing하지 않도록 조심해야 합니다.

var globalVariable = 'Hello World!';

function sayHello() {  
var globalVariable = 'Hi there!'; // 변수 shadowing  
console.log(globalVariable); // 'Hi there!'  
}

sayHello(); // 'Hi there!'  
console.log(globalVariable); // 'Hello World!'

위의 예시에서 sayHello() 함수 안에서는 globalVariable 변수를 새로 선언하여 'Hi there!' 값을 할당했습니다.
함수 밖에서는 여전히 'Hello World!' 값을 유지하고 있습니다.

자바스크립트에서 스코프는 변수와 함수의 유효 범위를 결정하는 중요한 개념입니다.
이를 잘 이해하고 활용하면 코드의 가독성과 유지보수성을 높일 수 있습니다.
스코프의 개념은 자바스크립트뿐만 아니라 다른 프로그래밍 언어에서도 공통적으로 사용되는 개념이기 때문에 꼭 기억하고 학습하시길 바랍니다.

반응형
반응형
ㅇㅇ

파이썬의 정규식 중 간단하고 가장 많이 사용되는 정규식을 말씀드리려고 합니다.

또 한 예제를 통해 re ( regular expression) 사용법도 살펴보시면 좋습니다.

 

 

1. ' . ' → 하나의 문자를 의미합니다.

  • 예를들어 L.VE 라고 한다면 이는 LIVE , LOVE등이 가능할 것 같습니다.
1
2
3
4
5
6
7
8
9
import re
#★★★★★★★★★★          BLOG          ★★★★★★★★★★
p = re.compile("L.VE")
m = p.match("LOVE")
if m :
    print("해당 {0}은 정규식표현의 글자에 포함할 수 있습니다.".format(m.string))
else :
    print("해당 글자는 매칭되지 않습니다.")
 

2. ' ^ ' → 문자열의 시작을 의미합니다.

  • 예를들어 ^AR 이라고 한다면 이는 ARCHER, ARK, ARRIVE 등이 가능합니다.
1
2
3
4
5
6
7
8
import re
#★★★★★★★★★★          BLOG          ★★★★★★★★★★
p = re.compile("^AR")
m = p.match("ARK")
if m :
    print("해당 {0}은 AR의 시작부분을 포함하고 있습니다.".format(m.group()))
else :
    print("해당 글자는 매칭되지 않습니다.")

3. ' $ ' → 하나의 문자를 의미합니다.

  • 마찬가지로 예를들어 ER$ 라고한다면 이는 LOSER, WINNER 등이 가능합니다.
1
2
3
4
5
6
7
8
import re
#★★★★★★★★★★          BLOG          ★★★★★★★★★★
p = re.compile("ER$")
m = p.search("LOSER")
if m :
    print("해당 {0}은 ER의 마지막부분을 포함하고 있습니다.".format(m.group()))
else :
    print("해당 글자는 매칭되지 않습니다.")

 

이와같이 사용이 가능합니다.

import re를 이용한 정규식 사용방법

1. p = re.compile( "원하는 정규식 작성" )

2. m = p.match( "비교할 문자열")

MATCH()는 주어진 문자열이 처음부터 일치하는지 확인을 합니다.

또는

2. m = p.search( "비교할 문자열" )

SEARCH()는 주어진 문자열 중에 일치하는것이 있는지 확인합니다.

 

반응형
반응형

 자바를 이용한 간단한 구구단게임을 만들어 봅시다.

 

1번

쉬운 구구단게임 만들기

1. 컴퓨터가 1~9까지의 숫자 2개를 랜덤으로 생성합니다.

2. 생성한 숫자 2개의 곱셈을 미리합니다.

3. 사람에게 랜덤 생선된 2개 숫자의 곱셈을 물어봅니다.

4. 만약 사람의 정답과 컴퓨터의 정답이 같다면,

정답이라 출력하고 그게 아니라면 오답이라는 문구와 문제,정답을 함께 출력합니다.

1번 풀이 바로가기

2번

1번 + 오답일때만 문제를 반복생성하도록 합니다.

1. 컴퓨터가 1~9까지의 숫자 2개를 랜덤으로 생성합니다.

2. 생성한 숫자 2개의 곱셈을 미리합니다.

3. 사람에게 랜덤 생선된 2개 숫자의 곱셈을 물어봅니다.

4. 만약 사람의 정답과 컴퓨터의 정답이 같다면,

정답이라 출력하고 그게 아니라면 오답이라는 문구와 문제,정답을 함께 출력합니다.

5. 만약 오답을 제출할 경우, 새로운 문제를 냅니다.(재귀함수는 사용하지 않습니다)

 

2번 풀이 바로가기

 

3번

1번 + 5번의 문제만 생성된다.  5개의 문제가 완료되면 점수로 환산해서 나온다.

1. 컴퓨터가 1~9까지의 숫자 2개를 랜덤으로 생성합니다.

2. 생성한 숫자 2개의 곱셈을 미리합니다.

3. 사람에게 랜덤 생선된 2개 숫자의 곱셈을 물어봅니다.

4. 정답/오답을 출력합니다.

5. 5번의 문제를 내준 뒤, 사람이 맞춘 문제들을 점수화해서 점수를 출력합니다.

3번 풀이 바로가기

 

 

 

 

 

 

 

 

 

 

 

 

<1번 정답>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
package jan_1.selftest;
 
import java.util.Random;
import java.util.Scanner;
 
public class MulGame {
    int x; // 랜덤으로 생성 할 숫자 
    int y;
    int z;  // 사람이 적을 답
    int answer; // 계산된 답
    Scanner scan = new Scanner(System.in); // 정답을 받아냄
    Random random = new Random(); // 랜덤숫자 생성
    
    MulGame(){
        System.out.println("구구단 게임을 시작합니다.");
        makeMul();
    }
    
    void makeMul(){
        x = random.nextInt(9)+1;
        y = random.nextInt(9)+1;
        answer = x*y; // 시스템 정답 저장
        System.out.println(x+"X"+y+"= ?");
        z = scan.nextInt(); // 사람이 적은 정답 저장
        if(z == answer) { 
            System.out.println("정답입니다!");
        }else {
            System.out.println("오답입니다!");
        }
    }
    
    public static void main(String[] args) {
        MulGame mulgame = new MulGame();
    }
}
 

<2번정답>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
package jan_1.selftest;
 
import java.util.Random;
import java.util.Scanner;
 
public class MulGame {
    int x; // 랜덤으로 생성 할 숫자 
    int y;
    int z;  // 사람이 적을 답
    int answer; // 계산된 답
    Scanner scan = new Scanner(System.in); // 정답을 받아냄
    Random random = new Random(); // 랜덤숫자 생성
    
    MulGame(){
        System.out.println("구구단 게임을 시작합니다.");
        makeMul();
    }
    
     public void makeMul(){
        while(true) {
            x = random.nextInt(9)+1;
            y = random.nextInt(9)+1;
            answer = x*y; // 시스템 정답 저장
            System.out.println(x+"X"+y+"= ?");
            z = scan.nextInt(); // 사람이 적은 정답 저장
            if(z == answer) { 
                System.out.println("정답입니다!");
                break;
            }else {
                System.out.println("오답입니다! \n"
                        +x+"X"+y+"의 값은 "+answer+" 입니다.\n"
                                + "새로운 게임을 시작합니다");
            }
        }
    }
    
    public static void main(String[] args) {
        MulGame mulgame = new MulGame();
    }
}
 

 

 

<3번 정답>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
package jan_1.selftest;
 
import java.util.Random;
import java.util.Scanner;
 
public class MulGame {
    int x; // 랜덤으로 생성 할 숫자 
    int y;
    int z;  // 사람이 적을 답
    int answer; // 계산된 답
    int i; // 문제반복
    int score; // 점수
    Scanner scan = new Scanner(System.in); // 정답을 받아냄
    Random random = new Random(); // 랜덤숫자 생성
    
    MulGame(){
        System.out.println("구구단 게임을 시작합니다.");
        makeMul();
    }
    
     public void makeMul(){
        while(i < 5) {
            i++;
            x = random.nextInt(9)+1;
            y = random.nextInt(9)+1;
            answer = x*y; // 시스템 정답 저장
            System.out.println(x+"X"+y+"= ?");
            z = scan.nextInt(); // 사람이 적은 정답 저장
            if(z == answer) { 
                System.out.println("정답입니다!");
                score +=  20;
            }else {
                System.out.println("오답입니다!");
            }
        }
        if(score == 100) {
            System.out.println("만점입니다! 대단합니다!");
        }else {
            System.out.println("최종점수는 100점 만점 중 "+score+" 점입니다."
                    + "\n아쉽게만점을 받지 못했습니다.\n"
                    + "분발하세요!");
        }
    }
    
    public static void main(String[] args) {
        MulGame mulgame = new MulGame();
    }
}
 
반응형

'Language' 카테고리의 다른 글

알아두면 좋은 CSS 선택자  (0) 2020.08.27
[CSS] CSS 기초설명, Cascading 이란?  (0) 2020.08.27
[HTML] HTML 기초설명  (0) 2020.08.27
[자바스크립트] 클로저( Closure )함수 쉽게 이해시켜드립니다  (0) 2020.08.27
[자바스크립트]Virtual Dom이란?  (0) 2020.08.27
반응형

알쓸(알아두면 쓸만한) CSS 선택자 

CSS선택자 하면 떠오르는 선택자는 id, class 정도가 있고 자식, 자손에 대한 기초를 알고 있으실 겁니다.

하지만 꼭 알아두면 좋은 선택자 30가지에 대해서 전부 알고계시지는 않을겁니다.

(만약 알고계신다면... 돌아가셔도 좋습니다 ㅠ.ㅠ)

저도 열심히 암기하기위해 정리하고 있습니다.

그럼 지금부터 정리한 것들을 조금씩 설명 드리겠습니다.

1. *

  • 별표는 전체요소를 대상으로 합니다. ( reset.css 등에서 많이 보았습니다. 다만 사용하지말라고 권하네요)

2. #

  • id선택자입니다.
  • 가장 흔하고 쉽게 사용됩니다.

3. .

  • class를 선택할때 사용합니다.

4. li a

  • 자손 선택자 입니다.
  • 더 상세히 작업해야 할 때 이 선택자를 사용합니다.

5. a

  • 태그 선택자입니다. 
  • 특정 태그 전체를 대상으로 해야할때 사용합니다.

6. a:link / a:visited

  • 클릭하기전 상태와 크릭한 후 상태를 대상으로 하기위해 :link , :visited 가상클래스를 사용합니다.

7. +

  • 인접 선택자입니다.
1
2
3
4
5
6
7
<ul>
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
</ul>
<p> P 태그 </p>

이렇게 적용된 모습을 확인 할 수 있습니다.

 

8. >

  • >는 직계 자식만 선택합니다.

예를 들면

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<header>
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
            <li>
                E
                <ul>
                    <li>E-1</li>
                    <li>E-2</li>
                    <li>E-3</li>
                </ul>
            </li>
        </ul>
</header>

이러한 마크업일때 , CSS를 

1
2
3
header ul{
    border: 1px solid red;
}

이렇게 코드를 작성 한다면, 

이렇게 li의 자식인 ul까지 border가 생성됩니다.

그렇지만 

1
2
3
header>ul{
    border: 1px solid red;
}

이렇게 작성한다면 

직계 자식만 CSS가 적용된 것을 볼 수 있습니다.

 

9. ~

  • 형제 선택자는 인접선택자와 비슷하지만 덜 엄격합니다.
  • 인접선택자는 바로 뒤에오는 첫번째 요소만 적용되지만, 형제선택자는 뒤에오는 모든 요소를 선택합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
    ul~p{
        color:green;
    }
</style>
<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
</ul>
<p>AA</p>
<p>BB</p>
<p>CC</p>

 

10. [title]

  • 속성 선택자입니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        a[title]{
            color:green;
        }
    </style>
</head>
<body>
    <a href="#" title="naver">naver</a>
    <a href="#">daum</a>
    <a href="#">google</a>
</body>
</html>

 

11. [href=""]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        a[href="https://google.com"]{
            color:green;
        }
    </style>
</head>
<body>
    <a href="https://naver.com" title="naver">naver</a>
    <a href="https://daum.net">daum</a>
    <a href="https://google.com">google</a>
</body>
</html>

 

href속성으로도 찾을 수 있습니다. 하지만 이렇게 적용하기에는 너무 융통성이 없습니다.

그렇기 때문에 우리는 약간의 정규식 표현을 사용할 수 있습니다.

 

12. [href*=""]

  • *는 입력값이 속성값안 어딘가에 있는것을 의미합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        a[href*="google"]{
            color:green;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <a href="https://naver.com" title="naver">naver</a>
    <a href="https://daum.net">daum</a>
    <a href="https://google.com">google</a>
</body>
</html>

* => 0개 이상의 문자를 포함합니다. a*b 는 ab, abb, aab, aababa 등을 포함합니다.

 

13. [href^="http"]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        a[href^="http"]{
            color:green;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <a href="https://naver.com" title="naver">naver</a>
    <a href="https://daum.net">daum</a>
    <a href="https://google.com">google</a>
</body>
</html>

문자열의 시작을 표기하는 정규표현식에서 흔하게 사용됩니다.

href^="http" => http로 시작하는 href를 의미하게 됩니다.

^ = 문자열이나 행의 처음을 의미합니다.

 

 

14. [href$=""]

  • $는 ^와는 반대로 문자열이나 행의 끝을 의미합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        a[href$="net"]{
            color:green;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <a href="https://naver.com" title="naver">naver</a>
    <a href="https://daum.net">daum</a>
    <a href="https://google.com">google</a>
</body>
</html>

15. :checked

  • 이 가상 클래스는 체크박스나 라디오버튼처럼 체크가되는 사용자 인터페이스 요소만을 대상으로 합니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        input[type=radio]:checked+label{
            color:red;        
 
        }
    </style>
</head>
<body>
    <form action="/" method="post">
        <input type="radio" name="checkRadio" value="checkRadio" />
        <label>체크하면 색깔 바뀜!</label>
    </form>
</body>
</html>

 

체크 전

 

체크 후

16. ::before / ::after

  • befor 과 after 가상요소는 선택된 요소 주변에 콘텐츠를 생성합니다.
  • 이 클래스는 여러가지 방법으로 활용할 수 있습니다.
  1. gnb 구분 bar 넣기
  2. 앞, 뒤에 추가적인 정보를 넣기
  3. float 해제
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        ul{
            list-style:none;
        }
        nav li {
            float: left;
            margin-right: 30px;
        }
        nav li:before{
            content:"our ";
        }
        nav li:after{
            content:"ㅣ";
            padding-left:30px;
        }
        nav li:after:first-child{
            content:"";
        }
       nav ul:after{
            display:block;
            clear:both;
            content:"";
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li>Home</li>
            <li>Address</li>
            <li>Location</li>
        </ul>
    </nav>
</body>
</html>

17. :hover

  • 사용자가 요소위에 커서를 올릴때 스타일을 적용합니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        p:hover{
            color:red;
            cursor:pointer;
        }
    </style>
</head>
<body>
    <p>마우스를 올리면 색깔이 변함</p>
</body>
</html>

 

18. :not

  • 특정 태그만 제외한 모든 요소를 선택하고 싶을때 사용합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        p:not(#number){
            color:red;
        }
    </style>
</head>
<body>
    <p id="number">1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
</body>
</html>

 

 

19. ::가상요소

  • 첫번째줄이나 첫글자와 같이 요소 일부분에 스타일을 적용할 수 있습니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        p::first-letter{
            margin-left: 30px;
            font-size:24px;
            font-weight:bold;
            color:blue;
        }
        p::first-line{
            color:green;
        }
    </style>
</head>
<body>
    <p>가상요소는 ::로 표현합니다 <br />
    꼭 block요소에 적용해야합니다.</p>
</body>
</html>

 

 

20. :nth-child(n) / :nth-last-child(n)

  • 여러 요소중에서 특정 요소만 지목하는 방법입니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        li:nth-child(7){
            color:red;
        }
    </style>
</head>
<body>
    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
        <li>E</li>
        <li>F</li>
        <li>G</li>
        <li>H</li>
        <li>I</li>
        <li>J</li>
        <li>K</li>
    </ul>
</body>
</html>

 

이렇게 숫자를 사용하여 표현할 수 있고 만약 짝수번째마다 필요하다면

1
2
3
4
5
    <style>
        li:nth-child(2n){
            color:red;
        }
    </style>

 

이렇게 사용도 가능합니다.

 :nth-last-child(n)는 

 

21. :nth-of-type(n) / :nth-last-of-type(n)

 

  • child요소가 아닌 type을 선탁할 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        ul:nth-of-type(3){
            border: 2px solid black;   
        }
    </style>
</head>
<body>
    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
        <li>E</li>
        <li>F</li>
        <li>G</li>
        <li>H</li>
        <li>I</li>
        <li>J</li>
        <li>K</li>
    </ul>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ul>
        <li>ㄱ</li>
        <li>ㄴ</li>
        <li>ㄷ</li>
        <li>ㄹ</li>
        <li>ㅁ</li>
    </ul>
</body>
</html>

 

:nth-of:type도 마찬가지로 거꾸로 순서가 적용되는 :nth-last-of-type(n)도 사용 가능합니다.

 

22. :first-child / :last-child

  • 요소의 첫번째 또는 마지막 자식만 대상으로 삼을 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        ul{
            list-style:none;
        }
        ul li{
            border-top: 1px solid black;
            text-align:center;
        }
    </style>
</head>
<body>
    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
    </ul>
</body>
</html>

뭔가 어색함을 느씰 수 있습니다.

A위에 선이 없다면 더욱 예뻐보일것 입니다.

우리는 A에게 따로 class를 주고 border: none; 을 사용해도 되지만

1
2
3
4
5
6
7
8
9
10
11
12
    <style>
        ul{
            list-style:none;
        }
        ul li{
            border-top: 1px solid black;
            text-align:center;
        }
        li:first-child{
            border:none;
        }
    </style>

이렇게 first-child를 사용하여 테두리를 없앨 수 있습니다.

반응형

'Language' 카테고리의 다른 글

[Java] 자바를 이용한 구구단 게임 만들기  (0) 2020.08.27
[CSS] CSS 기초설명, Cascading 이란?  (0) 2020.08.27
[HTML] HTML 기초설명  (0) 2020.08.27
[자바스크립트] 클로저( Closure )함수 쉽게 이해시켜드립니다  (0) 2020.08.27
[자바스크립트]Virtual Dom이란?  (0) 2020.08.27
반응형

CSS란?

  • CSS는 Cascading Style Sheet 의 약자입니다.

 

CSS적용 방법

CSS를 적용하는데에는 3가지 방법이 있습니다.

  1.  Inline Style Sheet 
    • HTML 태그의 style속성을 사용하여 CSS코드를 넣는 방법입니다.
    • 단점으로는 꾸미는데 한계가 있고, 재사용이 불가능 합니다.

    •  

      1
      <p style="color:red;"> Shnav.tistory.com </p>
  2.  Internal Style Sheet
    • 문서 head안 <style>과</style> 사이에 CSS코드를 넣는 방법입니다.
    • HTML문서안의 여러 요소를 꾸밀수 있는것이 장점이지만, 다른 HTML문서에 적용할 수 없다는 단점이 있습니다.
    • 1
      2
      3
      p{
          color:red;
      }
  3.  Linking Style Sheet
    • 이는 별도의 CSS파일을 만들어 HTML문서와 연결하는 방법 입니다.
    • 어러 HTML문서에 사용할 수 있습니다.
    • 1
      <link rel="stylesheet" href="css/style.css">

 

Cascading ?

  • HTML요소는 하나 이상의 스타일에 영향을 받을 수 있는데 어떤 스타일을 적용 받을지에 대한 우선순위가 정해져야합니다. 이를 Cascading이라고 합니다.

캐스캐이딩 (cascading)은 다음 3가지에 의해 결정 됩니다.

  1. CSS가 어디에 선언되어있나 (중요도)
  2. 대상을 명확하게 지정할수록 높은 우선순위를 가지고 있습니다 (명시도)
  3. 코드 순서

중요도

  •  태그내에서 style속성
  •  <head> 의 <style> 
  •  <head>의 <style>안에 @import
  •  <link>로 연결된 CSS 파일
  •  <link>로 연결될 CSS파일 내의 @import

<link>로 연결된 css파일보다 head내의 style이 우선순위가 더 높습니다.

html요소 style속성을 사용하는것보다 style이나 외부 css파일로 빼는것이 더 좋습니다.

※ style이나 외부 css파일로 빼는 이유는 다음과 같습니다.

  • 스타일과 마크업을 명확하게 구분합니다 (마크업에 관한 설명은 해당 링크를 타고 들어가시면 확인이 가능합니다)
  • 선택자를 사용하면 페이지 여러요소에 규칙을 적용하여 관리를 개선하며 중복을 피할 수 있습니다.

 

명시도

  • !important
  • id 선택자
  • class 선택자
  • 태그 선택자

!important는 명시도 자체와 아무 관련이 없지만, 명시도에 직접적인 영향을 미칩니다.

!important는 남용하면 안됩니다.

※ !important를 남용하게되면 캐스캐이딩을 깨트려 디버깅을 어렵게 합니다.

 

 

명시도 계산법

!important (10000) > inline-style(1000) > id(100) > class(10) > tag(1) > * (0)

계산법에 의하면 !important는 나와있지않지만 어찌되었든 가장 강력하게 적용됩니다.

inline-style은 흔히 우리가 태그에 style 속성을 부여하여 css를 입혔을때를 의미합니다.

 

몇가지 예를 들어보겠습니다.

div p span 3개의 요소이므로 3점 입니다.
#nav ul li id1개와 요소2개 이므로 102점 입니다.
#nav .photo li id 1개와 class 1개 그리고 요소 1개 이므로 111점 입니다.
#header h1 .logo id 1개와 요소 1개 그리고 class 1개이므로 111점 입니다.
.recipe a:hover class 1개와 가상클래스 1개 요소 1개 이므로 21점입니다.

 

코드 순서

1
2
3
4
5
6
7
8
9
<style>
  p {
    color: red;
  }
  p {
    color:blue;
  }
</style>
<p>Hello</p>

 

이러한 상태에서 Hello는 어떤 색깔이 될까요?

이는 늦게 선언된 스타일이 우선 적용 됩니다. 즉 Hello는 파란색이 됩니다.

 

 

반응형

'Language' 카테고리의 다른 글

[Java] 자바를 이용한 구구단 게임 만들기  (0) 2020.08.27
알아두면 좋은 CSS 선택자  (0) 2020.08.27
[HTML] HTML 기초설명  (0) 2020.08.27
[자바스크립트] 클로저( Closure )함수 쉽게 이해시켜드립니다  (0) 2020.08.27
[자바스크립트]Virtual Dom이란?  (0) 2020.08.27
반응형

HTML이란?

- HTML은 HyperText Markup Language의 약자이며, HTML 문서라도 불립니다.

- HTML은 HTML 태그를 이용하여 웹페이지를 만드는 데에 사용하는 언어이며 매우 쉽게 배울 수 있습니다.

- HTML이 가지고 있는 각각의 태그와 속성들은 이미 다 정의되어있어 우리는 몇 가지의 태그들과 속성만 안다면 간단하게 웹 페이지를 만들 수 있습니다.

HTML5?

- HTML5는 HTML언어의 최신 표준 권고안입니다.

- HTML5는 기존 XML이나 XHTML과는 다르게 문법적으로 매우 유연한 언어입니다.

- HTML5는 오류를 쉽게 처리할 수 있게끔 몇 가지 기본원칙을 바탕으로 설계되어있습니다.

  또한 새로운 폼 속성들을 추가하여, 폼 검증과 디자인이 간소화되었습니다.

- HTML5는 플러그인 없이도 비디오나 오디오를 비롯한 미디어 재생이 가능합니다.

HTML 태그?

- HTML 태그는 웹페이지의 디자인이나 기능을 결정하는 데 사용됩니다.

- HTML 태그는 < >로 감싸서 표현합니다.

- HTML태그는 보통 시작 태그와 종료 태그 이렇게 한쌍으로 구분됩니다.

( 종료 태그는 뒤에 /가 붙습니다.)

- 대부분의 태그가 이렇게 한 쌍으로 구분되어 있지만 시작 태그만 있고 종료 태그가 없는 태그들이 존재합니다.

(Ex. <hr> , <img>, <br> 등)

- HTML 태그는 inline 요소와 block 요소로 나누어집니다.

 

block 태그 inline 태그
자신의 내용으로 한 라인을 독점해서 출력합니다. 구성요소의 역할을 합니다. 
모든 인라인태그를 포함 할 수 있습니다. 항상 block 태그 안에 포함되어 있으며, 기본적으로 컨텐츠가 끝나는 지점까지의 넓이를 가지고 있습니다.
가로폭 전체의 넓이를 가지는 직사각형 형태가되며 block태그 다음에는 줄바꿈이 이루어집니다. 다음에는 줄바꿈이 없고 우측에 바로 이어져서 표시가 됩니다. 자식으로 같은 inline 태그를 가질 수 있지만 block 태그를 자식으로 가지지 못합니다.
 vertical-align 이나 text-align이 적용되지 않습니다. width, height값이 적용되지 않습니다.
block요소의 대표적인 태그 <div> inline요소의 대표적인 태그 <span>

※ 종료 태그가 없더라도 HTML 문서를 제대로 표현해 줄 수도 있습니다. 

    하지만 종료 태그가 없다면 예상치 못한 오류나 결과가 발생할 수 있으니 빠트리지 않고 작성하는 게 좋습니다.

 

HTML 요소 구조

- HTML요소는 여러 가지의 속성을 가질 수 있으며 이러한 속성은 해당 요소에 대한 추가적인 정보를 제공합니다.

- HTML요소는 시작 태그 내에서만 존재할 수 있습니다.

- HTML요소는 속성 이름과 속성 값으로 표현됩니다.

1

2

3

4

5

6

7

8

9

10

11

12

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>제목</title>

</head>

<body>

    <p class="attr">

        속성을 가진 태그

    </p>

</body>

</html>

 

여기서 class는 속성 이름, attr은 속성 값이 됩니다.

- HTML요소의 속성 값은 항상 큰 따옴표 , 또는 작은 따옴표로 감싸서 사용해야 정확한 값을 저장할 수 있습니다.

속성이름 설명
id 유일한 식별자(id)를 요소에 지정한다. 중복 지정이 불가하다.
class 스타일시트에 정의된 class를 요소에 지정한다. 중복 지정이 가능하다.
hidden css의 hidden과는 다르게 의미상으로도 브라우저에 노출되지 않게 된다.
style 요소에 스타일을 지정한다.
title 요소에 관한 제목을 지정한다. (툴팁이라 불린다)

 

 

 

HTML의 기본 구조

  •  HTML의 기본 구조는 HTML 태그 사이에 헤드, 바디로 나누어집니다.
  • <HEAD> 태그 사이에는 META, TITLE, SCRIPT, STYLE, LINK 등의 태그들로 이루어져 있습니다.
  • 이러한 태그들은 메타데이터라고 표현하며, 메타데이터는 웹 상에 직접적으로 표현되지 않는 정보들을 의미합니다.

META 태그

  • 메타태그는 웹 서버와 웹 브라우저간에 상호 교환되는 정보를 정의하는 데 사용됩니다.
  • HTML 문서 내에 디자인에는 전혀 영향을 미치지 않고 문서가 어떠한 내용을 담고 있는지,
  • 누가 언제 만들었는지 등의 특성을 담고 있습니다.

LINK 태그

  • 링크 태그는 문서간 연결하거나 외부 리소스 연결시 사용됩니다.

TITLE 태그

  • 웹 페이지의 제목을 나타내는 데에 사용됩니다. 웹페이지 본문에서는 보이지 않고 브라우저의 탭에서 확인할 수 있습니다.

SCRIPT 태그

  • 스크립트 태그는 자바스크립트와 같이 클라이언트 사이드 스크립트를 정의하는 데에 사용됩니다.
  • 스크립트 태그 내부에 직접적으로 코드를 작성하거나 src 속성을 사용하여 외부 스크립트 파일을 참조할 수 있습니s다.

STYLE 태그

  • CSS를 담는 태그입니다.

 

 

<BODY> 태그 사이에는 본격적인 내용들이 존재하게 됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>제목</title>
</head>
<body>
    <h1>제목을 나타내는 태그 h1</h1>
    <div>
        <p>
            단락을 나타내는 태그 p 와 
            그리고 inline 태그를 감싸주는 가장 많이 쓰이는 태그 div
        </p>
    </div>
</body>
</html>
BODY영역의 구조

 

HTML5의 BODY영역안에는 위 사진과 같이 화면을 나누기 위해 시맨틱 태그를 이용합니다.

※ 시맨틱 태그란?

  • 시맨틱은 '의미의', '의미론적인'이라는 뜻입니다.
  • 즉 HTML5에 도입된 시맨틱 태그는 개발자와 브라우저에게 의미 있는 태그를 제공합니다.
  • 일반적인 <div> 태그만 보고는 이 태그 안에 들어갈 내용의 의미를 알 수 없는데 이런 태그를 non-semantic 태그라고 합니다.
  • 반면, <header>나 <footer> 태그를 보면 이 태그 안에 들어갈 내용을 유추할 수 있습니다.
  • 예를 들면 <nav> 태그 안에는 컨텐츠를 담고 있는 문서를 서로 간에 연결할 링크들이 담겨있을 것이고 <aside>는 컨텐츠와는 별개의 내용 또는 광고가 들어갈 것이라는 것을 유추할 수 있습니다.

HTML5 이전에는 <header>가 아닌 <div id="header"><div id="head"><div id="hd"> 이런 식으로  개발자가 직접 정의할 수 있었기 때문에 여러 가지 방법들로 표현이 가능했지만 HTML5에서는 시맨틱 태그를 제공하여 HTML 태그의 의미를 명확하게 할 수 있다는 것입니다.

 

HEADER 

  • header는 주로 사이트의 가장 상단부분에 있으며 웹사이트 이름, 내비게이션, 헤드라인 그리고 검색등으로 구성된다.
  • header안에는 address태그나, footer태그, 또다른 header 태그는 둘 수 없습니다.

NAV

  • 목적지로 이동할 수 있는 링크들을 모아놓은 영역입니다.
  • ul, li, a 등의 태그들을 여전히 사용해야 합니다.

SECTION

  • 내용적 흐름과 구조를 만들기 위해 내용을 나누는 용도입니다. (관련있는 내용들끼리 묶어줍니다)
  • 같은 성격의 내용들은 section태그에 묶어서 표시합니다.
  • 섹션은 독립적인 영역이라 섹션 내에서 header, footer 사용이 가능합니다. 이는 섹션마다 제목을 가질 수 있다는 것을 의미하며 섹션마다 h1태그를 사용할 수 있습니다.

ARTICLE

  • 게시판의 게시물, 블로그 포스트, 댓글에 담긴 콘텐츠등이 article에 해당합니다.
  • section태그가 관련있는 내용들끼리 묶어주는 역할이라면 article은 관련있는 내용들 중에서 독립적으로 구성된 글을 묶어주는 역할입니다.
  • article도 section과 마찬가지로 header와 footer를 가질 수 있습니다.

FOOTER

  • footer태그는 꼬리말을 지칭합니다. 저작권, 연락정보등 본문과 관련성은 있지만 본문에는 담기 어려운 내용을 담습니다.
  • 일반적으로 footer태그는 한 문서내에서 한번만 사용되지만, section이나 article태그내에서는 별도로 사용이 가능합니다.

 

 

HTML은 HyperText Markup Language의 약자입니다.

그리고 이는 누구나 알 것입니다.

그런데 그럼 과연 HyperText Markup Language가 무슨말인지 아시나요?

 

오늘 포스팅 할 내용은 HyperText Markup Language가 어떠한 의미를 가지고 있는지에 대하여 말씀드리려고합니다.

만약 이 내용이 필요가 없으시거나 이미 알고 계시는 내용이라면 제 블로그의 다른 글들을 봐주시면 감사하겠습니다.

 

일단 HyperText Markup Language에서 Language는 모두가 알고 있듯이 '언어' 입니다.

그리고 남은 글자인 HyperText Markup은 HyperText와 Markup으로 나눌 수 있습니다.

 

1. HyperText

 

HyperText가 어떤 말 일까요?

Hyper은 말그대로 초월의 라는 뜻을 가지고 있습니다.

그렇다면 HyperText는 초월한문서가 되겠네요.

이것을 우리는 HTML과 관련해서 생각해 본다면, 

기존의 문서가 순차적이면서 서열형 구조라면, 하이퍼텍스트는 링크에 따라 그 차례가 바뀌는 임의적이면서 나열형인 구조를 가진다. 즉, 출판된 책처럼 작가의 의도대로 사용자가 따라가는 것이 아닌, 하이퍼링크로 연결된 문서들을 어떠한 행위(클릭)에 따라 자유롭게 이동할 수 있다.

쉽게 얘기하면 HyperText는 다른 text로 이동할 수 있는 링크를 가진 text가 됩니다.

 

2. Markup

 

마크업이란 어딘가에 mark, 즉 표시해둔다는 의미입니다.

어떠한 문서가 있다면 그 문서의 제목이 어디에있는지, 내용은 어디에 있으며, 작성자는 어디에 적혀있는지

등의 문서의 많은 것들을 구조적으로 표현할 수 있습니다.

 

결국 markup은 문서를 구조적으로 표시하기 위한 것이 마크업의 개념입니다.

 

 

 

3.  HTML

위 내용들로 우리는 HyperText가 어떠한 의미를 가지고 있는지,

그리고 Markup이 어떠한 개념인지를 알게되었습니다.

그럼 이것들을 합쳐 HTML은 무엇이 될까요?

 

결국 HTML은 제목, 내용, 연락처 등 본문의 구조적 의미를 나타내는 것 뿐만 아니라,

하이퍼링크로 연결된 구조적문서를 클릭에 따라 자유롭게 이동할수 있는것을 제공하는 언어입니다.

 

 

반응형

'Language' 카테고리의 다른 글

[Java] 자바를 이용한 구구단 게임 만들기  (0) 2020.08.27
알아두면 좋은 CSS 선택자  (0) 2020.08.27
[CSS] CSS 기초설명, Cascading 이란?  (0) 2020.08.27
[자바스크립트] 클로저( Closure )함수 쉽게 이해시켜드립니다  (0) 2020.08.27
[자바스크립트]Virtual Dom이란?  (0) 2020.08.27
반응형

클로저(closure)는 지역변수를 (내부함수(inner function)안에 있는 변수) 전역변수(외부함수(outter function)처럼

살아있게끔 만들어줍니다.

내부함수가 외부함수의 맥락에 접근이 가능한것을 말하는것이죠. (Hoisting)

 

1
2
3
4
5
6
7
8
function outter() {
  var local = 'local'; // 외부함수에 변수를 선언합니다.
  function inner() { // inner()는 외부함수 안에 선언된 내부함수입니다.
    alert(name); // 외부함수에서 선언된 변수를 내부함수에서 호출합니다.
  }
 inner();
}
outter();

 

See the Pen GRgvJmJ by LeeSiHwang (@leesihwang) on CodePen.

(Run Pen 클릭 시 alert가 실행됩니다)

 

외부함수 내에서 내부함수가 선언되고 호출이 되었습니다.

이것을 실행이 되는 관점으로 보자면 

 

1. 내부함수 안에서 변수 local을 찾는다. ( scope )

2. 자신의 함수안에서 변수 local을 찾지 못하여 외부함수의 스코프에서 변수 local을 찾는다.

3. 변수 local을 찾았다 ( 내부함수가 외부함수의 변수에 접근하였다 )

위에서 말씀드렸듯이 내부함수가 외부함수의 맥락에 접근이 가능한것 입니다.

 

2. 클로저(closure)의 활용

내부함수는 외부함수의 지역변수를 참조할 수 있는데 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근 할 수 있습니다. 이런것을 클로저라고 합니다..

클로저가 유용하게 사용되는 경우는 다음 예제와 같이 변경된 상태를 유지/기억 하는 것입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    function outterFn(){
        var inner = 0;
        var innerFn;
        innerFn = function(){ 
            console.log(inner++); 
        }
        return innerFn;
    }
    var nestFn = outterFn();
    nestFn(); // 0
    nestFn(); // 1   
    nestFn(); // 2   
    nestFn(); // 3   
    nestFn(); // 4   

 

1. outterFn 함수는 실행되고 innerFn을 반환하고 사라졌습니다.

2. innerFn 즉 내부함수는 자신이 찾았던 변수inner를 기억하는 클로저입니다.

3. 내부함수는 자신이 찾았던 변수inner를 필요로하며, 내부함수가 기억하는 Lexical환경의 변수inner는 사라지지 않고, 현 상태를 기억합니다.

4. 외부함수를 호출하면, 변수inner의 값이 변경됩니다. 

변수 inner는 클로저에의해 참조되고 있기 때문에 사라지지않고 계속 유지되며, 자신이 변경된 상태를 계속해서 유지합니다.

 

2. 클로저(closure)의 은닉화

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<p>사과 1박스</p>
<p id="count">0</p>
<button id="plusNum">증가</button>
<button id="minusNum">감소</button>
<script>
    var privateNum = 0;
 
    function plus(){
        privateNum++;
        document.getElementById("count").innerText = privateNum;
    }
    function minus(){
        privateNum--;
        if(privateNum <= 0){
            privateNum = 0;
        }
        document.getElementById("count").innerText = privateNum;
    }
    document.getElementById("plusNum").addEventListener("click",function(){
        plus(); 
    });
    document.getElementById("minusNum").addEventListener("click",function(){
        minus(); 
    });
</script>

 

See the Pen RwNZPqr by LeeSiHwang (@leesihwang) on CodePen.

이렇게 코드를 작성한다해도 별문제없이 작동합니다.

하지만 이 코드는 addEventListener가 작동하기 이전에 count의 값이 반듯이 0이여야합니다.

변수 privateNum은 전역변수이기 때문에 언제든지 누구나 접근,변경이 쉽습니다.

변수 privateNum의 의도치않은 변경은 오류를 불러올 수 있기 때문에, 이 privateNum은

함수가 관리하는것이 좋습니다. 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<p>사과 1박스</p>
<p id="count">0</p>
<button id="plusNum">증가</button>
<button id="minusNum">감소</button>
<script>
    var plusMinus = (function(){
        var privateNum = 0;
        return{
            plus : function(){
                privateNum++;
                document.getElementById("count").innerText = privateNum;
            },
            minus : function(){
                privateNum--;
                if( privateNum <= 0 ){
                    privateNum = 0;
                }
                document.getElementById("count").innerText = privateNum;
            }
        }
    })();
 
    document.getElementById("plusNum").onclick = plusMinus.plus;
    document.getElementById("minusNum").onclick = plusMinus.minus;
</script>


  See the Pen https://codepen.io/leesihwang/pen/gObxpyL">
  gObxpyL by LeeSiHwang (https://codepen.io/leesihwang">@leesihwang)
  on https://codepen.io">CodePen.


이렇게 해결이 가능합니다.

그럼 만약에 단순히 변수 privateNum을 지역변수로 클로저 없이 사용한다면 어떻게 될까요?

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<p>사과 1박스</p>
<p id="count">0</p>
<button id="plusNum">증가</button>
<button id="minusNum">감소</button>
<script>
    function plus(){
        var privateNum = 0;
        privateNum++;
        return document.getElementById("count").innerText = privateNum; 
    }
    function minus(){
        var privateNum = 0;
        privateNum--;
        return document.getElementById("count").innerText = privateNum; 
    }
 
    document.getElementById("plusNum").addEventListener("click",function(){
        plus();  
    });
    document.getElementById("minusNum").addEventListener("click",function(){
        minus();  
    });
</script>

이렇게 코드를 작성하고 실행해봅니다.


  See the Pen https://codepen.io/leesihwang/pen/dyPzoxo">
  dyPzoxo by LeeSiHwang (https://codepen.io/leesihwang">@leesihwang)
  on https://codepen.io">CodePen.


변수 privateNum이 plus함수와 minus함수와 서로 다른 변수 privateNum으로 인식이되어 따로놀고있으며,

함수 실행 후, 클로저가 없기때문에 변수 privateNum이 유지되거나 기억되지못해 

plus버튼의 경우 0에서 1로만, minus버튼의 경우 0에서 -1로만 값이 유지되는것을 확인할 수 있습니다.

반응형

'Language' 카테고리의 다른 글

[Java] 자바를 이용한 구구단 게임 만들기  (0) 2020.08.27
알아두면 좋은 CSS 선택자  (0) 2020.08.27
[CSS] CSS 기초설명, Cascading 이란?  (0) 2020.08.27
[HTML] HTML 기초설명  (0) 2020.08.27
[자바스크립트]Virtual Dom이란?  (0) 2020.08.27
반응형

 

1. 우리가 DOM을 조작했을 때

 

가상돔을 이해하기 위해서는 브라우저가 어떻게 작동하는지 알아야 합니다.

우리가 DOM을 조작했을 때 아래와 같은 작업들이 이루어집니다.

 

 

  • DOM Tree 생성

브라우저가 HTML을 전달받으면 브라우저가 이를 파싱하고 DOM노드로 이루어진 트리를 만듭니다.

노드

노드는 트리 구조로 정렬되기도 합니다.
노드는 하나의 자료 구조에 포함된 정보를 표현합니다.
출처
https://ko.wikipedia.org/wiki/%EB%85%B8%EB%93%9C_(%EC%BB%B4%ED%93%A8%ED%84%B0_%EA%B3%BC%ED%95%99)

 

  • Render Tree 생성

그 뒤에 inline 스타일과 외부 css 파일을 파싱합니다.

스타일 정보를 사용하여 DOM트리에 따라 렌더트리를 생성합니다.

 

  • Layout

렌터트리를 생성한 뒤, 각 노드들은 정확이 어디에 나타나야할 지 위치가 주어집니다.

 

  • Painting

Layout이 완료되면 트리의 각 노드들을 거쳐가면서 paint() 메서드를 호출합니다.

그렇게되면 우리가 적어놓은 HTML파일대로 웹이 나타나게 됩니다.

 

2. Virtual DOM

가상 돔을 사용하지 않는다면 화면에서 변경되는것들을 DOM이 직접 조작하여 브라우저에 반영시켜주었습니다.

DOM은 DOM트리가 수정될 때마다 렌더트리가 계속해서 리렌더링하게 됩니다.

즉 화면에서 10개의 수정사항이 발생하면 새로운 랜더 트리가 10번 수정되면서 새롭게 만들어지게 됩니다.

 

가상 돔을 활용한다면 이렇게 불 필요한 렌더링 횟수를 줄일 수 있습니다.

가상 돔은 모든 연산을 끝내고 실제 DOM에 전당합니다.

그렇게 된다면 실제 DOM은 딱 1번의 작업만 작업을 하게됩니다.

즉 한번만 렌더트리를 만들어내는것이죠.

 

 

반응형

'Language' 카테고리의 다른 글

[Java] 자바를 이용한 구구단 게임 만들기  (0) 2020.08.27
알아두면 좋은 CSS 선택자  (0) 2020.08.27
[CSS] CSS 기초설명, Cascading 이란?  (0) 2020.08.27
[HTML] HTML 기초설명  (0) 2020.08.27
[자바스크립트] 클로저( Closure )함수 쉽게 이해시켜드립니다  (0) 2020.08.27

+ Recent posts

티스토리툴바