Posted Updated  minkuen frontEnd / javascript3 minutes read (About 418 words)

Java Script 실습2

사전작업

  • 살행할 폴더 우클릭 : git bash here

  • VSCord 작동 : code .

  • 폴더, 파일 생성

  • PROJECT 아래에 생성

    • 폴더 생성 : step05_js
    • 파일 생성 : ch01_index.html

JavaScript 작성

  • ch01_index.html 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <center>
        <p>안녕하세요!</p>
        <button type="button" onclick="document.getElementById"
        ('demo').innerHTML = Date()">
            버튼을 클릭하세요!
        </button>
        <p id="demo"></p>
    </center>
</body>
</html>
  • step05_js 폴더에서 ch01_index.html을 오픈
  • 페이지가 출력된다.

Untitled

스크립트 불러오기 사전준비

  • 파일 생성

  • step05_js 폴더 아래에 생성

    • 파일 생성 : ch02_1_js.html

  • ch02_1_js.html 에 다음 내용 작성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <center>
        <p>안녕하세요!</p>
        <p id="demo">adfadfa</p>

        <! -- 스크립트 불러오기 -- >
        <script>
            document.getElementById('demo').innerHTML="자바스크립트";
        </script>
    </center>
</body>
</html>
  • step05_js 폴더에서 ch02_1_js.html을 오픈
  • 페이지가 출력된다.

Untitled

스크립트 불러오기 사전준비

  • 파일 생성

  • step05_js 폴더 아래에 생성

    • 파일 생성 : ch02_2_js.html

  • 폴더, 파일 생성

  • step05_js 폴더 아래에 생성

    • 폴더 생성 : js
    • js 아래에 파일 생성 : myscript.js

  • ch02_2_js.html 에 다음 내용 작성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <center>
        <p>안녕하세요!</p>
        <p id="demo">adfadfa</p>

        <! -- 스크립트 불러오기 -- >
        <script src = "js/myscript.js"></script>
    </center>
</body>
</html>
  • myscript.js 에 다음 내용 작성
1
document.getElementById('demo').innerHTML="자바스크립트";
  • step05_js 폴더에서 ch02_2_js.html을 오픈
  • 페이지가 출력된다.
  • html에 작성하지 않은 스크립트의 출력에 성공했다.

Untitled

버튼

  • ch02_2_js.html 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!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>
        document.getElementById('demo').innerHTML="자바스크립트";
    </script>
</head>
<body>
    <center>
        <p>안녕하세요!</p>
        <p id="demo">adfadfa</p>
        <button type="button" onclick="myFunction()">
            버튼을 클릭하세요!
        </button>
    </center>
</body>
</html>
  • step05_js 폴더에서 ch02_2_js.html을 오픈
  • 페이지가 출력된다.

Untitled

Posted Updated  minkuen frontEnd / javascript3 minutes read (About 498 words)

Java Script 실습1

사전작업

  • 살행할 폴더 우클릭 : git bash here

  • VSCord 작동 : code .

  • 폴더, 파일 생성

  • PROJECT 아래에 생성

    • 폴더 생성 : step04_js_dom
    • 파일 생성 : index.html
    • 파일 생성 : main.js

JavaScript 형식

  • index.html 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width">
    <title>Document</title>
    <script src="./main.js"></script>
</head>

<body>
    <h1>자바스크립트 연습</h1>
</body>

</html>
  • main.js 에 다음 내용 작성
1
console.log("new file!")
  • step04_js_dom 폴더에서 index.html을 오픈
  • 페이지가 출력된다.
  • html 페이지에서 우클릭 → 검사
  • 다음과 같이 시스템 로그가 출력되었다.

Untitled

Event

  • 이벤트를 감지하고 출력하는 코드를 작성해본다.
  • index.html 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!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 defer src="./main.js"></script>

</head>
<body>
    <div class = 'box'>1</div>
    <div class = 'box'>2</div>
    <div class = 'box'>3</div>
    <div class = 'box'>4</div>
