[1주차 TIL] KnockOn Bootcamp HTML / CSS / JS

HTML

---

HTML은 웹페이지를 만들기 위해 사용되는 언어이다

<p></p> 이러한 태그들로 이루어져 있다

HTML에 구조로는 

1. 문서 유형 선언 (DOCTYPE) : HTML 문서 선언
2. 루트 요소 (html) : 문서 바깥쪽 요소, lang 속성으로 문서의 기본 언어 지정
3. 머리 요소 (head) : 문서의 메타데이터
4. 몸체 요소 (body) : 웹 페이지의 실제 콘텐츠가 들어가는 부분
5. 콘텐츠 요소 : HTML 요소들 ex) header, nav, p, a, img 등등

이 있다

 

HTML 기본태그

.<!DOCTYPE html> : 문서가 HTML5임을 선언

<html> : HTML 문서의 루트 요소

<head> : 문서의 메타데이터를 포함

<title> : 문서의 제목을 정의 (브라우저 제목에 표시됨)

ex) <title>테스트 웹 페이지</title>

 

<meta> : <meta>: 메타데이터를 설정하는 데 사용

ex) <meta charset="UTF-8"> (문서 인코딩 지정)

 

<link>: 외부 리소스를 연결 보통 CSS 파일 연결

ex) <link rel="stylesheet" href="styles.css"> (CSS 기본 스타일 시트 연결)

 

<script>: 자바스크립트 코드를 포함하거나 외부 자바스크립트 파일을 연결

ex) <script src="script.js" defer></script> (head안에서 외부 js파일 연결)

ex) <script> function test_f() { alert('test'); } </script>

 

<style>: 문서 내에 CSS 스타일을 정의

ex) <style>h1 { color: blue; }</style> (h1태그 색 설정)

 

 

 

CSS

---

CSS는 HTML의 스타일을 정의하는 스타일 시트 언어이다

웹 페이지의 레이아웃, 색상, 글꼴, 간격, 정렬 등을 조절할 수 있다

 

기본 문법

선택자{

        속성: 값;

}

 

ex) <style>h1 { color: blue; }</style> (h1태그 색 설정)

 

 

 

 

 

JavaScript

---

JS는 웹 페이지에 동적 기능을 추가하는 데 사용되는 프로그래밍 언어이다

이번에는 웹 페이지의 동적 기능을 위한 문법과 함수를 적겠다

 

변수 선언 :: 이름 : sin / 값 : test

전역 변수 : var sin = 'test'

지역 변수 : let sin = 'test'

상수 : const sin = 'test

배열 : var sin = ['1', '2', '3'];

 

 

함수

function test(){

        console.log('test');

}

 

 

조건문과 반복문은 c언어와 동일하다

 

 

DOM 조작

let element = document.getElementById('myElement'); // ID로 선택

let elements = document.getElementsByClassName('myClass'); // 클래스명으로 선택

let items = document.getElementsByTagName('div'); // 태그명으로 선택

let item = document.querySelector('.myClass'); // CSS 선택자 사용

let itemList = document.querySelectorAll('.myClass'); // 모든 일치 요소 선택

 

등등을 사용해 JS로 동적 기능을 수행할 수 있다.

 

 

도전과제

---

간단한 계산기 페이지 만들기

 

input, button 태그를 활용해 input에 있는 값들을 버튼을 눌렀을 때

밑에 계산된 결과를 보여주는 페이지를 제작할 것이다

 

필요한 코드 형식

<input type="text" id="input" placeholder="ex) 1 + 1">

설명 :

type은 박스에 들어갈 타입을 지정,

id는 박스에 들어갈 값을 통채로 가져와 계산기 값에 활용하기 위해,

placeholder는 박스에 값이 없을 때 보여주는 텍스트 예시를 보여주기 위해

 

<button onclick="calculate(document.getElementById('input').value)">

설명 :

onclick는 버튼 클릭시 이벤트 설정 calculate라는 함수 호출

document.getElementById('input').value는 id이름 input이라는 곳에 값만 가져오는 것이다

함수 호출시 인자로 저 값을 사용한다

 

document.getElementById('result').innnerText = result;

설명 :

