목차

2019/10/08 - [JavaScript/초보자를 위한 자바스크립트] - 초보자를 위한 자바스크립트 커리큘럼

2019/10/02 - [JavaScript/초보자를 위한 자바스크립트] - 1. 초보자를 위한 '자바스크립트는 무엇인가?' (feat.프로그래밍을 배우고 싶다면)

2019/10/08 - [JavaScript/초보자를 위한 자바스크립트] - 2. 자바스크립트 변수(variable)와 자료형(data type)

2019/10/14 - [JavaScript/초보자를 위한 자바스크립트] - 3. 자바스크립트 - 비교연산자(Comparisons)와 조건문(Conditional operators)

 

 

지금까지 저희는 codesandbox에서 index.js 파일 [각주:1]만 이용해서 공부했습니다. 

지난 포스팅 내용

맨 첫 시간에 웹페이지는 html과 css, JavaScript 이 3가지로 구성되어있다고 했습니다. 그러나 지금까지 저희가 배운 건 오로지 자바스크립트고 html과 css에 대해서는 배우지 않았습니다. 이 3가지는 긴밀히 연결되어 웹페이지를 구성하므로 이번 시간엔 간단하게 html과 css에 대해서도 배워보도록 하겠습니다.

 

html

먼저 html이란 웹의 뼈대(구조)를 담당합니다. html은 한번쯤 본 적이 있을텐데요,

이런식으로 구성이 되어있습니다. 

<head>안에 들어가는 내용은 우리가 보는 웹페이지 화면에 직접적으로 보여지지는 않지만 웹브라우저가 알아야할 주요한 정보들이 들어있습니다. 그리고 <body>안에는 웹페이지 화면에 직접 출력되는 내용들이 들어있습니다.

 

이러한 <> 것들을 '태그'라고 부릅니다. 이러한 태그들의 종류는 다양합니다. [각주:2]

자주 쓰이는 것들 중 하나로 버튼 태그가 있습니다. <button></button>이런식으로 쓰면 버튼이 생성됩니다.

 

그럼 몇가지 정말 자주 쓰이는 기본적인 태그들을 직접 타이핑하면서 공부해볼까요?

평소처럼 codesandbox에 들어가서 vanilla sandbox를 생성해주시고, index.js에 들어가서 불필요한 부분을 삭제 후 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
<!DOCTYPE html>
<html>
  <head>
    <title>예시</title>
    <meta charset="UTF-8" />
  </head>
 
  <body>
    <div id="app"></div>
    <h1>제목입니다</h1>
    <h2>소제목입니다.</h2>
    <button>버튼</button>
    <ul>
      <li>목차1</li>
      <li>목차2</li>
      <li>목차3</li>
    </ul>
    <p>문단에 여러가지 내용들~</p>
    <p>
      문단에 여러가지 내용들~문단에 여러가지 내용들~문단에 여러가지
      내용들~문단에 여러가지 내용들~문단에 여러가지 내용들~문단에 여러가지
      내용들~문단에 여러가지 내용들~문단에 여러가지 내용들~
    </p>
 
    <!--주석입니다. 코드에 아무런 영향을 미치지 않고 코드에 대한 설명을 적을 수 있습니다.-->
 
    <a href="https://kim-coffee.tistory.com/">김커피 블로그주소</a>
    <br />
    <img
      style="width: 400px"
      src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2018/04/15/16/china-coffee-cup.jpg?w968h681"
    />
    <script src="src/index.js"></script>
  </body>
</html>
 cs

 

<주요 태그 설명>

<h1> 

 제목. <h2>...<h6>까지 있다. 점점 폰트크기가 작아진다.
<button> 버튼
<ul> <li> 항목 나열
<p> 문단
<a> 링크 (href = "여기에 연결할 주소 넣으면 된다")
<br> 엔터키와 같은 역할을 한다. 한줄 띄기.
<img> 이미지 삽입 태그. (src = "여기에 이미지 주소를 넣으면 된다")

주요태그 설명을 한번 읽어보시고 직접 코드를 치면서 웹브라우저 화면에 어떻게 출력되는지를 살펴보세요. 하나하나 직접 타이핑해보는 편이 더 이해가 빠를 것 같습니다.

 

CSS

 

css는 웹페이지에서 디자인을 담당하는 부분입니다.  이런 css를 통해 폰트의 색상을 바꾸거나 가운데정렬을 하거나 하는 등 다양한 디자인적인 부분을 꾸밀 수 있습니다. css를 html에 적용하는 방법은 몇가지가 있습니다. 

 