</body>
</html>
  • main.js 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const boxEl = document.querySelector(".box");
console.log(boxEl);

boxEl.addEventListener('click', function() {
    console.log('Click!');
    boxEl.classList.add('active');

    /*
    const hasActive = boxEl.classList.contains('active');
    console.log(hasActive);
    */
   // let hasActive = boxEl.classList.contains('active');
   // console.log(hasActive);

   // boxEl.classList.remove('active');
   // hasActive = boxEl.classList.contains('active');
   // console.log(hasActive);
});
  • 1을 마우스로 클릭하면 다음과 같이 출력된다.
  • Click이라는 이벤트를 감지하고 표시한다.

Untitled

div class

  • 파일 생성

  • PROJECT 아래에 생성

    • 파일 생성 : main2.js

  • index.html 에 다음 내용 작성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!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 defer src="./main2.js"></script>

</head>
<body>
    <div class = 'box'>1</div>
    <div class = 'box'>2</div>
    <div class = 'box'>3</div>
    <div class = 'box'>4</div>
</body>
</html>
  • main2.js 에 다음 내용 작성
1
2
3
4
5
6
7
const boxE1s = document.querySelectorAll('.box');
console.log(boxE1s);

boxE1s.forEach(function(boxE1, index){
    boxE1.classList.add('order-${index}');
    console.log(boxE1, index);
});
  • 다음과 같이 시스템 로그가 출력되었다.

Untitled

JS 구조 파악

  • 다음 코드와 실행 결과로 구조를 파악해보자.
  • main2.js 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
const boxE1s = document.querySelectorAll('.box');
console.log(boxE1s);

boxE1s.forEach(function(boxE1, index){
    // div 클래스면을 box order-1
    boxE1.classList.add('order-${index}');
    console.log(boxE1, index);
    console.log(boxE1.textContent);
    boxE1.textContent = "안녕";
    console.log(boxE1.textContent);
});
  • index.html 의 1 2 3 4를 건드리지 않았음에도 다음과 같이 출력되었다.
  • 이를 통해 페이지에 최종적으로 영향을 미치는 것은 JS임을 알 수 있다.

Untitled

Posted Updated  minkuen frontEnd / javascript4 minutes read (About 579 words)

Java Script 기초

사전작업

  • 살행할 폴더 우클릭 : git bash here

  • VSCord 작동 : code .

  • 폴더, 파일 생성

  • PROJECT 아래에 생성

    • 폴더 생성 : step03_js_basic
    • 파일 생성 : index.html
    • 파일 생성 : main.js

JavaScript 작성

  • index.html 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width">
    <title>Document</title>
    <script src="./main.js"></script>
</head>

<body>
    <h1>자바스크립트 연습</h1>
</body>

</html>
  • main.js에 다음 내용 작성
1
2
// hello world
console.log("hello!")
  • step03_js_basic 폴더에서 index.html을 오픈
  • 다음과 같이 페이지가 출력된다.

Untitled

시스템 로그

  • main.js 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// hello world
console.log("Hello!!!");

// 변수명 작성 스타일
// camel Case : numOne

const myName = "kmk";
const email = "abc@gmail.com";
const hello = '안녕 ${myName}!';

// print()
console.log(myName);
console.log(email);
console.log(hello);
  • html 페이지에서 우클릭 → 검사
  • 다음과 같이 시스템 로그가 출력되었다.

Untitled

key-value

  • key-value를 비롯한 여러 변수를 호출해본다.
  • main.js 에 다음 내용 작성
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
// hello world
console.log("Hello!!!");

// 변수명 작성 스타일
// camel Case : numOne

const myName = "kmk";
const email = "abc@gmail.com";
const hello = '안녕 ${myName}!';

// print()
console.log(myName);
console.log(email);
console.log(hello);

// 숫자
const number = 123;
console.log(number)

