1. 공부계획
3개월간 진행되는 프론트엔드 스쿨 과정은 길기도 하고 짧기도 한 시간일 수 있겠지만, 개발 공부에만 몰입하여 진행할 수 있는 좋은 기회라고 생각한다.
난 이 과정을 다음과 같은 목표로 프론트엔드 개발자가 되기 위한 능력을 성장시키고자 한다.
-
11월 : HTML / CSS / Javascript 공부 및
프로젝트(ex. 자바스크립트로 구현하는 게임) 구현 및 복습 -
12월 : JavaScript, jquery, Ajax, 알고리즘 공부 및
프로젝트(ex. 성격 테스트) 만들기
- 01월 : Node, Express / MongoDB & MySQL 공부 및
프로젝트(ex. 반응형 웹 기반의 회원제 SNS 서비스, 오픈마켓 서비스) 구축
2. 프로젝트 만들기
프론트엔드 스쿨 과정의 첫날로 HTML, CSS를 이용한 간단 이력서 프로젝트를 만들게 되었다.
최근 개인 프로젝트를 만들 때 React만 쓰고 있다가 간단하다고 생각하는 것을 만들면서도
기존에 배웠던 것을 잊은 내용들이 많았는데 CSS 사용 방법을 다시 찾아보고 떠올리면서 만들게 되었다.
많이 부족하다는 것을 깨닫게 되었다.
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>김준수 이력서</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="mainbox">
<div class="title-box">
<h1>김준수</h1>
<p class="name-text">Front-End 개발자</p>
</div>
<section>
<h2>ABOUT ME</h2>
<p class="about-me-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
<section>
<h2>EXPERIENCE</h2>
<div class="float-wrap">
<p class="title-text">Awesome Programming Company</p>
<p class="year-text">2021 - Now</p>
</div>
<p class="desc-text">Front-End Web Developer</p>
<p class="desc-subtext">HTML/CSS, JS, React, ...</p>
<div class="float-wrap">
<p class="title-text">Ministry of Health</p>
<p class="year-text">2015 - 2019</p>
</div>
<p class="desc-text">UI/UX Designer</p>
<p class="desc-subtext">Web design</p>
<div class="float-wrap">
<p class="title-text">Freelance Work</p>
<p class="year-text">2012 - 2015</p>
</div>
<p class="desc-text">Graphic Designer</p>
<p class="desc-subtext">Graphic Design, Editorial Design</p>
</section>
<section>
<h2>ACTIVITIES</h2>
<div class="float-wrap">
<p class="title-text">Front-End Web Developer Forum Volunteer</p>
<p class="year-text">2019 - 2020</p>
</div>
<p class="desc-text">Application Page Development</p>
<p class="desc-subtext">Lorem ipsum dolor sit amet.</p>
<div class="float-wrap">
<p class="title-text">LIKELION SEOUL</p>
<p class="year-text">2017 - 2018</p>
</div>
<p class="desc-text">Teacher in Mutsa University</p>
<p class="desc-subtext">Lorem ipsum dolor sit amet.</p>
<div class="float-wrap">
<p class="title-text">Open Source Committer</p>
<p class="year-text">2011 - 2013</p>
</div>
<p class="desc-text">Angular JS</p>
<p class="desc-subtext">Lorem ipsum dolor sit amet.</p>
</section>
<section>
<h2>EDUCATION</h2>
<div class="float-wrap">
<p class="title-text">Mutsa University</p>
<p class="year-text">2008 - 2012</p>
</div>
<p class="desc-text">Computer Science and Engineering</p>
<div class="float-wrap">
<p class="title-text">Mutsa High school</p>
<p class="year-text">2006 - 2008</p>
</div>
<p class="desc-text">Visual Communication Design</p>
<div class="float-wrap">
<p class="title-text">Online Programming Academy</p>
<p class="year-text">2006 - 2007</p>
</div>
<p class="desc-text">Python Course</p>
</section>
<section>
<h2>AWARDS</h2>
<div class="float-wrap">
<p class="title-text">LIKELION SEOUL</p>
<p class="year-text">2018</p>
</div>
<p class="desc-text">Best Developer Award</p>
</section>
</div>
<footer>
<p>Copyright CODE LION All rights reserved. </p>
</footer>
</body>
</html>style.css
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800&display=swap');
* {
font-family: 'Montserrat';
}
body,
h1,
h2 {
margin: 0px;
padding: 0px;
}
body {
min-width: fit-content;
}
h1 {
font-size: 36px;
font-weight: bold;
font-style: italic;
}
h2 {
font-size: 20px;
color: #282828;
font-weight: lighter;
margin-bottom: 16px;
border-bottom: 1px solid #ebebeb;
padding-bottom: 5px;
}
.name-text {
font-size: 16px;
color: #7c7c7c;
font-weight: bold;
}
.about-me-text {
font-size: 10px;
line-height: 16px;
}
.mainbox {
width: 610px;
padding: 30px;
margin: 30px;
margin-right: auto;
margin-left: auto;
border: 1px solid #ebebeb;
box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.1);
}
.title-box {
text-align: right;
}
section {
margin-bottom: 24px;
}
.float-wrap {
overflow: hidden;
}
.title-text {
font-size: 11px;
font-weight: bold;
color: #282828;
float: left;
}
.year-text {
font-size: 11px;
font-weight: bold;
color: #282828;
float: right;
}
.desc-text {
font-size: 9px;
}
.desc-subtext {
font-size: 9px;
color: #282828;
padding-left: 16px;
}
.sns-img {
width: 12px;
height: 12px;
}
.sns-wrap {
text-align: right;
}
footer {
text-align: center;
background-color: #1e1e1e;
padding: 20px;
font-size: 12px;
color: #919191;
}3. 오늘 공부했던 것에 대해서
프론트엔드 스쿨 과정 첫날부터 그동안 부족했던 html,css 공부를 해서 재미있었다.
그러나 기초에만 헤메고 있으면 안 되니,
리액트도 공부해보면서 기술을 연마해야 하는 것이 좋을 것 같다.
개발자