1. html에 <style>태그를 삽입

html파일에 <style>태그를 삽입하여 <style></style>태그 내부에 css를 적어주면 html파일에 css를 통한 디자인이 적용됩니다. 

 

2. css파일에 작성

codesandbox에 보시면 style.css파일이 있습니다. 이 파일 내에 css코드를 적어주면 html파일에 css가 적용됩니다.

 

h1 {
  color: brown;
}

css코드는 이런식으로 생겼습니다. 우리가 위에 적은 html코드에 css를 적용해줄건데요. <h1>태그에 폰트컬러를 브라운컬러로 바꾸고 싶으면 위와 같이 적어주면 됩니다. red, blue 등등 다양한 색상을 쓸 수 있습니다. 

 

css구성

css는 이와같이 선택자(selector), 속성(property), 값(value)으로 구성되어있습니다.

 

CodeSandbox 코드

 

 

앞서 공부한 예시들을 적어놓은 codesandbox입니다. 실습을 하실 때 위 코드를 참고하셔서 자신의 코드가 맞게 쓰여졌는지, 에러가 발생한다면 어느 부분이 잘못되었는지 비교하면서 봐주세요.

모르는 점은 댓글로 질문을 남겨주시면 답변 드리겠습니다 :)

 

codesandbox의 share버튼 클릭했을 때 뜨는 창-editor url복사

본인의 codesandbox에서 에러가 발생했을 경우 codesandbox 오른쪽 상단에 있는 share버튼을 클릭하셔서 url을 복사해서 댓글로 남겨주시면 제가 코드를 직접 확인하고 답변을 달아드릴 수 있습니다.

*참고자료: 

http://www.homejjang.com/03/html_structure.php

http://egloos.zum.com/fundoodle/v/3131696

https://www.codingfactory.net/10187

  1. js가 JavaScript파일을 의미합니다 [본문으로]
  2. 다양한 html태그들이 정리되어있는 포스팅입니다. 참고하세요. http://egloos.zum.com/fundoodle/v/3131696 [본문으로]

'초보자를 위한 자바스크립트' 카테고리의 다른 글

4. 자바스크립트 - 배열(Array)와 반복문(loop)  (0) 2019.11.19
[실습예제] 자바스크립트(JavaScript)로 자판기(vending machine) 만들기  (0) 2019.10.22
3. 자바스크립트 - 비교연산자(Comparisons)와 조건문(Conditional operators)  (0) 2019.10.14
2. 자바스크립트 변수(variable)와 자료형(data type)  (0) 2019.10.08
초보자를 위한 자바스크립트 커리큘럼  (0) 2019.10.08
  1. [JavaScript/초보자를 위한 자바스크립트] - 초보자를 위한 자바스크립트 커리큘럼
  2. [JavaScript/초보자를 위한 자바스크립트] - 1. 초보자를 위한 '자바스크립트는 무엇인가?' (feat.프로그래밍을 배우고 싶다면)
  3. [JavaScript/초보자를 위한 자바스크립트] - 2. 자바스크립트 변수(variable)와 자료형(data type)

지난시간에 자바스크립트(JavaScript) 변수와 자료형을 공부했던 것에 이어서 이번에는 비교연산자와 조건문에 대해 공부해보도록 하겠습니다. '초보자를 위한 자바스크립트'에 있는 내용들은 정말 basic하고 모든 프로그래밍 언어에 존재하는 기본 문법들입니다.

 

비교연산자

 

비교연산자란 주어진 값들이 서로 같은지, 다른지, 큰지, 작은지 비교해주는 연산을 수행합니다.

비교연산자를 통해 연산된 결과값으로는 true 또는 false 즉 – 참이냐 거짓이냐 이 2가지만 존재하게 됩니다. 앞서 자료형을 학습했는데, 거기서 boolean형을 언급한 적이 있습니다. 이러한 true 또는 false의 값을 갖게 되는 것이 바로 boolean형 데이터입니다.

 

23 < 4

는 true인가요, false인가요?

아래에 23 < 4 라고 입력해서 직접 확인해보세요.

 

4는 23보다 작은 숫자이므로 결과는 false가 됩니다.

 

 ==  변수의 데이터 타입과 상관없이 값이 같으면 참이다.
 ===  변수의 데이터 타입까지 고려하여 값이 같으면 참이다.
 !=  변수의 데이터 타입과 상관없이 값이 다르면 참이다.
 !==  변수의 데이터 타입까지 고려하여 값이 다르면 참이다.
 >  변수의 값이 더 크면 참이다. (초과)
 <  변수의 값이 더 작으면 참이다. (미달)
 >=  변수의 값이 더 크거나 같으면 참이다. (이상)
 <=  변수의 값이 더 작거나 같으면 참이다. (이하)