// Boolean
let checked = true;
let isShow = false;
console.log(checked)
console.log(isShow)

//undefied
let abc;
console.log(abc);

//null
let name = null;
console.log(name);

//재할당
name = 'kmk';
console.log(name);

// 파이썬 딕셔너리와 비슷
// key-value
const user = {
    name: 'kmk',
    age: 20,
    isValid: true 
}

console.log(user.name);
console.log(user.age);
console.log(user.isValid);
// console.log(user.user.city);  undefined
  • 다음과 같이 시스템 로그가 출력된다.

Untitled

사칙 연산

  • main.js 에 다음 내용 추가
1
2
3
4
5
6
7
// 사칙 연산
const a=2;
const b=5;
console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);
  • 연산 결과가 시스템 로그에 출력된다.

Untitled

함수 선언과 호출

  • main.js 에 다음 내용 추가
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
// 함수의 선언과 호출
function helloFunc() {
    console.log(1234);
}

helloFunc();

function returnFunc() {
    return 123;
}

const fun_result = returnFunc();
console.log(fun_result);

function sum(a, b){
    return a + b;
}

const sum_a = sum(1, 2);
console.log(sum_a);

const sum_b = sum(4,5)
console.log(sum_b);

// anonymous(익명 함수)
const world = function(){
    console.log("We are the world");
}
world();
  • 결과가 시스템 로그에 출력된다.

Untitled

조건문

  • main.js 에 다음 내용 추가
1
2
3
4
5
6
7
// 조건문
const isDone = false;
if (isDone) {
    console.log('done!')
} else {
    console.log('Not Yet')
}
  • 결과가 시스템 로그에 출력된다.

Untitled

Posted Updated  minkuen frontEnd / html & css4 minutes read (About 639 words)

html & css

사전작업

  • 살행할 폴더 우클릭 : git bash here

  • VSCord 작동 : code .

  • 폴더, 파일 생성

  • PROJECT 아래에 생성

    • 폴더 생성 : step02_hello
    • 파일 생성 : index.html
    • 파일 생성 : main.css

CSS 작성

  • index.html 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=devie-width, initial-scale=1.0">
        <title>돈까스집</title>
        <link rel="stylesheet" href="./main.css" >
    </head>
    <body>
        <div>Hello World</div>
    </body>
</html>
  • main.css 에 다음 내용 작성
1
2
3
4
5
div {
    width: 400px;
    height: 200px;
    background-color: blue;
}
  • step02_hello 폴더에서 index.html을 오픈
  • 다음과 같이 페이지가 출력된다.

Untitled

이미지 업로드

  • step02_hello 아래에 폴더 생성 : img
  • 사진을 img폴더 경로에 다운로드 : rainday
  • index.html 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=devie-width, initial-scale=1.0">
        <title>돈까스집</title>
        <link rel="stylesheet" href="./main.css" >
    </head>
    <body>
        <div class = "weather_title">
            <h1>오늘의 날씨</h1>
            <p>오늘은 비가 많이 내릴 예정입니다. ~~</p>
            <img src="./img/rainday.webp" alt="rain">
        </div>
    </body>
</html>
  • main.css 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
div {
    width: 200px;
    height: 200px;
    background-color: blue;
}

p{
    color: navy;
    text-indent : 30px;
    text-transform: uppercase;
}
  • 지정한 이미지가 업로드되었다.

Untitled

div 클래스

  • div를 이용하여 글을 작성한다.
  • index.html 에 다음 내용 작성
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
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=devie-width, initial-scale=1.0">
        <title>돈까스집</title>
        <link rel="stylesheet" href="./main.css" >
    </head>
    <body>
        <div class = "weather_title">
            <h1>오늘의 날씨</h1>
            <p>오늘은 비가 많이 내릴 예정입니다. ~~</p>
        </div>
        <div class = "fruits">
            <ul>
                <li>사과</li>
                <li>바나나</li>
                <li>수박</li>
                <li>오렌지</li>
            </ul>
        </div>
        <div id="song">
            <span>노래~~가사~~</span>
        </div>
    </body>
