반응형
[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만 시간의 법칙
1만 시간의 법칙은 어떤 분야의 전문가가 되기 위해서는 최소한 1만 시간의 훈련이 필요하다는 법칙이다.
paullab.co.kr
웹 페이지를 어떻게 만드는지 강의 하는 강좌이다.
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] html 코드 분석
일단 웹페이지를 만들때는 기본적으로 html 언어를 이용해서 코드를 작성해야 한다.
http://paullab.co.kr/10000hours.html
1만 시간의 법칙
1만 시간의 법칙은 어떤 분야의 전문가가 되기 위해서는 최소한 1만 시간의 훈련이 필요하다는 법칙이다.
paullab.co.kr
페이지의 html 코드를 분석해 보자
1. html 코드 원문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="img/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/10000hours.css">
<title>1만 시간의 법칙</title>
</head>
<body>
<section id="contents">
<div class="wrapper">
<div class="title">
<img class="clock_img" src="img/clock.png" alt="background">
<div class="title_img">
<img src="img/title.png" alt="1만 시간의 법칙">
</div>
</div>
<div class="intro">
<div class="intro_saying">"연습은 어제의 당신보다 당신을 더 낫게 만든다."</div>
<div class="explain">
<div class="quotes">
<img src="img/quotes.png" alt="따옴표">
</div>
<p>
<span>1만 시간의 법칙</span>은<br>어떤 분야의 전문가가 되기 위해서는<br>최소한 1만 시간의 훈련이 필요하다는 법칙이다.
</p>
</div>
</div>
<div class="inputs">
<div class="field">
<p>나는</p>
<input id="field_value" type="text" placeholder="예)프로그래밍">
<p>전문가가 될 것이다.</p>
</div>
<div class="time">
<p>그래서 앞으로 매일 하루에</p>
<div>
<input id="time_value" type="number" placeholder="예)5">
<p>시간씩 훈련할 것이다.</p>
</div>
</div>
</div>
<div class="start">
<div class="btn_wrap">
<button class="start_btn">나는 며칠 동안 훈련을 해야 1만 시간이 될까?</button>
<div class="click_img">
<img src="img/click.png" alt="클릭">
</div>
</div>
</div>
<div class="result_loading">
<div class="img_wrap">
<img src="img/loading.png" alt="로딩 중">
</div>
</div>
<div class="result">
<div class="result_wrap">
<div>
당신은<span class="field_result"></span>전문가가 되기 위해서
</div>
<div>
대략<span class="time_result"></span>일 이상 훈련하셔야 합니다! :)
</div>
</div>
<div class="buttons">
<div class="go">
<button class="modal_btn">훈련하러 가기 GO!GO!</button>
</div>
<div class="share">
<button class="share_btn">공유하기</button>
</div>
</div>
</div>
</div>
</section>
<section id="modal">
<div class="modal_wrap">
<div class="cheer">
<h1>화이팅!!♥♥♥</h1>
<h3>당신의 꿈을 응원합니다!</h3>
</div>
<div class="licat_img">
<img src="img/licat.png" alt="라이캣 응원">
</div>
<div class="btn">
<button class="close_btn">종료하고 진짜 훈련하러 가기 GO!GO!</button>
<p>(그냥 닫기 버튼입니다.)</p>
</div>
</div>
</section>
<section id="copyright">
<div class="logo_img">
<img src="img/logo.png" alt="weniv">
</div>
<p>
※ 본 서비스 내 이미지 및 콘텐츠의 저작권은 주식회사 WeNiv에 있습니다.<br>
수정 및 재배포, 무단 도용 시 법적인 문제가 발생할 수 있습니다.
</p>
</section>
<script type="text/javascript" src="js/10000hours.js"></script>
</body>
</html>
2. html 코드 분석 포함
<!DOCTYPE html>
<!-- html 버전 선언 -->
<html lang="en">
<!-- html 언어 설정 -->
<head>
<!-- 헤드 설정 태그 -->
<meta charset="UTF-8">
<!-- 매타 데이터 설정, 문자셋을 UTF-8로 한다. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 메타 데이터 설정 너비를 웹페이지를 보고있는 장치와 동일하게 한다. 웹 사이트의 배율은
100%로 설정한다. -->
<link rel="shortcut icon" href="img/favicon.ico">
<!-- 문서와 외부 소스 사이의 관계를 정의할 때 사용, 현재 문서와 외부 리소스 사이의 연관 관계를 명시,
홈페이지 타이틀 옆에 붙는 조그만 아이콘을 정한다. 파비콘 파일 경로를 지정한다. -->
<link rel="stylesheet" type="text/css" href="css/reset.css">
<!-- 문서와 외부 소스 사이의 관계를 정의할 때 사용, 스타일 시트로 연결,
css파일 링크가 reset.css에 있음 -->
<link rel="stylesheet" type="text/css" href="css/10000hours.css">
<!-- 문서와 외부 소스 사이의 관계를 정의할 때 사용, 스타일 시트로 연결,
css파일 링크가 10000hours.css에 있음 -->
<title>1만 시간의 법칙</title>
<!-- 웹 페이지의 제목을 나타낸다. -->
</head>
<!-- 헤드 종료를 나타내는 태그 -->
<body>
<!-- 문서의 몸통을 나타내는 태그 -->
<section id="contents">
<!-- 문서의 독립적인 구획을 나타낸다. -->
<div class="wrapper">
<!-- division의 약자 레이아웃을 만들때 주로 사용 단일 요소의 레이아웃을 사용할 때 사용한다. -->
<div class="title">
<!-- 레이아웃을 만들때 주로 사용, 묶어서 스타일을 지정 -->
<img class="clock_img" src="img/clock.png" alt="background">
<!-- img : 이미지를 삽입, "clock_img 스타일 clock_img 설정,
src : 이미지 경로 설정, 그림이 렌더링되지 않을 경우 background로 표시 -->
<div class="title_img">
<!-- div : 레이아웃을 만들때 주로 사용, class : 스타일을 지정 -->
<img src="img/title.png" alt="1만 시간의 법칙">
<!-- img : 이미지를 삽입, src : 이미지 경로 설정,
img/title.png : 이미지 경로 alt="1만 시간의 법칙 : 이미지를 보여줄 수 없을때
해당 이미지를 대체할 텍스트를 명시 -->
</div>
<!-- 레이아웃을 만들때 사용 -->
</div>
<div class="intro">
<!-- div : 레이아웃을 만들때 사용, class="intro" : 그룹으로 묶어서 스타일을 지정 -->
<div class="intro_saying">"연습은 어제의 당신보다 당신을 더 낫게 만든다."</div>
<!-- div : 레이아웃을 만들때 사용, class : 그룹으로 묶어서 스타일을 지정 -->
<div class="explain">
<!-- div : 레이아웃을 만들때 사용, class : div와 span 요소는 보통 class 속성을 같이 사용한다.
이 class 속성은 원하는 이름을 넣고 css에서 class 이름을 선택자로 사용 -->
<div class="quotes">
<!-- div : 레이아웃을 만들때 사용, class : div와 span 요소는
보통 class 속성을 같이 사용한다.
이 class 속성은 원하는 이름을 넣고 css에서 class 이름을 선택자로 사용 -->
<img src="img/quotes.png" alt="따옴표">
<!-- img : 이미지를 삽입, src : 이미지 경로 설정,
img/title.png : 이미지 경로 alt="따옴표" : 이미지를 보여줄 수 없을때
해당 이미지를 대체할 텍스트를 명시 -->
</div>
<!-- div 태그 종료 -->
<p>
<!-- 문단을 만든다. -->
<span>1만 시간의 법칙</span>은<br>어떤 분야의 전문가가 되기 위해서는<br>최소한 1만 시간의 훈련이 필요하다는 법칙이다.
<!-- span : 객체의 크기만큼 공간이 할당이 된다.
br : 줌 바꿈을 한다. -->
</p>
<!-- p 태그 사용 종료 -->
</div>
<!-- div 태그 사용 종료 -->
</div>
<!-- div 태그 사용 종료 -->
<div class="inputs">
<!-- div : 레이아웃을 만들때 주로 사용 class : div와 span 요소는 보통 class 속성을 같이 사용한다.
이 class 속성은 원하는 이름을 넣고 css에서 class 이름을 선택자로 사용 -->
<div class="field">
<!-- div : 레이아웃을 만들때 주로 사용, class : 스타일을 지정 -->
<p>나는</p>
<input id="field_value" type="text" placeholder="예)프로그래밍">
<!-- input : 사용자로부터 정보를 받아들이는 용도로 사용,
id : 한페이지의 한번의 정의로 고유한 하나의 태그만 사용할 수 있다,
type : input 요소가 나타낼 타입을 명시,
placeholder : input 요소나 textarea 요소에 안내문을 넣을 수 있다. -->
<p>전문가가 될 것이다.</p>
<!-- 문단을 만든다. -->
</div>
<div class="time">
<!-- div : 레이아웃을 만들때 주로 사용, class : div와 span 요소는 보통 class 속성을 같이 사용한다.
이 class 속성은 원하는 이름을 넣고 css에서 class 이름을 선택자로 사용 -->
<p>그래서 앞으로 매일 하루에</p>
<div>
<input id="time_value" type="number" placeholder="예)5">
<!-- input id : 전체 문서에서 고유해야 하는 고유 식별자를 정의 -->
<p>시간씩 훈련할 것이다.</p>
<!-- p : 문단을 만들 때 쓰인다 -->
</div>
</div>
</div>
<div class="start">
<!-- div와 span 요소는 보통 class 속성을 같이 사용한다.
이 class 속성은 원하는 이름을 넣고 css에서 class 이름을 선택자로 사용 -->
<div class="btn_wrap">
<!-- div class : div와 span 요소는 보통 class 속성을 같이 사용한다.
이 class 속성은 원하는 이름을 넣고 css에서 class 이름을 선택자로 사용 -->
<button class="start_btn">나는 며칠 동안 훈련을 해야 1만 시간이 될까?</button>
<!-- button : 클릭할 수 있는 html 요소, class : 버튼이 여러 개일 경우
일괄적으로 동일한 속성을 줄 수 있다. -->
<div class="click_img">
<!-- div class : div와 span 요소는 보통 class 속성을 같이 사용한다.
이 class 속성은 원하는 이름을 넣고 css에서 class 이름을 선택자로 사용 -->
<img src="img/click.png" alt="클릭">
<!-- img : 이미지를 삽입, src : 이미지 경로 설정,
img/title.png : 이미지 경로, alt="따옴표" : 이미지를 보여줄 수 없을때
해당 이미지를 대체할 텍스트를 명시 -->
<!-- -->
</div>
</div>
</div>
<div class="result_loading">
<!-- div class : 복수의 요소에 스타일을 적용 -->
<div class="img_wrap">
<!-- div class : div와 span 요소는 보통 class 속성을 같이 사용한다.
이 class 속성은 원하는 이름을 넣고 css에서 class 이름을 선택자로 사용 -->
<img src="img/loading.png" alt="로딩 중">
</div>
</div>
<div class="result">
<div class="result_wrap">
<div>
당신은<span class="field_result"></span>전문가가 되기 위해서
</div>
<div>
대략<span class="time_result"></span>일 이상 훈련하셔야 합니다! :)
<!-- span : HTML 문서에서 인라인 요소를 하나로 묶을 때 사용
class : div와 span 요소는 보통 class 속성을 같이 사용한다.
이 class 속성은 원하는 이름을 넣고 css에서 class 이름을 선택자로 사용한다.
class 값 이름은 나중에 다시 봐도 알기 쉽고 의미에 맞게 짓는 것이 적합하다.
추후 수정할 수 있기 때문이다.-->
</div>
</div>
<div class="buttons">
<div class="go">
<button class="modal_btn">훈련하러 가기 GO!GO!</button>
<!-- button : 버튼 태그 사용 , class : 그룹으로 묶어서 스타일을 지정 -->
</div>
<div class="share">
<!-- div : 레이아웃을 만들때 주로 사용, class : 그룹으로 묶어서 스타일을 지정 -->
<button class="share_btn">공유하기</button>
</div>
</div>
</div>
</div>
</section>
<section id="modal">
<!-- html 문서에 포함된 독립적인 섹션을 정의할때 사용 -->
<div class="modal_wrap">
<!-- div : 레이아웃을 만들때 주로 사용, class : 그룹으로 묶어서 스타일을 지정 -->
<div class="cheer">
<!-- div : 레이아웃을 만들때 주로 사용, class : 그룹으로 묶어서 스타일을 지정 -->
<h1>화이팅!!♥♥♥</h1>
<!-- 가장 큰 제목을 쓴다. -->
<h3>당신의 꿈을 응원합니다!</h3>
<!-- 3번째로 큰 제목을 쓸 때 사용 -->
</div>
<div class="licat_img">
<!-- div : 레이아웃을 만들때 주로 사용, class : 그룹으로 묶어서 스타일을 지정 -->
<img src="img/licat.png" alt="라이캣 응원">
<!-- img src="img/licat.png" : 이미지 소스를 지정
alt : "라이캣 응원" : 대체할 문자열로 라이캣 응원을 표시-->
</div>
<div class="btn">
<!-- div : 레이아웃을 만들때 주로 사용, class : 그룹으로 묶어서 스타일을 지정 -->
<button class="close_btn">종료하고 진짜 훈련하러 가기 GO!GO!</button>
<!-- button : 버튼 태그 class : 그룹으로 묶어서 스타일을 지정 -->
<p>(그냥 닫기 버튼입니다.)</p>
<!-- 하나의 문단을 만들때 쓰인다 -->
</div>
</div>
</section>
<section id="copyright">
<!-- html 문서에 포함된 독립적인 섹션을 정의할 때 사용 -->
<div class="logo_img">
<!-- div : 레이아웃을 만들때 주로 사용, class : 그룹으로 묶어서 스타일을 지정 -->
<img src="img/logo.png" alt="weniv">
<!-- img src="img/logo.png" : 이미지 경로 지정, alt="weniv" : 대체할 문자열 지정 -->
</div>
<p>
※ 본 서비스 내 이미지 및 콘텐츠의 저작권은 주식회사 WeNiv에 있습니다.<br>
<!-- br : 개행 -->
수정 및 재배포, 무단 도용 시 법적인 문제가 발생할 수 있습니다.
</p>
</section>
<!-- section 태그 종료 -->
<script type="text/javascript" src="js/10000hours.js"></script>
<!-- 자바스크립트와 같은 클라이언트 사이드 스크립트 정의 src : 소스 파일 위치 -->
</body>
<!-- body 태그 종료 -->
</html>
<!-- html 종료 -->
반응형
'강의 > 인프런 <1만 시간의 법칙> 웹 페이지 제작하기' 카테고리의 다른 글
| 인프런 <1만 시간의 법칙> 웹 페이지 제작하기 강의 정리 3 (0) | 2022.03.03 |
|---|---|
| 인프런 <1만 시간의 법칙> 웹 페이지 제작하기 강의 정리 2 (0) | 2022.02.24 |