비교연산자의 종류는 위와 같습니다. 그런데 여기서 ==와 ===이 어떻게 다른지 예시를 통해 살펴볼까요?

*그전에 한가지 주의할 점은 = 과 == 은 다른 종류의 연산자라는 것입니다.

=은 대입연산자로 우항의 값을 좌황에 대입해주겠다-라는 뜻이고, ==는 좌항과 우항의 값을 비교하겠다는 비교연산자입니다.

 

 

저번 시간에 언급했듯이 "문자열"은 따옴표로 둘러싸서 표기해야한다고 했습니다.

하지만 숫자는 따옴표가 필요하지 않았죠.

기억이 나지 않는다면 저번시간 내용을 복습하고 오세요 ^ㅇ^

 

1 이건 숫자 데이터 타입입니다.

'1' 이건 문자 데이터 타입입니다.

 

즉 데이터 타입이 다르다는 의미입니다. 1은 숫자이고, '1'은 문자이니까요. 

1 == '1' 은 'true'입니다.

1 === '1' 은 false입니다.

 

이제 좀 이해가 되셨나요? 

 

==와 ===가 '같은지'를 따져주는 연산자라면, != 와 !==는 반대의 의미를 갖고 있습니다. 이 연산자는 '다를 경우에' 참(true)을 반환합니다. 위에서 1 === '1'은 false라고 했습니다. 왜냐하면 1은 숫자이고, '1'은 문자여서 자료형이 다르기 때문이었습니다.

 

그렇다면

1 !== '1'

은 무슨 결과값이 나와야할까요? 한번 맞춰보세요!

 

네, 정답은~~~ true(참)입니다. 왜냐하면 1과 '1'은 다르기 때문입니다.

===는 자료형까지 같은 경우 참을 반환하고, !==은 다를 경우에 참을 반환합니다.

 

그리고 5 <= 5 은 참일까요, 거짓일까요?

네, 참입니다. 왜냐하면 왼쪽의 값이 오른쪽값보다 작거나 같으면 '참'을 반환하기 때문입니다.

5 <= 6 또한 참이라고 할 수 있습니다! 

 

이 비교연산자 문제에 대해선 제가 퀴즈도 많이 낼테니 문제를 풀면서 달달달 헷갈리지 않게 익혀주세요^^

조건문

이번엔 이 비교연산자를 활용할 수 있는 '조건문'을 배워보도록 하겠습니다.

조건문은 주어진 조건에 따라서 애플리케이션을 다르게 동작하도록 하는 것 입니다.

if조건문

if ~ else if ~ else 이런식으로 구성이 되어있습니다.

if(조건1) → 조건1일 경우 실행

else if(조건2) → 조건2일 경우 실행

else → 조건1, 조건2 둘다 해당되지 않은 나머지 경우에 실행

 

예를 들어서 우리가 성적을 계산할 때 이용할 수 있습니다.

앞서 배운 '비교연산자'를 이용하여 내 성적과 기준점수(90점)을 비교합니다. 내 성적 78점은 90점보다 작기 때문에 조건 "내성적 >= 90"을 만족하지 못하고 조건은 false를 반환합니다. 이처럼 조건이 false인 경우는 해당 조건에 만족할 경우에만 실행되는 "점수 A주기"를 실행하지 않습니다.

90점 이상은 A, 71~89점은 B, 70점 이하로는 모두 C 라고 합시다. 그럴 경우 아래와 같은 코드를 작성할 수 있습니다. scroe엔 여러분이 바라는 점수를 적어보세요. 여러분의 점수는 몇등급 인가요?

var score = 78; //내 점수
var grade;//내 성적

if(score >= 90) grade = 'A'; //90점 이상은 A

else if(score >= 71 && score <= 89) grade = 'B'; // 71~89점은 B

else grade = 'C'; //70점 이하는 C

alert("점수는 " + grade);

여기서 추가적인 부분을 설명하자면 &&은 and를 의미 [footname] 이와 같은걸 '논리연산자'라고 합니다. 조금 더 자세히 알고 싶으시다면 https://m.blog.naver.com/PostView.nhn?blogId=smilebanner88&logNo=220729516010&proxyReferer=https%3A%2F%2Fwww.google.com%2F 글을 참고해주세요. [/footname] 합니다. score >= 71 (점수가 71점이상) 이면서 score <= 89 (점수가 89점 이하) 일 경우에는 true를 반환합니다. 그러니까 즉 2가지 조건에 '모두' 만족할 경우에만 참인 것입니다. 

 