</html>
  • main.css 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
div {
    width: 200px;
    height: 200px;
    background-color: blue;
}

div.fruits {
    width: 500px;
    height: 300px;
    background-color: orange;
}

#song {
    width: 500px;
    height: 300px;
    background-color: rgb(205, 235, 135);
}

p{
    color: navy;
    text-indent : 30px;
    text-transform: uppercase;

}
  • 다음과 같이 차례로 출력된다.

Untitled

Label, Table

  • 라벨과 테이블을 사용해본다.
  • index.html 에 다음 내용 작성
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
50
51
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=devie-width, initial-scale=1.0">
        <title>돈까스집</title>
        <link rel="stylesheet" href="./main.css" >
    </head>
    <body>
        <div class = "weather_title">
            <h1>오늘의 날씨</h1>
            <p>오늘은 비가 많이 내릴 예정입니다. ~~</p>
        </div>
        <div class = "fruits">
            <ul>
                <li>사과</li>
                <li>바나나</li>
                <li>수박</li>
                <li>오렌지</li>
            </ul>
        </div>
        <div id="song">
            <span>노래~~가사~~</span>
        </div>

        <br>
        <input type = "text" value = "hello" />
        <input type = "text" placeholder = "이름을 입력하세요"/>

        <label>
            <input type="checkbox" />사과
            <input type="checkbox" checked/>바나나
        </label>

        <table>
            <tr>
                <th>항목명1</th>
                <td>내용이 들어갑니다.</td>
            </tr>
            <tr>
                <th>항목명2</th>
                <td>내용이 들어갑니다.</td>
            </tr>
            <tr>
                <th>항목명3</th>
                <td>내용이 들어갑니다.</td>
            </tr>
        </table>

    </body>
</html>
  • main.css 에 다음 내용 작성
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
div {
    width: 200px;
    height: 200px;
    background-color: blue;
}

div.fruits {
    width: 500px;
    height: 300px;
    background-color: orange;
}

#song {
    width: 500px;
    height: 300px;
    background-color: rgb(205, 235, 135);
}

p{
    color: navy;
    text-indent : 30px;
    text-transform: uppercase;

}

input:focus {
    background-color: blue;
}

Untitled

팁

Ctrl + A 후 전체정렬

전체 정렬 : Ctrl + Alt + L

추가 공부

https://www.inflearn.com/course/html5

  • 해당 링크에서 필요한 강의를 찾아서 듣기
  • 최종적으로 홈페이지가 제작되는 강의나 책을 선택해야 한다.

참고 자료

Posted Updated  minkuen frontEnd / html & css3 minutes read (About 395 words)

html 기초

사전작업

  • 바탕 화면에 폴더 생성 : project
  • 폴더 우클릭 : git bash here
  • VSCord 작동 : code .

Untitled

  • 폴더, 파일 생성
  • PROJECT 아래에 생성
    • 폴더 생성 : step01_intro
    • 파일 생성 : index.html

html 작성

  • 코드 작성
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=devie-width, initial-scale=1.0">
    </head>
    <body>
        aaa
    </body>
</html>
  • 저장 후 폴더에서 html파일 열기
  • 다음과 같이 작서한 내용이 출력되어 있다.

Untitled

링크 첨부

  • Naver 주소를 복사하여 다음과 같이 작성한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=devie-width, initial-scale=1.0">
        <title>돈까스집</title>
    </head>
    <body>
        <a href="https://www.naver.com/">NAVER</a>
        <br>
        <br>
        <div>Hello World</div>
    </body>
</html>

Untitled

