본문 바로가기
강의/인프런 <1만 시간의 법칙> 웹 페이지 제작하기

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

by 리드민 2022. 3. 3.
반응형

[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] css 코드 분석

1. css 코드 원문

@font-face {
    font-family: 'OTEnjoystoriesBA';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/OTEnjoystoriesBA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 400;
    src: url("https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2") format('woff2'),
    url("https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff") format('woff'),
    url("https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf") format('opentype');
}

@keyframes rotate {
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

html, body {
    width: 100%;
    height: 100%;
}

body {
    font-family: 'GmarketSansMedium';
    background-color: #5B2386;
    color: #FFF;
}

/* 메인 콘텐츠 */
#contents {
    display: flex;
    justify-content: center;
}

.wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 50px;
}

/* 제목 이미지 */
.title {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 50px;
}

.title .clock_img {
    position: relative;
    width: 265px;
    height: 265px;
}

.title_img {
    position: absolute;
    width: 564px;
}

.title_img img {
    width: 100%;
    height: auto;
}

/* 1만 시간의 법칙 설명 */
.intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 50px;
}

.intro .intro_saying {
    font-family: 'OTEnjoystoriesBA';
    font-size: 36px;
    color: #F5DF4D;
    margin-bottom: 50px;
}

.intro .explain {
    display: flex;
    justify-content: center;
    text-align: center;
    margin-bottom: 80px;
}

.intro .quotes {
    position: relative;
    padding-top: 20px;
}

.intro .explain p {
    position: absolute;
    font-size: 17px;
    line-height: 1.7;
}

.intro .explain span {
    font-family: 'GmarketSansBold';
    font-size: 20px;
}

/* 사용자 입력 */
.inputs {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 20px;
    margin-bottom: 70px;
}

.inputs div {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.inputs input {
    padding: 15px 20px;
    margin: 0 15px;
    border: none;
    border-radius: 10px;
    font-size: 20px;
    font-family: 'GmarketSansMedium';
    width: 200px;
}

.inputs input::placeholder {
    color: #BABCBE;
}

/* 버튼 공통 스타일 */
button {
    display: flex;
    align-items: center;
    font-family: 'GmarketSansBold';
    font-size: 20px;
    color: #5B2386;
    background-color: #FCEE21;
    border: none;
    border-radius: 30px;
    padding: 10px 40px;
    cursor: pointer;
    word-break: keep-all;
}

/* 시작 버튼 */
.start {
    display: flex;
    justify-content: center;
    margin-bottom: 80px;
}

.start .btn_wrap {
    position: relative;
}

.start .click_img {
    position: absolute;
    right: -75px;
    bottom: -25px;
}

/* 결과 로딩 */
.result_loading {
    display: none;
    justify-content: center;
    margin-bottom: 80px;
}

.result_loading .img_wrap {
    width: 100px;
    height: 100px;
}

.result_loading .img_wrap img {
    width: 100%;
    height: auto;
    animation: rotate 1.1s infinite linear;
}

/* 결과 */
.result {
    display: none;
    flex-direction: column;
    align-items: center;
    line-height: 1.5;
    margin-bottom: 80px;
}

.result .result_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.result .result_wrap div {
    display: flex;
    align-items: center;
    font-size: 20px;
}

.result span {
    padding: 0 20px;
    font-family: 'GmarketSansBold';
    font-size: 70px;
}

/* 버튼 */
.buttons {
    display: flex;
    justify-content: center;
    margin-top: 70px;
}

/* 공유 버튼 */
.buttons .share button {
    background-color: #FFF;
    margin-left: 20px;
}

/* 모달 - 훈련하러가기 */
#modal {
    position: fixed;
    display: none;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
}

#modal .modal_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 600px;
    height: 600px;
    background-color: #FFF;
    border-radius: 20px;
}

#modal .cheer {
    font-family: 'OTEnjoystoriesBA';
    color: #5B2386;
    text-align: center;
}

#modal .cheer h1 {
    font-size: 80px;
}

#modal .cheer h3 {
    font-size: 30px;
}

#modal .licat_img {
    margin-bottom: 20px;
}

#modal .close_btn {
    box-shadow: 0px 6px 16px 0px rgb(0 0 0 / 15%), 0px 5px 16px 0px rgb(0 0 0 / 15%);
    margin-bottom: 20px;
}

#modal .btn p {
    color: #747474;
    font-size: 13px;
    text-align: center;
}

/* 저작권 */
#copyright {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 50px;
    left: 0;
    bottom: 0;
}

#copyright p {
    font-size: 10px;
    line-height: 1.5;
    padding: 20px 0;
    text-align: center;
}

 

