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(경진 테크빌,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><br>-운전면허증(1종보통)</h2>
</div>
</div>
</div>
<div class="container1">
<div class="self_text">
<h1>A letter of self-introduction</h1>
<h2>자기소개</h2>
<h3>중학교 다니는 시절부터 내가 해본 것이 나한테 맞는 것인지 안 맞는 것인지 도전해 보고 결정하자는 가치관이 생겼습니다. 이러한 가치관을 세우게 된 계기는 중학교 1학년 때 방과 후 수업이 있었습니다. 그 수업에서 제가 좋아하는 수업이 없어서 남는 수업을 들어가게 되었는데 그 수업이 제과 제빵을 하는 수업이었습니다. 그 당시에는 요리에 관심이 없었기에 해보지도 않고 하 기 싫다는 생각만 앞섰습니다. 하지만 제가 생각한 거 와 달랐습니다. 첫 수업 때 만든 것이 초코 쿠키였습니다. 레시피를 보면서 계량을 하고 재료들을 정량으로 넣어 만들었습니다. 결과물이 시중에서 파는 초코 쿠키와 비교가 되었지만 만들었던 쿠키를 친구들과 가족들에게 맛을 보라고 나누어 주었는데 맛있다는 말을 듣는 순간 뿌듯함과 이걸 만드는데 성공했다는 성취감을 느끼는 경험을 하면서 해보지도 않고 하기 싫다는 생각을 가지지 말고 도전해 보고 정하자는 가치관이 생겼습니다.</h3>
</div>
<div class="self_text1">
<h1>성격 장단점</h1>
<h2>어렸을 때부터 어머니께서는 시험을 못 봐도 혼내시지 않으셨지만 제가 예절학원을 다닌 만큼 예의 없거나 거짓말을 하였을 시에는 채벌을 하였습니다. 그렇기에 항상 신뢰를 쌓고, 정직하게 살려고 노력합니다. 또한, 시작한 일은 끝을 봐야 하는 성격 덕분에 시작하게 된 일은 중도 포기하지 않고 내가 모르거나 어려운 것이 있어도 이해할 때까지 자세히 찾아봅니다. 그리고 제게 주어진 일을 신속하게 완수해 내기 위해 늦은 시간까지 하고자 하는 할당량을 꼭 끝내겠다는 마음가짐과 맡겨진 일은 끝까지 완성해야 다른 일을 시작하는 책임감이 저의 큰 장점입니다. 모르는 것을 찾아보고 알아가는데 시간이 많이 걸린다는 점이 단점입니다.</h2>
</div>
<div class="self_text2">
<h1>지원동기 및 입사 후 포부</h1>
<h2>ai 스쿨 실무 프로젝트를 하기 전 이론 수업을 들으면서 이 분야가 저의 적성이 아니라는 생각이 들기도 했습니다. 하지만 실무 프로젝트를 시작하면서 모르는 것이 대부분이었지만 포기하지 않고 노력하며 공부를 하면서 지식이 늘어가는 재미와 결과물을 완성했을 때 뿌듯함과 성취감을 느끼면서 공부를 더 해보고 싶다고 느꼈고 개발자 관련으로 이 세계에 발을 들여놓고 싶다고 생각했습니다. 또한 끊임없이 노력하며 발전하고 싶고 저의 능력과 가능성을 최대한으로 끌어내어 줄 수 있는 회사를 구하고 싶습니다.</h2>
</div>
<div class="self_text3">
<h1>프로젝트 경험</h1>
<h2>ai 스쿨 실무 프로젝트를 시작하면서 다른 조 들은 6명에서 프로젝트를 시작했지만 제가 속한 조는 3명에서 프로젝트를 시작하였기에 같은 기간 동안 적은 인원으로 완성한 결과물을 만들어야 한다는 어려움을 가지고 시작해야만 했다. 하지만 시작하기도 전에 좌절하지 않고 웹 사이트를 만드는 프로젝트 5페이지 중 2페이지를 하겠다고 적극적으로 작업에 임했다. 한 페이지를 만들어보는 것은 처음이고 레이 아웃 등 처음에 어떤 작업부터 시작해야 할지 감을 못 잡고 있었다. 그렇지만 모르는 것을 팀원과 공유하면서 div를 이용하면서 큰 틀을 잡으면서 작업해야 되는 것을 알게 되고 사이트에서 스크롤을 하게 되면 navbar에 메인 로그 이미지와 텍스트를 바꾸도록 자바 코드 안에 css 코드를 넣어서 짤 수 있다는 것을 배웠고, 이미지들을 겹쳐서 슬라이드 시킬 수 있는 slick jquery를 알게 되었다. 프로젝트를 하면서 내가 생각 한 대로 코드를 써보았지만 작동이 안 되거나 할 때 팀원과 회의하면서 해결해 나갔다. 작업하는 시간이 지날수록 코드 짜는 법이 처음과 비교될 정도로 빠르게 터득하였고, 팀 프로젝트에서 팀과의 커뮤니케이션이 활발히 잘 이루어져서 프로젝트 기간 내 마무리할 수 있었다.</h2>
</div>
</div>
</div>
</section>
<section id="portfolio">
<div class="port">
<h1>기술소개서</h1>
<div class="Introduction">
<ul>
<div class="intro" >
<li class="btn" style="border-right: 2px solid #ffffff;">☞HTML☜</li>
<div class="intro1">
<ul style="margin: 0;">
<li class="btn_sub" style="display: none;line-height: 4;border-right: 2px solid #ffffff;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 #ffffff;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">☞JQUERY☜</li>
<div class="intro1">
<ul style="margin: 0;">
<li class="btn_sub" style="display: none;line-height: 2.2;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: 1px solid #000;"></div>
</ul>
</div>
</div>
<div class="folio">
<h1>포트폴리오</h1>
<div class="fol_tx">
<div class="fo_1">
<h2>프로젝트 명</h2>
<h3>ai스쿨</h3>
</div>
<div class="fo_2">
<h2>팀 명</h2>
<h3>구직자</h3>
</div>
<div class="fo_4">
<h2>개발기간</h2>
<h3>2022.07.18~2022.08.12</h3>
</div>
<div class="fo_5">
<h2>개발 인원</h2>
<h3>3명</h3>
</div>
<div class="fo_6">
<h2>주요기술</h2>
<h3>HTMl/CSS<h4>기초 페이지 제작 및 출력,section·div등 레이아웃 나누기</h4></h3>
<h2></h2>
<h3>jquery<h4>애니메이션 연동,slick기능 구현,카카오 API호출</h4></h3>
</div>
<div class="fo_7">
<h2>개발환경</h2>
<h3>HTMl,CSS,javascrip,jquery</h3>
</div>
<div class="fo_9">
<h2>본인 역할</h2>
<h3>메인 페이지 완성,회사소개 페이지 완성</h3>
</div>
</div>
</div>
<div class="port_fo">
<div class="po_fo">
<img src="./img/navbar.gif">
<ul>
<li></li>
</ul>
</div>
<div class="po_fo1">
<img src="./img/menu.gif">
<ul>
<li></li>
</ul>
</div>
<div class="po_fo2">
<img src="./img/slick.gif">
<ul>
<li></li>
</ul>
</div>
<div class="po_fo3">
<img src="./img/5page.PNG">
<ul>
<li></li>
</ul>
</div>
<div class="po_fo4">
<img src="./img/animation.gif">
<ul>
<li></li>
</ul>
</div>
<div class="po_fo5">
<img src="./img/resoft.PNG">
<ul>
<li></li>
</ul>
</div>
<div class="po_fo6">
<img src="./img/history.PNG">
<ul>
<li></li>
</ul>
</div>
<div class="po_fo8">
<img src="./img/organization.gif">
<ul>
<li></li>
</ul>
</div>
<div class="po_fo9">
<img src="./img/map.PNG">
<ul>
<li></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%;
}
.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;
}
.pro_text h1{
margin-top: 100px;
font-size: 18px;
}
.pro_text h2{
margin-top: 15px;
font-size: 10.7px;
}
.pro_text h4{
margin-top: 20px;
font-size: 35px;
text-align: center;
}
.pro_text1 h1{
margin-top: 80px;
font-size: 18px;
}
.pro_text1 h2{
margin-top: 15px;
font-size: 10.7px;
}
.pro_text1 h3{
margin-top: 5px;
font-size: 8.3px;
}
.pro_text2 h1{
margin-top: 80px;
font-size: 18px;
}
.pro_text2 h2{
margin-top: 15px;
font-size: 10.7px;
}
.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%;
}
.btn{
cursor: pointer;
color: #9ACD32;
}
.btn:hover{
color: #228B22;
}
.btn1{
cursor: pointer;
color: #9ACD32;
}
.btn1:hover{
color: #228B22;
}
.btn2{
cursor: pointer;
color: #9ACD32;
}
.btn2:hover{
color: #228B22;
}
.btn_sub,.btn_sub1,.btn_sub2{
color: #9ACD32;
}
.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 #000;
}
.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 #000;
font-size: 20px;
}
.fo_6{
display: grid;
grid-template-columns: 0.75fr 1fr 2fr;
border-bottom: 1px solid #000;
font-size: 20px;
}
.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: #c8c8c8;
}
.fo_6 h4{
color: #c8c8c8;
}
.fo_9{
margin-bottom: 15%;
}
.port_fo{
display: grid;
grid-template-columns: 1fr 1fr;
}
.port_fo>div>img{
width: 90%;
height: 100%;
}
.port_fo>div{
border: 1px solid #000;
text-align: center;
margin: 3%;
}
#last{
width: 100%;
height: 800px;
background-color: #c8c8c8;
}
.last_text{
text-align: center;
}
.ls_tx{
padding-top: 400px;
font-size: 50px;
}
2)학습내용 중 어려웠던점
X
3)해결방법
X
4)학습소감
이젠 페이지 하나를 만드는 시간이 많이줄었다.공부를 하다보니 실력이 많이 오른것이 느껴진다
안녕하세요