이미지 추가

  • project/step01_intro 경로에 폴더 생성 : img
  • 아무 사진이나 다운받아서 폴더에 넣는다.
    • 사진을 다른 이름으로 저장 : temp
  • 여기까지 설정하고 다음과 같이 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=devie-width, initial-scale=1.0">
        <title>돈까스집</title>
    </head>
    <body>
        <a href="https://www.naver.com/">NAVER</a>
        <br>
        <br>
        <div>Hello World</div>
        <br>
        <img src="./img/temp.jpg" alt = "ball">
    </body>
</html>

Untitled

이미지 주소로 추가

  • 이미지 우클릭 : 이미지 링크 복사
  • 다음과 같이 링크를 붙여넣고 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=devie-width, initial-scale=1.0">
        <title>돈까스집</title>
    </head>
    <body>
        <a href="https://www.naver.com/">NAVER</a>
        <br>
        <br>
        <div>Hello World</div>
        <br>
        <img src="./img/temp.jpg" alt = "ball">
        <img src="https://img.animalplanet.co.kr/news/2020/01/07/700/tbg4j63622z4545z51af.jpg" alt = "fox">
    </body>
</html>

Untitled

페이지 이동

  • 링크로 페이지 이동하기
  • 우선 step01_intro 아래에 폴더 생성 : about
    • about 아래에 파일 생성 : index.html
  • about/index.html에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=devie-width, initial-scale=1.0">
        <title>About</title>
    </head>
    <body>
       <a href="../">Home</a>
       About 페이지입니다.
    </body>
</html>
  • index.html에 about/index.html 경로 추가
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=devie-width, initial-scale=1.0">
        <title>돈까스집</title>
    </head>
    <body>
        <! -- 키워드: 상대경로, 절대경로 -->
        <a href="https://www.naver.com/">NAVER</a>
        <a href="./about/index.html">About</a>
        
        <br>
        <br>
        <div>Hello World</div>
        <br>
        <img src="./img/temp.jpg" alt = "ball">
        <img src="https://img.animalplanet.co.kr/news/2020/01/07/700/tbg4j63622z4545z51af.jpg" alt = "fox">
    </body>
</html>

Untitled

팁

  • 다음 설정으로 코드 가독성을 높일 수 있다.
    • VSCord → 메뉴바 → 보기 → 자동 줄 바꿈
Posted Updated  minkuen frontEnd / html & css2 minutes read (About 314 words)

FrontEnd 세팅

웹개발을 위한 VS Code 기본 세팅 (notion.site)

  • VSCord → extention 에서 필요한 프로그램을 다운로드

Untitled

  • Korean 다운로드

→ restart

Untitled

  • beautify 다운로드

Untitled

  • ‘기능 기여도’ 탭

→ 명령 칸에서 다음 내용 복사

→ 복사 : HookyQR.beautify

Untitled

  • 검색 창 열기 : crl+ shift + p
  • 검색 : 바로가기 키

→ 기본 설정 : 바로 가기 키 열기

Untitled

  • 검색 : 앞서 복사했던 HookyQR.beautify 를 붙여 넣는다.
    • Beautify Selection을 클릭한다.

Untitled

  • 키 바인딩 조합 정의 : ctrl + alt + L

Untitled

  • live server 설치

Untitled

html

CSS

JavaScript

JavaScript 실습1

JavaScript 실습2

JavaScript 실습3

Follow

Links

Categories

Recents

Archives

Tags

HTML6
JPA11
JPA 기초11
Java9
JavaScript1
NiFi1
Notion4
PL/SQL4
R2
R Markdown1
VScord1
Vue.js7
Vue.js 기초7
airflow4
anaconda1
apache1
chatbot5
crawling4
elasticsearch1
git1
github blog1
heroku4
javascript10
kakao_chatbot5
kibana1
machine learning22
oracle15
pipeline1
postgreSQL5
python30
setting14
spark7
wsl21
생활코딩1

Subscribe for updates

You need to set client_id and slot_id to show this AD unit. Please set it in _config.yml.

follow.it

×