id가 result인 태그의 텍스트 요소에 result 값을 대입한다

 

 

전체 코드

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>간단한 계산기</title>
    </head>

    <body>
        <h1>계산기</h1>
        <input type="text" id="input" placeholder="ex) 1 + 1">
        <button onclick="calculate(document.getElementById('input').value)"
        >계산</button>
        <p id="result"></p>

        <script>
            function calculate(val){
                let input = val.split(' ');
                let num1 = Number(input[0]);
                let num2 = Number(input[2]);
                let result;
                
                switch (input[1]){
                    case '+':
                        result = num1 + num2;
                        break;
                    case '-':
                        result = num1 - num2;
                        break;
                    case '*':
                        result = num1 * num2;
                        break;
                    case '/':
                        result = num1 / num2;
                        break;
                }

                document.getElementById('result').innerText = result;
            }
        </script>
    </body>
</html>

 

 

결과

 

만들고 보니 너무나 간단한 계산기를 만들었다는 생각이 들었다

시간도 좀 있고 하니 일반적인 계산기처럼 여러 수식을 한번에 처리할 수 있게

발전된 계산기를 만들어보도록 하자

 

 

필요한 코드 형식

 

정규 표현식은 문자열에 수식과 같은 것들을 검색할 수 있도록 할 수 있다

value.match(/(\d+[\+\-\*\*\/]/g);

설명 : value에 값 내에 조건에 맞는 값을 배열 혈태로 반환한다

\d+ : \d는 숫자 +는 하나 이상의 숫자를 의미한다 ex) 1111

[] : 괄호 안에 문자들 중 하나라는 의미

\+ 등등 : \뒤에 찾으려는 기호를 붙인다면 검색 조건을 만든다

/g : 문자열 내의 모든 패턴을 검색

 

val.replace(/\s+/g, '');

설명 :

\s+ : \s는 공백을 의미하고 +는 하나 이상의 공백을 의미

공백을 제거하는 코드

 

isNaN : is not a number 즉 숫자가 아닐 시 참을 반환하는 함수이다

이것으로 숫자와 연산자를 구분해낼 수 있다

 

이 계산기는 스택구조로 계산할 것이다

우선순위가 높을때는 바로 계산함수로 보내고 그게 아니라면 op스택에 넣는다

 

push와 pop을 사용해 스택에 push와 pop을 사용할 수 있다

각 연산자의 우선순위는 객체로 만들어 사용하겠다

ex) const rule = {'+':1};

 

 

최종 코드

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>간단한 계산기</title>
    </head>

    <body>
        <h1>계산기</h1>
        <input type="text" id="input" placeholder="ex) 1 + 1">
        <button onclick="calculate(document.getElementById('input').value)"
        >계산</button>
        <p id="result"></p>

        <script>
            function calculate(val){
                input = val.replace(/\s+/g, '');
                function sel(value){
                    let parts = value.match(/(\d+|[\+\-\*\/])/g);

                    let num = [];
                    let op = [];

                    const rule = {'+':1, '-':1, '/':2, '*':2};

                    for(let i = 0 ; i < parts.length ; i++){
                        let temp = parts[i];
                        if(!isNaN(temp)){
                            num.push(Number(temp));
                        }
                        else if('+-*/'.includes(temp)){
                            while(rule[temp] <= rule[op[op.length-1]]){
                                last(op.pop(), num);
                            }
                            op.push(temp);
                        }
                    }
                    
                    while(op.length){
                        last(op.pop(), num);
                    }
                    return num[0];
                }

                function last(op, num){
                    let r = num.pop();
                    let l = num.pop();

                    switch(op){
                        case '+':
                            num.push(l + r);
                            break;
                        case '-':
                            num.push(l - r);
                            break;
                        case '*':
                            num.push(l * r);
                            break;
                        case '/':
                            num.push(l / r);
                            break;
                    }
                }
                result = sel(input);
                document.getElementById('result').innerText = result;
            }
        </script>
    </body>
</html>

 

결과

 

이렇게 계산기를 만들어 보았는데
스택 구조를 사용해 1번째 계산기보다 의미있는 코딩이었던 것 같다

JS코드를 어떻게 만들어야 하는지 대충 감이 잡힌다