카테고리 없음
2024.02.17 1만 시간의 법칙 프론트엔드 프로젝트
gosikoca
2024. 2. 17. 20:31
오늘은 짧은 기간동안 제작해본 개인 프로젝트를 가지고 글을 작성해보려 한다.
2주동안 HTML, CSS, JavaScript 를 공부해 보았는데 확실히 단기간이라 모든 부분에서 나의 실력이 월등히 증가한 것은 아니지만 실질적으로 한번 프로젝트를 진행해 봄으로써 복습을 하는 효과가 있었던 것 같다.
아래의 페이지를 직접 구현해 보는 것인데 HTML, CSS, JavaScript 3가지의 언어를 사용하였고 각 각의 태그명 이나 클래스명을 시맨틱하게 작성하기 위해 노력했던 것 같다.
위의 와이드 프레임은 피그마라는 툴을 이용해 제작되어 있던 위니브의 예시를 보고 따라해보았다.
아직까지 서비스를 구현하고 어떤 페이지를 만드는 것이 자연스러워 지기 위해서 갈길이 멀다는 것을 너무 너무 직접 해보면서 많이 느꼈다.
프로젝트를 구성하는데 있어서 파일구성은 아래와 같이 구성 되어 있다.
📦10000
┣ 📂images
┃ ┣ 📜hand.png
┃ ┣ 📜licat.png
┃ ┣ 📜title.png
┃ ┣ 📜title_bg.png
┃ ┣ 📜txt-left.png
┃ ┣ 📜txt-right.png
┃ ┣ 📜txt_subtitle.png
┃ ┗ 📜weniv.png
┣ 📂styles
┃ ┣ 📜common.css
┃ ┣ 📜reset.css
┃ ┗ 📜style.css
┗ 📜index.html
그 중 페이지가 구현이 된 것에 핵심이라 하는 파일 2가지를 보여드린다면 index.html, style.css 이다
먼저 index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>1만 시간의 법칙</title>
<!-- 1. 기본 css 초기화 2. 자주쓰는 css 적용 3. 세부 스타일 적용 -->
<link rel="stylesheet" href="styles/reset.css" />
<link rel="stylesheet" href="styles/common.css" />
<link rel="stylesheet" href="styles/style.css" />
</head>
<body>
<header class="cont-header">
<h1 class="tit-header">
<img src="images/title.png" alt="1만 시간의 법칙" />
</h1>
<img
src="images/txt_subtitle.png"
alt="연습은 어제의 당신보다 당신을 더 낫게 만든다"
/>
<blockquote class="box-quote">
<strong>1만 시간의 법칙</strong>은<br />
어떤 분야의 전문가가 되기 위해서는<br />
최소한 1만 시간의 훈련이 필요하다는 법칙이다.
</blockquote>
</header>
<main class="cont-main">
<h2 class="a11y">훈련 종목과 시간 입력</h2>
<form>
<p class="txt-field">
나는
<label class="a11y" for="lablField">훈련 분야</label>
<input
type="text"
id="lablField"
required
placeholder="예)프로그래밍"
/>
전문가가 될것이다.
</p>
<p class="txt-time">
그래서 앞으로 매일 하루에
<label class="a11y" for="lablTime">훈련 시간</label>
<input
type="number"
id="lablTime"
required
placeholder="예)5시간"
/>
시간씩 훈련할 것이다.
</p>
<button type="button" class="btn-common">
나는 며칠 동안 훈련을 해야 1만 시간이 될까?
</button>
</form>
<section class="cont-result" style="display: none">
<h3 class="a11y">훈련시간 결과</h3>
<p>
당신은
<strong><span class="label-result"></span></strong> 전문가가
되기 위해서<br />
대략 <strong><span class="time-result"></span></strong>일
이상 훈련하셔야 합니다 :)
</p>
<a href="#none" class="btn-common">훈련하러가기 GO!GO!</a
><button class="btn-common white">공유하기</button>
</section>
</main>
<footer class="cont-footer">
<img src="images/weniv.png" alt="weniv" />
<small
>※ 본 서비스 내 이미지 및 콘텐츠의 저작권은 주식회사 WeNiv에
있습니다.<br />
수정 및 재배포, 무단 도용 시 법적인 문제가 발생할 수
있습니다.</small
>
</footer>
<script>
// 해야될 것 -> 나는~될까 버튼을 누르면 cont-result 섹션이 화면에 떠야한다
// #lablField값, #lablTime값 받아서 cont-result 섹션에서 출력
const myBtn = document.querySelector(".btn-common");
myBtn.addEventListener("click", function (event) {
const lablF = document.getElementById("lablField").value;
const lablT = document.getElementById("lablTime").value;
document.querySelector(".label-result").textContent = lablF;
document.querySelector(".time-result").textContent = Math.ceil(
10000 / lablT
);
document.querySelector(".cont-result").style.display = "block";
});
</script>
</body>
</html>
style.css
body {
padding: 194px 0 70px;
background: #5B2386;
color: #fff;
text-align: center;
}
/* header css */
.cont-header {
margin-bottom: 102px;
}
.cont-header .tit-header {
position: relative;
margin-bottom: 125px;
}
.cont-header .tit-header::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
margin: -128px 0 0 -128px;
width: 256px;
height: 256px;
background-image: url(../images/title_bg.png);
}
.cont-header .box-quote {
position: relative;
max-width: 413px;
padding: 0 40px;
margin: 78px auto 0;
font-size: 18px;
line-height: 24px;
}
.cont-header .box-quote::before,
.cont-header .box-quote::after {
content: '';
position: absolute;
top: 50%;
margin-top: -16px;
width: 37px;
height: 32px;
}
.cont-header .box-quote::before {
left: 0;
background-image: url(../images/txt-left.png);
}
.cont-header .box-quote::after {
right: 0;
background-image: url(../images/txt-right.png);
}
.cont-header .box-quote strong {
font-size: 24px;
}
/* main css */
.cont-main {
margin: 102px 0 130px;
}
.cont-main .txt-field,
.cont-main .txt-time {
}
.txt-field input,
.txt-time input {
width: 228px;
padding: 17px 41px 16px 49px;
margin: 0 17px;
border-radius: 7px;
border: none;
box-sizing: border-box;
}
.cont-main form .btn-common {
position: relative;
margin-top: 80px;
}
.cont-main form .btn-common::after {
position: absolute;
top: 30px;
right: -80px;
content: '';
width: 64px;
height: 72px;
background-image: url(../images/hand.png);
}
.cont-main .cont-result {
margin-top: 147px;
}
.cont-main .cont-result p {
margin-bottom: 127px;
line-height: 92px;
font-size: 24px;
}
.cont-main .cont-result strong {
vertical-align: top;
font-size: 72px;
}
.cont-main .cont-result .white {
margin-left: 18px;
}
/* footer css */
.cont-footer small {
display: block;
margin-top: 20px;
}
이런 코드들의 통하여 직접 페이지를 구성해보는 시간을 가졌고 앞으로도 코드를 구현할 수 있는 많은 언어나 방법등을 익혀나갈 생각이다.