2. css 코드 분석 포함

@font-face {
    font-family: 'OTEnjoystoriesBA';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/OTEnjoystoriesBA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 400;
    src: url("https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2") format('woff2'),
    url("https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff") format('woff'),
    url("https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf") format('opentype');
}

@keyframes rotate {
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

html, body {
    width: 100%;
    height: 100%;
}

body {
    font-family: 'GmarketSansMedium';
    background-color: #5B2386;
    color: #FFF;
}

/* 메인 콘텐츠 */
#contents {
    display: flex;
    justify-content: center;
}

.wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 50px;
}

/* 제목 이미지 */
.title {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 50px;
}

.title .clock_img {
    position: relative;
    width: 265px;
    height: 265px;
}

.title_img {
    position: absolute;
    width: 564px;
}

.title_img img {
    width: 100%;
    height: auto;
}

/* 1만 시간의 법칙 설명 */
.intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 50px;
}

.intro .intro_saying {
    font-family: 'OTEnjoystoriesBA';
    font-size: 36px;
    color: #F5DF4D;
    margin-bottom: 50px;
}

.intro .explain {
    display: flex;
    justify-content: center;
    text-align: center;
    margin-bottom: 80px;
}

.intro .quotes {
    position: relative;
    padding-top: 20px;
}

.intro .explain p {
    position: absolute;
    font-size: 17px;
    line-height: 1.7;
}

.intro .explain span {
    font-family: 'GmarketSansBold';
    font-size: 20px;
}

/* 사용자 입력 */
.inputs {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 20px;
    margin-bottom: 70px;
}

.inputs div {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.inputs input {
    padding: 15px 20px;
    margin: 0 15px;
    border: none;
    border-radius: 10px;
    font-size: 20px;
    font-family: 'GmarketSansMedium';
    width: 200px;
}

.inputs input::placeholder {
    color: #BABCBE;
}

/* 버튼 공통 스타일 */
button {
    display: flex;
    align-items: center;
    font-family: 'GmarketSansBold';
    font-size: 20px;
    color: #5B2386;
    background-color: #FCEE21;
    border: none;
    border-radius: 30px;
    padding: 10px 40px;
    cursor: pointer;
    word-break: keep-all;
}

/* 시작 버튼 */
.start {
    display: flex;
    justify-content: center;
    margin-bottom: 80px;
}

.start .btn_wrap {
    position: relative;
}

.start .click_img {
    position: absolute;
    right: -75px;
    bottom: -25px;
}

/* 결과 로딩 */
.result_loading {
    display: none;
    justify-content: center;
    margin-bottom: 80px;
}

.result_loading .img_wrap {
    width: 100px;
    height: 100px;
}

.result_loading .img_wrap img {
    width: 100%;
    height: auto;
    animation: rotate 1.1s infinite linear;
}

/* 결과 */
.result {
    display: none;
    flex-direction: column;
    align-items: center;
    line-height: 1.5;
    margin-bottom: 80px;
}

.result .result_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.result .result_wrap div {
    display: flex;
    align-items: center;
    font-size: 20px;
}

.result span {
    padding: 0 20px;
    font-family: 'GmarketSansBold';
    font-size: 70px;
}

/* 버튼 */
.buttons {
    display: flex;
    justify-content: center;
    margin-top: 70px;
}

/* 공유 버튼 */
.buttons .share button {
    background-color: #FFF;
    margin-left: 20px;
}

/* 모달 - 훈련하러가기 */
#modal {
    position: fixed;
    display: none;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
}

#modal .modal_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 600px;
    height: 600px;
    background-color: #FFF;
    border-radius: 20px;
}

#modal .cheer {
    font-family: 'OTEnjoystoriesBA';
    color: #5B2386;
    text-align: center;
}

#modal .cheer h1 {
    font-size: 80px;
}

#modal .cheer h3 {
    font-size: 30px;
}

#modal .licat_img {
    margin-bottom: 20px;
}

#modal .close_btn {
    box-shadow: 0px 6px 16px 0px rgb(0 0 0 / 15%), 0px 5px 16px 0px rgb(0 0 0 / 15%);
    margin-bottom: 20px;
}

#modal .btn p {
    color: #747474;
    font-size: 13px;
    text-align: center;
}

/* 저작권 */
#copyright {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 50px;
    left: 0;
    bottom: 0;
}

#copyright p {
    font-size: 10px;
    line-height: 1.5;
    padding: 20px 0;
    text-align: center;
}
반응형

'강의 > 인프런 <1만 시간의 법칙> 웹 페이지 제작하기' 카테고리의 다른 글

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

관련글

티스토리툴바