이런식으로 조건문은

if(조건) → {조건이 '참'일 경우 실행할 내용 } 

 

이런식으로 쓰시면 됩니다. 그리고 이 조건문 안에 들어가는 '조건'은 반환값이 ture 또는 false여야하기 때문에 위에서 우리가 공부한 '비교연산자'가 쓰이는 것입니다.

 

만약 처음부터 조건 자체가 'false'(거짓)이라면 아무것도 실행되지 않습니다.

우리가 위에서 했던 예시를 바탕으로 해보자면

if(23 < 4){
alert('실행될 내용');
}

이렇게 입력해보시면 아마 아무것도 실행되지 않을 겁니다. 이유는 23<4는 false이기 때문이죠. 이처럼 조건문은 조건이 거짓일 경우에는 작동하지 않습니다.

*퀴즈는 모바일에선 지원되지 않습니다.

3과 비교연산자와 조건문 퀴즈

  • 30 <= 30 은 참인가 거짓인가?

거짓(false)
참(true)

  • '2' === 2 는 참인가 거짓인가?

거짓(false)
참(true)

  • '2' !== 2 는 참인가 거짓인가?

거짓(false)
참(true)
 

'초보자를 위한 자바스크립트' 카테고리의 다른 글

[실습예제] 자바스크립트(JavaScript)로 자판기(vending machine) 만들기  (0) 2019.10.22
+자바스크립트 - html과 css를 가볍게 알아보자!  (0) 2019.10.14
2. 자바스크립트 변수(variable)와 자료형(data type)  (0) 2019.10.08
초보자를 위한 자바스크립트 커리큘럼  (0) 2019.10.08
1. 초보자를 위한 '자바스크립트는 무엇인가?' (feat.프로그래밍을 배우고 싶다면)  (0) 2019.10.02

 

<초보자를 위한 자바스크립트 커리큘럼>

 

1.An introduction of JavaScript & What can you do with JavaScript?

2.Variables & Data types

3.Comparisons & Conditional operators (vending machine example)

4.Array and Loops (calendar example)

5.Functions (calculator example)

6.Objects (to-do-list example)

7.Guideline for Next Step!

...더보기

1. 자바스크립트에 대한 아주 간략한 소개 & 자바스크립트를 통해 무엇을 할 수 있는지 소개 =동기부여

2. 자료형과 변수

3. 비교문과 조건문 - 이를 통해 간단한 자판기를 만들어봅니다

4. 배열과 반복문 - 이를 통해 달력을 만들 수 있습니다

5. 함수 - 이를 통해 계산기를 만들어봅시다

6. 객체 - to do list를 만들어봅시다

 

 

*교육대상 : 프로그래밍에 관심은 있으나 프로그래밍에 대한 지식이 없는 중고등학생 이상의 학습자들 

*교육목표 : 자바스크립트(JavaScript)가 무엇인지 이해하고, 간단한 예제와 함께 자바스크립트에 대한 기본적인 문법 지식을 이해한다. (beginner수준이라고 보시면 됩니다)

 

 

초보자를 위한 자바스크립트 카테고리에 업로드될 콘텐츠들은

위와 같은 커리큘럼으로 진행될 예정입니다.

 

*마지막으로 모든 교육 콘텐츠 업로드 이후 이 교육콘텐츠를 통해 목표에 달성한 학습자들을 위해 다음 단계의 학습 가이드라인(다음으로 무엇을 공부할지 제공할 예정입니다. 이는 beginner수준에서 더 나아가 advanced 수준의 학습을 원하는 학습자들에게 도움이 될 것입니다.

'초보자를 위한 자바스크립트' 카테고리의 다른 글

[실습예제] 자바스크립트(JavaScript)로 자판기(vending machine) 만들기  (0) 2019.10.22
+자바스크립트 - html과 css를 가볍게 알아보자!  (0) 2019.10.14
3. 자바스크립트 - 비교연산자(Comparisons)와 조건문(Conditional operators)  (0) 2019.10.14
2. 자바스크립트 변수(variable)와 자료형(data type)  (0) 2019.10.08
1. 초보자를 위한 '자바스크립트는 무엇인가?' (feat.프로그래밍을 배우고 싶다면)  (0) 2019.10.02

+ Recent posts

티스토리툴바