1)학습한 내용
*이력서 html 작성
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="./animate.css">
<script src="./wow.min.js"></script>
<script>new WOW().init();</script>
<script src="https://kit.fontawesome.com/289fee3506.js" crossorigin="anonymous"></script>
<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<section id="profile">
<div class="profile">
<div class="container">
<div class="back">
<div class="pro_img"><img src="./img/picture.jpg"></div>
<div class="pro_text">
<h4>성 보 경</h4>
<h1>Personal information</h1>
<h2><span><i class="fa-solid fa-map-location-dot" style="margin-right: 10px;font-size: 15px;"></i></span><span>대구시 중구 서성로 88-5<br> (경진 테크빌,102동 702호)</span></h2>
<h2><sapn><i class="fa-solid fa-mobile-screen"style="margin-right: 12px;font-size: 18px;"></i></sapn><sapn>010.4547.1548</sapn></h2>
<h2><sapn><i class="fa-solid fa-envelope"style="margin-right: 10px;font-size: 15px;"></i></sapn><sapn>sbk8731@naver.com</sapn></h2>
</div>
<div class="pro_text1">
<h1>educational background</h1>
<h2>고등학교</h2>
<h3>2010.02 ~ 2013.02<br><br>제일고등학교 졸업</h3>
<h2>대학교</h2>
<h3>2013.03 ~ 2020.02<br><br>경운대학교 항공정보통신공학과 졸업</h3>
</div>
<div class="pro_text2">
<h1>Certificate</h1>
<h2>-무선설비기사<br>-운전면허증(1종보통)</h2>
</div>
</div>
</div>
<div class="container1">
<div class="self_text">
<h1 style="font-weight: 500;">A letter of self-introduction</h1>
<h2 style="font-weight: 500;">자기소개</h2>
<h3>중학교 다니는 시절부터 내가 해본 것이 나한테 맞는 것인지 안 맞는 것인지 도전해 보고 결정하자는 가치관이 생겼습니다. 이러한 가치관을 세우게 된 계기는 중학교 1학년 때 방과 후 수업이 있었습니다. 그 수업에서 제가 좋아하는 수업이 없어서 남는 수업을 들어가게 되었는데 그 수업이 제과 제빵을 하는 수업이었습니다. 그 당시에는 요리에 관심이 없었기에 해보지도 않고 하 기 싫다는 생각만 앞섰습니다. 하지만 제가 생각한 거 와 달랐습니다. 첫 수업 때 만든 것이 초코 쿠키였습니다. 레시피를 보면서 계량을 하고 재료들을 정량으로 넣어 만들었습니다. 결과물이 시중에서 파는 초코 쿠키와 비교가 되었지만 만들었던 쿠키를 친구들과 가족들에게 맛을 보라고 나누어 주었는데 맛있다는 말을 듣는 순간 뿌듯함과 이걸 만드는데 성공했다는 성취감을 느끼는 경험을 하면서 해보지도 않고 하기 싫다는 생각을 가지지 말고 도전해 보고 정하자는 가치관이 생겼습니다.</h3>
</div>
<div class="self_text1">
<h1 style="font-weight: 500;">성격 장단점</h1>
<h2>어렸을 때부터 어머니께서는 시험을 못 봐도 혼내시지 않으셨지만 제가 예절학원을 다닌 만큼 예의 없거나 거짓말을 하였을 시에는 채벌을 하였습니다. 그렇기에 항상 신뢰를 쌓고, 정직하게 살려고 노력합니다. 또한, 시작한 일은 끝을 봐야 하는 성격 덕분에 시작하게 된 일은 중도 포기하지 않고 내가 모르거나 어려운 것이 있어도 이해할 때까지 자세히 찾아봅니다. 그리고 제게 주어진 일을 신속하게 완수해 내기 위해 늦은 시간까지 하고자 하는 할당량을 꼭 끝내겠다는 마음가짐과 맡겨진 일은 끝까지 완성해야 다른 일을 시작하는 책임감이 저의 큰 장점입니다. 모르는 것을 찾아보고 알아가는데 시간이 많이 걸린다는 점이 단점입니다.</h2>
</div>
<div class="self_text2">
<h1 style="font-weight: 500;">지원동기 및 입사 후 포부</h1>
<h2>ai 스쿨 실무 프로젝트를 하기 전 이론 수업을 들으면서 이 분야가 저의 적성이 아니라는 생각이 들기도 했습니다. 하지만 실무 프로젝트를 시작하면서 모르는 것이 대부분이었지만 포기하지 않고 노력하며 공부를 하면서 지식이 늘어가는 재미와 결과물을 완성했을 때 뿌듯함과 성취감을 느끼면서 공부를 더 해보고 싶다고 느꼈고 개발자 관련으로 이 세계에 발을 들여놓고 싶다고 생각했습니다. 또한 끊임없이 노력하며 발전하고 싶고 저의 능력과 가능성을 최대한으로 끌어내어 줄 수 있는 회사를 구하고 싶습니다.</h2>
</div>
<div class="self_text3">
<h1 style="font-weight: 500;">프로젝트 경험</h1>
<h2>ai 스쿨 실무 프로젝트를 시작하면서 다른 조 들은 6명에서 프로젝트를 시작했지만 제가 속한 조는 3명에서 프로젝트를 시작하였기에 같은 기간 동안 적은 인원으로 완성한 결과물을 만들어야 한다는 어려움을 가지고 시작해야만 했다. 하지만 시작하기도 전에 좌절하지 않고 웹 사이트를 만드는 프로젝트 5페이지 중 2페이지를 하겠다고 적극적으로 작업에 임했다. 한 페이지를 만들어보는 것은 처음이고 레이 아웃 등 처음에 어떤 작업부터 시작해야 할지 감을 못 잡고 있었다. 그렇지만 모르는 것을 팀원과 공유하면서 div를 이용하면서 큰 틀을 잡으면서 작업해야 되는 것을 알게 되고 사이트에서 스크롤을 하게 되면 navbar에 메인 로그 이미지와 텍스트를 바꾸도록 자바 코드 안에 css 코드를 넣어서 짤 수 있다는 것을 배웠고, 이미지들을 겹쳐서 슬라이드 시킬 수 있는 slick jquery를 알게 되었다. 프로젝트를 하면서 내가 생각 한 대로 코드를 써보았지만 작동이 안 되거나 할 때 팀원과 회의하면서 해결해 나갔다. 작업하는 시간이 지날수록 코드 짜는 법이 처음과 비교될 정도로 빠르게 터득하였고, 팀 프로젝트에서 팀과의 커뮤니케이션이 활발히 잘 이루어져서 프로젝트 기간 내 마무리할 수 있었다.</h2>
</div>
</div>
</div>
</section>
<section id="portfolio">
<div class="port">
<h1>SKILL</h1>
<div class="Introduction">
<ul>
<div class="intro" >
<li class="btn" style="border-right: 2px solid #ffffff;border-radius: 15px 0 0 0;">☞HTML☜</li>
<div class="intro1">
<ul style="margin: 0;">
<li class="btn_sub" style="display: none;line-height: 4;border-right: 2px solid white;height: 250px;text-align: left;">1.기초 페이지 제작 후, 그에 대한 출력<br>2.기초 css 적용 기능<br>3.각 이미지 호출 등</li>
</ul>
</div>
</div>
<div class="intro">
<li class="btn" style="border-right: 2px solid #ffffff;">☞CSS☜</li>
<div class="intro1">
<ul style="margin: 0;">
<li class="btn_sub" style="display: none;line-height: 1.9; border-right: 2px solid white;height: 250px;text-align: left;">1.각 클래스 생성 후, 그에 따른 기능 적용<br>2.자바 스크립트와의 데이터 연동 기능<br>3.이미지 출력<br>4.애니메이션 출력<br>5.레이아웃 잡기<br>6.display(flex,grid)사용<br>7.반응형 웹사이트<br>8.Hover시 반응교체</li>
</ul>
</div>
</div>
<div class="intro">
<li class="btn" style="border-radius: 0 15px 0 0;">☞JQUERY☜</li>
<div class="intro1">
<ul style="margin: 0;">
<li class="btn_sub" style="display: none;line-height: 3;text-align: left;">1.jquery를 사용하여 특정 부분에 대하여 css 다르게 지정 가능<br>2.이미지 slick기능<br>3.카카오맵 api호출<br>4.slideToggle등 애니메이션 적용</li>
</ul>
</div>
</div>
<div class="intro2" style=" background-color: rgb(255,250,205);position: absolute;height: 250px;width: 100%;top: 30px;z-index: -1;display: none;border-radius: 15px;"></div>
</ul>
</div>
</div>
<div class="folio">
<h1>PORTFOLIO</h1>
<div class="fol_tx">
<div class="fo_1">
<h2>프로젝트 명</h2>
<h3>ai스쿨</h3>
</div>
<div class="fo_2">
<h2>팀 명</h2>
<h3>9직자</h3>
</div>
<div class="fo_4">
<h2>개발기간</h2>
<h3>1차:2022.07.01~2022.07.15 2차:2022.07.18~2022.08.12</h3>
</div>
<div class="fo_5">
<h2>개발 인원</h2>
<h3>1차:5명 2차:3명</h3>
</div>
<div class="fo_6">
<h2 style="padding-top:7%;">주요기술</h2>
<h3>HTMl/CSS<br>jquery</h3>
<h4>기초 페이지 제작 및 출력,section·div등 레이아웃 나누기<br>애니메이션 연동,slick기능 구현,카카오 API호출</h4>
</div>
<div class="fo_7">
<h2>개발환경</h2>
<h3>HTMl,CSS,javascrip,jquery</h3>
</div>
<div class="fo_9">
<h2>본인 역할</h2>
<h3>1차:아이콘파트 완성 2차:메인 페이지 완성,회사소개 페이지 완성</h3>
</div>
</div>
</div>
<div class="link">
<ul>
<li style="font-weight: 500;">ai 스쿨 프로젝트 결과물</li>
</ul>
<p>※<a href="https://sbk554.github.io/resoft-project-1team/">https://sbk554.github.io/resoft-project-1team/</a>※</p>
<p>※<a href="https://sbk554.github.io/resoft-1team/">https://sbk554.github.io/resoft-1team/</a>※</p>
</div>
<ul style="font-size: 30px;text-align:center;font-weight: 500;">
<li>1차 프로젝트</li>
</ul>
<div class="po_fo7">
<div>
<img src="./img/icon.PNG" style="width: 95%;height: 340px;border: 1px solid rgb(181, 181, 181);margin-left: 3%;">
<ul>
<li style="font-size: 22px;">담당파트 요구사항</li>
</ul>
</div>
<div>
<img src="./img/icon.gif"style="width: 95%;height: 340px;border: 1px solid rgb(181, 181, 181);margin-left: 2%;">
<ul>
<li style="font-size: 22px;">구현 결과</li>
</ul>
</div>
<ul style="font-size: 20px;line-height: 1.5;margin-left:10%; text-align: left;">
<li>-팀명 : 9직자</li>
<li>-개발인원 : 5명</li>
<li>-개발기간 : 2022.07.01~2022.07.15</li>
</ul>
</div>
<ul style="font-size: 30px;text-align:center; margin-top: 10%;font-weight: 500;">
<li>2차 프로젝트</li>
</ul>
<div class="port_fo">
<div class="po_fo">
<img src="./img/navbar.gif">
<ul>
<li class="po">목적</li>
<li>-NAVBAR의 background color가 transparent이기 때문에 스크롤 했을 때 잘보이기 위한 기능입니다.</li><br>
<li style="font-size: 22px;">기능</li>
<li>-메인로고 이미지 변경</li>
<li>-텍스트 color변경</li>
<li>-세브메뉴 버튼 이미지 변경</li>
</ul>
</div>
<div class="po_fo1">
<img src="./img/menu.gif">
<ul>
<li class="po">목적</li>
<li>-버튼을 눌러 활성화/비활성화 기능입니다.</li><br>
<li style="font-size: 22px;">기능</li>
<li>-버튼을 눌렀을때 서브메뉴 창이 내려옴</li>
<li>-tinUp(masic.css) 애니메이션 적용</li>
</ul>
</div>
<div class="po_fo2">
<img src="./img/slick.gif">
<ul>
<li class="po">목적</li>
<li>-이미지들을 slick기능을 적용하여 버튼을 이용하여 슬라이드를 적용하는 파트입니다.</li><br>
<li style="font-size: 22px;">기능</li>
<li>-좌우 버튼을 눌러 NEXT/previous</li>
<li>-start/stop버튼 으로 slick기능 제어</li>
</ul>
</div>
<div class="po_fo3">
<img src="./img/5page.PNG">
<ul>
<li class="po">목적</li>
<li>-소식의 상세정보를보기 위한 접속 파트 입니다.</li><br>
<li style="font-size: 22px;">기능</li>
<li>-클릭시 상세정보 페이지로 이동</li>
</ul>
</div>
<div class="po_fo4">
<img src="./img/animation.gif">
<ul>
<li class="po">목적</li>
<li>-서비스에 대한 정보를 보여주기 위하 파트 입니다.</li><br>
<li style="font-size: 22px;">기능</li>
<li>-이미지 호버시 텍스트 변경</li>
<li>-이미지 호버시 텍스트 이동하는 애니메이션 적용</li>
</ul>
</div>
<div class="po_fo5">
<img src="./img/organization.gif">
<ul>
<li class="po">목적</li>
<li>-회사의 조직도를 보기쉽게 나타내기 위한 파트 입니다.</li><br>
<li style="font-size: 22px;">기능</li>
<li>-조직도 텍스트 클릭시 애니메이션 활성화/비활성화</li>
</ul>
</div>
<div class="po_fo6"style="margin-bottom: 20%;">
<img src="./img/map.PNG">
<ul>
<li class="po">목적</li>
<li>-회사의 위치를 나타내기 위한 파트 입니다.</li><br>
<li style="font-size: 22px;">기능</li>
<li>-카카오 API를 이용해 지도로 나타내었다.</li>
</ul>
</div>
</div>
</section>
<section id="last">
<div class="last_text">
<ul>
<li class="wow fadeInLeft customer_list" data-wow-delay="0.8s"
style="visibility: visible; animation-delay: 0.8s;
animation-name: fadeInLeft;">
<div class="ls_tx">
<p>읽 어주셔서 감사합니다. <br>귀사의 앞날에 무궁한 발전이 있기를 기원합니다</p>
</div>
</li>
</ul>
</div>
</section>
<script>
$( document ).ready( function() {
$( '.btn' ).click( function() {
$( '.btn_sub' ).slideToggle(500);
$('.intro2').slideToggle(500);
} );
} );
</script>
</body>
</html>*css
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
* {
box-sizing: border-box;
text-decoration: none;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
max-width: 100%;
font-family: 'Noto Sans KR', sans-serif;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
ul {
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html{
scroll-behavior: smooth;
}
#profile{
width: 100%;
max-width: 1440px;
margin: 0 auto;
}
.profile{
display: grid;
grid-template-columns: 0.7fr 2fr;
}
.container{
background-color: #373737;
}
.back{
margin:50px;
padding-top: 50px;
}
.pro_img{
text-align: center;
}
.pro_img img{
width: 150px;
height: 150px;
border-radius: 150px;
border: 2px solid #ffffff;
}
.pro_text,.pro_text1,.pro_text2{
color: #ffffff;
text-align: left;
line-height: 1.5;
}
.pro_text h1{
margin-top: 100px;
font-size: 25px;
font-weight: 300;
}
.pro_text h2{
margin-top: 15px;
font-size: 18px;
}
.pro_text h4{
margin-top: 20px;
font-size: 35px;
font-weight: 300;
text-align: center;
}
/* .pro_text h4::after{
content:"";
display: block;
border-bottom: 2px solid #ffffff;
border-radius: 5px;
margin-top: 70px;
} */
.pro_text1 h1{
margin-top: 80px;
font-size: 22px;
font-weight: 300;
}
.pro_text1 h2{
margin-top: 15px;
font-size: 18px;
}
.pro_text1 h3{
margin-top: 5px;
font-size: 14px;
}
.pro_text2 h1{
margin-top: 80px;
font-size: 25px;
font-weight: 300;
}
.pro_text2 h2{
margin-top: 15px;
font-size: 18px;
}
.container1{
background-color: #ffffff;
margin: 50px;
}
.self_text,.self_text1,.self_text2,.self_text3{
text-align: left;
}
.self_text h1{
font-size: 30px;
margin-bottom: 100px;
margin-top: 50px;
}
.self_text h2{
font-size: 20px;
}
.self_text h2::after{
content:"";
display: block;
border-bottom: 2px solid #000;
border-radius: 2px;
margin-top: 10px;
}
.self_text h3{
margin-top: 10px;
line-height: 1.5;
font-size: 15px;
}
.self_text1 h1{
margin-top: 60px;
font-size: 20px;
}
.self_text1 h1::after{
content:"";
display: block;
border-bottom: 2px solid #000;
border-radius: 2px;
margin-top: 10px;
}
.self_text1 h2{
margin-top: 10px;
font-size: 15px;
line-height: 1.5;
}
.self_text2 h1{
margin-top: 60px;
font-size: 20px;
}
.self_text2 h1::after{
content:"";
display: block;
border-bottom: 2px solid #000;
border-radius: 2px;
margin-top: 10px;
}
.self_text2 h2{
margin-top: 10px;
font-size: 15px;
line-height: 1.5;
}
.self_text3 h1{
margin-top: 60px;
font-size: 20px;
}
.self_text3 h1::after{
content:"";
display: block;
border-bottom: 2px solid #000;
border-radius: 2px;
margin-top: 10px;
}
.self_text3 h2{
margin-top: 10px;
font-size: 15px;
line-height: 1.5;
}
#portfolio{
width: 100%;
max-width: 1440px;
margin: 0 auto;
}
.btn{
cursor: pointer;
color: #CD853F;
font-weight: 400;
}
.btn:hover{
color: #800000;
}
.btn1{
cursor: pointer;
color: #CD853F;
font-weight: 400;
}
.btn1:hover{
color: #800000;
}
.btn2{
cursor: pointer;
color: #CD853F;
font-weight: 400;
}
.btn2:hover{
color: #800000;
}
.btn_sub,.btn_sub1,.btn_sub2{
color: #CD853F;
font-weight: 400;
}
.Introduction{
position: relative;
text-align: center;
margin: 0 100px;
}
.Introduction>ul>div>li{
background-color: rgb(255,218,185);
padding: 10px 0 10px 0;
}
.Introduction>ul{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.port{
padding-top: 100px;
}
.port h1{
font-size: 50px;
text-align: center;
padding-bottom: 50px;
}
.port h2{
font-size: 30px;
}
.port h3{
font-size: 18px;
}
.folio{
padding-top: 100px;
line-height: 1.5;
}
.folio h1{
font-size: 50px;
text-align: center;
}
.fol_tx{
margin: 0 15%;
padding-top: 50px;
}
.fo_1{
border-top: 1px solid #c8c8c8;
}
.fo_1,.fo_2,.fo_3,.fo_4,.fo_5,.fo_7,.fo_8,.fo_9{
display: grid;
grid-template-columns: 0.5fr 2fr;
border-bottom: 1px solid #c8c8c8;
font-size: 20px;
padding:2% 0;
}
.fo_6{
display: grid;
grid-template-columns: 0.75fr 1fr 2fr;
border-bottom: 1px solid #c8c8c8;
font-size: 20px;
padding:2% 0;
}
.fo_1 h3,.fo_2 h3,.fo_3 h3,.fo_4 h3,.fo_5 h3,.fo_6 h3,.fo_7 h3,.fo_8 h3,.fo_9 h3{
color: rgb(158, 158, 158);
}
.fo_6 h4{
color: rgb(158, 158, 158);
}
.fo_9{
margin-bottom: 10%;
}
.folio>div>div>h2{
font-weight: 500;
padding-left: 7%;
}
.port_fo{
display: grid;
grid-template-columns: 1fr 1fr;
}
.port_fo>div>img{
width: 100%;
height: 50%;
border-bottom: 2px solid rgb(255,218,185);
}
.po_fo7>div>ul{
text-align: center;
font-size: 20px;
}
.port_fo>div{
border: 0.3rem inset rgb(255,218,185);
text-align: center;
margin: 3%;
}
.port_fo>div>ul>li{
text-align: left;
line-height: 1.5;
padding-left: 3%;
}
.po_fo7{
border: 0.3rem inset rgb(255,218,185);
display: grid;
grid-template-columns: 1fr 1fr;
margin: 1.5%;
}
.po{
padding-top: 20px;
font-size: 22px;
}
.link{
text-align: center;
line-height: 1.5;
margin-bottom: 10%;
}
.link>ul>li{
font-size: 30px;
}
.link>p{
font-size: 20px;
}
.link a:hover{
color: rgb(8, 0, 251);
}
#last{
width: 100%;
height: 56vw;
background-color: #c8c8c8;
}
.last_text{
text-align: center;
}
.ls_tx{
padding-top: 20%;
font-size: 60px;
font-weight: 600;
}
2)학습내용 중 어려웠던점
X
3)해결방법
X
4)학습소감
사이트를 만들고나니 뿌듯함과 성취감을 느꼈다.
안녕하세요