인프런 <1만 시간의 법칙> 웹 페이지 제작하기 강의 정리 2

[1] 환경

테스트 환경

HW : 삼성 노트북 인텔 11세대 i5-1135G, mx450, 24GB ddr4 RAM, 500GB SSD1, 500GB SSD2 OS : ubuntu 20.04.2 LTS desktop version SW : visual studio code

 

[2] 설명

웹 페이지 만드는 강좌로

http://paullab.co.kr/10000hours.html

1만 시간의 법칙

 

HTML, CSS, JavaScript를 활용해서 웹페이지를 만든다.

 

HTML(Hypertext Markup Language) : 웹 페이지를 만들기 위해서 사용되는 기본적인 웹 언어의 종류이다. 하이퍼 텍스트를 작성하기 위해서 개발되었다. 인터넷에서 웹을 통해 접근되는 대부분의 웹 페이지는 HTML로 작성된다. HTML은 문서의 글자크기, 글자색, 글자모양, 그래픽, 문서이동(하이퍼링크) 등을 정의하는 명령어로서 홈페이지를 작성하는 데 쓰인다. HTML에서 사용하는 명령어는 태그(tag)라고 하는데 꺽쇠괄호"<>"를 사용하여 나타낸다. 일반적으로 태그는 시작과 끝을 표시하는 2개의 쌍으로 이루어져 있으나 "img", "br"등의 태그와 같이 시작태그만으로 그 영향을 나타내는 경우도 있으며, 종료 태그의 이름은 슬래시 문자[/]로 시작된다. 이와같이 HTML로 작성된 문서를 HTML문서라 하며 이 HTML로 작성된 문서를 웹 브라우저가 해석하여 이용자에게 보여주게 된다. HTML에서는 문서가 별도의 코드(code)를 인식하여 완벽한 하이퍼텍스트를 만들 뿐만 아니라 단어 또는 단문을 인터넷의 다른 장소나 파일로 연결시킬 수 있다.

 

CSS(Cascading Style Sheets) : 기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따르는데, 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 바로 CSS이다. 간단히 스타일 시트라고도 한다.
HTML을 이용해서 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나 하나를 일일이 지정해주어야 하지만, 웹 페이지의 스타일(작성형식)을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다.
따라서 웹 개발자들은 보다 풍부한 디자인으로 웹을 설계할 수 있고, 글자의 크기, 글자체, 줄간격, 배경 색상, 배열위치 등을 자유롭게 선택하거나 변경할 수 있으며 유지·보수도 간편하게 할 수 있다.

 

JavaScript : 우리가 매일 접속하는 웹사이트는 크게 3가지 요소로 구성된다. ‘HTML(Hyper Text Markup Language)’, ‘CSS(Cascading Style Sheets)’, ‘자바스크립트(Javascript)’다. HTML은 웹페이지의 큰 뼈대를 제공하고, CSS는 색깔이나 글씨체와 같은 디자인 요소를 관리한다. 자바스크립트는 크로스 플랫폼(cross platform), 객체지향 스크립트 언어로 웹페이지의 동작을 담당한다. 예를 들어 자바스크립트를 이용하면 ‘버튼을 클릭하면 밑에 날짜를 보여줘’라는 식의 명령을 내릴 수 있다.

웹 페이지에서 사용자로부터 특정 이벤트나 입력 값을 받아 동적인 처리를 목적으로 고안된 객체 기반의 스크립트 프로그래밍 언어.

 

[3] javascript 코드 분석

 

1. javascript 코드 원문

const startButton = document.querySelector(".start_btn");
const result = document.querySelector(".result");
const modal = document.querySelector("#modal");
const openButton = document.querySelector(".modal_btn");
const closeButton = document.querySelector(".close_btn");
const shareButton = document.querySelector(".share_btn");
const loading = document.querySelector(".result_loading");

function calculator() {
    const fieldValue = document.querySelector("#field_value");
    let timeValue = document.querySelector("#time_value");
    let timeValue_int = Number(timeValue.value);

    const fieldResult = document.querySelector(".field_result");
    const timeResult = document.querySelector(".time_result");

    if(fieldValue.value == "") {
        alert('입력되지 않았습니다.');
        fieldValue.focus();
        return false;
    } else if (timeValue.value== "") {
        alert('입력되지 않았습니다.');
        timeValue.focus();
        return false;
    } else if (timeValue_int > 24) {
        alert('잘못된 값입니다. 24이하의 값을 입력해 주세요.');
        return false;
    }

    result.style.display = "none";
    loading.style.display = "flex";

    setTimeout(function() {
        loading.style.display = "none";
        result.style.display = "flex";
        fieldResult.innerText = fieldValue.value;
        timeResult.innerText = parseInt((10000/timeValue_int), 10);
    }, 1800);   
}

function openModal() {
    modal.style.display = "flex";
}

function closeModal() {
    modal.style.display = "none";
}

window.onclick = function (event) {
    if(event.target == modal) {
        closeModal();
    }
};

function copyUrl() {
    let url = window.location.href;
    let tmp = document.createElement('input');
    

    document.body.appendChild(tmp);
    tmp.value = url;
    tmp.select();
	document.execCommand("copy");
    document.body.removeChild(tmp);
    
	alert("URL이 복사되었습니다"); 
}

shareButton.addEventListener('click', copyUrl);
openButton.addEventListener("click", openModal);
closeButton.addEventListener("click", closeModal);
startButton.addEventListener("click", calculator);

 

2. javascript 코드 분석 포함

const startButton = document.querySelector(".start_btn");
// 상수 startButton 선언 
const result = document.querySelector(".result");
const modal = document.querySelector("#modal");
const openButton = document.querySelector(".modal_btn");
const closeButton = document.querySelector(".close_btn");
const shareButton = document.querySelector(".share_btn");
const loading = document.querySelector(".result_loading");

function calculator() {
// 함수 calculator 선언
    const fieldValue = document.querySelector("#field_value");
    // 상수 fieldValue 선언
    let timeValue = document.querySelector("#time_value");
    // 변수 timevalue 선언
    let timeValue_int = Number(timeValue.value);
	// 변수 timevalue_int 선언

    const fieldResult = document.querySelector(".field_result");
    // 상수 fieldResult 선언
    const timeResult = document.querySelector(".time_result");
	// 상주 timeResult 선언

    if(fieldValue.value == "") {
    // if문 선언
        alert('입력되지 않았습니다.');
        // 경고문 입력되지 않았습니다. 띄우기
        fieldValue.focus();
        // 
        return false;
        // 함수의 결과로 false 값을 리턴
    } else if (timeValue.value== "") {
    // else if 문 선언 timeValue 값이 공백일때 괄호안에 문장 실행
        alert('입력되지 않았습니다.');
        // 경고문 입력되지 않았습니다 출력
        timeValue.focus();
        // 객채 timeValue의 속성값 focus 출력
        return false;
        // false 값 리턴
    } else if (timeValue_int > 24) {
    // else if문 선언 timeValue_int 값이 24 초과일때 괄호안의 문장 선언 
        alert('잘못된 값입니다. 24이하의 값을 입력해 주세요.');
        // 경고문으로 잘못된 값입니다. 24이하의 값을 입력해 주세요. 출력
        return false;
        // false 값 리턴
    }

    result.style.display = "none";
    // 객체 result의 속성값 style의 속성 display 값에 none 저장
    loading.style.display = "flex";
    // 객체 loading의 속성값 style의 속성 display 값에 flex 저장

    setTimeout(function() {
    // 
        loading.style.display = "none";
        result.style.display = "flex";
        fieldResult.innerText = fieldValue.value;
        timeResult.innerText = parseInt((10000/timeValue_int), 10);
    }, 1800);   
}

function openModal() {
// 함수 openModal 선언
    modal.style.display = "flex";
    // modal 객체의 속성 style의 속성 display에 flex 저장
}

function closeModal() {
// 함수 closeModal 선언
    modal.style.display = "none";
    // modal 객체의 속성 style의 속성 display에 none 저장
}

window.onclick = function (event) {
    if(event.target == modal) {
    // if문 선언, event.target 값이 modal과 같을 때 괄호 안의 문장 실행 
        closeModal();
        // 함수 closeModal(); 호출
    }
};

function copyUrl() {
// 함수 copyUrl 선언
    let url = window.location.href;
    변수 url를 선언하고 window.location.href 값을 저장
    let tmp = document.createElement('input');
    // 변수 tmp를 선언하고 document.createElement('input') 값을 저장
    

    document.body.appendChild(tmp);
    // 객체 document의 속성 body의 함수 appendChilde에 tmp 값 넣음
    tmp.value = url;
    // 객체 tmp의 속성 value에 값 url 저장
    tmp.select();
    // 함수 tmp.select() 호출
	document.execCommand("copy");
    // 함수 document.execCommand("copy") 호출
    document.body.removeChild(tmp);
    // 함수 document.body.removeChild(tmp) 호출
    
	alert("URL이 복사되었습니다"); 
    // 함수 alert("URL이 복사되었습니다"); 호출
}

shareButton.addEventListener('click', copyUrl);
// 함수 addEventListener 호출
openButton.addEventListener("click", openModal);
// 함수 addEventListener 호출
closeButton.addEventListener("click", closeModal);
// 함수 addEventListener 호출
startButton.addEventListener("click", calculator);
// 함수 addEventListener 호출