목차
- 미니 프로젝트
- 개인 페이지
- javascript deep dive
미니 프로젝트
<!-- 돈많백 -->
<div class="content">
<div class="dmb">
<h1>
돈,<br />
많은 <br />
백수들
</h1>
</div>
<div class="about">About D.M.B</div>.content{
width: 100%;
height: 200px;
display: flex;
justify-content: space-between;
align-items: flex-end;
background: #efefef;
border-bottom: 1px solid black;
}
.dmb{
margin-left: 20px;
margin-bottom: 20px;
font-size: 3rem;
}
.about {
width: 10rem;
padding: 7px;
box-sizing: border-box;
color: white;
background: black;
margin-bottom: 10px;
text-align: center;
font-size: 100%;
letter-spacing: 4px;
}페이지 중에 2번째 "돈, 많은 백수들" "About D.M.B" 을 dispalay flex 주고 spase-between으로 좌우로 나누고 margin값 줘서 뛰어주어서 구현하였다
"역시 flex는 세상 어려운데 막상 구현하면 너무 행복해...."
개인 페이지
<!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" />
<link rel="stylesheet" href="bae.css" />
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<title>Document</title>
</head>
<body>
<div class="fram">
<div class="eft">
<!-- 얼굴 사진 -->
<div class="face">
<img src="bae.png" alt="" />
</div>
<!-- 이름과 꿈 -->
<div class="name">
<h1>
안녕하세요! 제이름은 배성완 <br />
<strong>FE 개발자</strong>를 꿈꾸고 있습니다.
</h1>
</div>
</div>
<!-- 저는 바리스타였어요 -->
<div class="content-box">
<div class="con" data-aos="flip-left">
<img id="con-img" src="star.jpeg" alt="" />
</div>
<div class="con1" data-aos="flip-left">
<h1>저는 바리스타였어요!</h1>
<p>
3년간 바리스타를 하다가 <br />FE개발자가 되려고 도전하고 있어요
<br />
바리스타도 비전공에서 시작한거라서 3년간 굉장히 많은 공부를
했어요<br />
커피에 대해서 궁금한게 있다면 언제든지 물어봐 주세요 ^^
</p>
</div>
</div>
<!-- 제 목표는요 -->
<div class="content-box2">
<div class="con3" data-aos="flip-left">
<img src="go.jpeg" alt="" />
</div>
<div class="con4" data-aos="flip-left">
<h1>제 목표는요!</h1>
<p>
혼자서 척척 해나갈수 있는 개발자가 되고싶어요<br />
비전공자라서 어려움도 많지만 모든지 할수 있다고 생각해요<br />
어려운건 단지 간단한 장애물이라고 생각해서 열심히만 한다면 <br />
FE 개발자가 될수 있다고 생각해요
</p>
</div>
</div>
<!-- 제 장점은요 -->
<div class="content-box3">
<div class="con5" data-aos="fade-right">
<img src="good.png" alt="" />
</div>
<div class="con6" data-aos="fade-right">
<h1>제 장점은요!</h1>
<p>
꾸준함을 이길 그 어떤 재주도 없다" 라는 <br />
신념을 가지고 어떤 일이든 결과가 나타날 때까지<br />
끈질기게 파고듭니다
</p>
</div>
</div>
<!-- 좋아하는것 -->
<div class="content-box4">
<div class="con3" data-aos="fade-left">
<img src="빵꾸.jpeg" alt="" />
</div>
<div class="con4" data-aos="fade-left">
<h1>제가 좋아하는것은요!</h1>
<p>
여자친구네 고양이 빵꾸에요 <br />
세상에서 제일 온순한 고양이에요<br />
사람만 보이면 만져달라구 쪼르르와요ㅎㅎ
</p>
</div>
</div>
<!-- 마지막 -->
<footer class="footer">
<div class="con7" data-aos="flip-down">
<a href="https://github.com/baesee0806"
><i class="fa-brands fa-github"></i
></a>
<a href="https://velog.io/@baesee0806"
><i class="fa-solid fa-cube"></i
></a>
</div>
<div class="con8" data-aos="flip-down">
<h2>마지막으로!</h2>
<p>
4개월 정말 긴 시간이라고 생각해요 <br />
내배캠에서 배운 지식들을 모두 내꺼로 만들고 <br />
그리고 제가 좋아하는 회사로 취업을 꼭 할거에요<br />
다들 포기 하지 말고 열심히 해봐요
</p>
</div>
</footer>
</div>
<script
src="https://kit.fontawesome.com/a4c06b86b3.js"
crossorigin="anonymous"
></script>
<script>
AOS.init();
</script>
</body>
</html>
/* 이모지 영역 */
.face{
display: flex;
justify-content: center;
align-items: center;
}
.face img{
width: 300px;
}
/* 이름과 꿈 영역 */
.name{
display: flex;
justify-content: center;
align-items: center;
background: #e2e2e2;
height: 80vh;
}
/* 저는 바리스타였어요 */
.content-box {
display: flex;
justify-content: space-around;
height: 600px;
}
.con{
display: flex;
justify-content: center;
align-items: center;
}
.con img{
width: 200px;
border-radius: 20%;
}
.con1{
display: flex;
justify-content: center;
align-items: center;
flex-direction:column;
text-align: center;
}
/* 제 목표는요 */
.content-box2{
display: flex;
justify-content: space-around;
flex-direction:row-reverse;
height: 600px;
background: #e2e2e2;
}
.con3{
display: flex;
justify-content: center;
align-items: center;
}
.con3 img{
width: 300px;
border-radius: 20%;
}
.con4{
display: flex;
justify-content: center;
align-items: center;
flex-direction:column;
text-align: center;
}
/* 제 장점은요 */
.content-box3 {
display: flex;
justify-content: space-around;
height: 600px;
}
.con5{
display: flex;
justify-content: center;
align-items: center;
}
.con5 img{
width: 200px;
border-radius: 20%;
}
.con6{
display: flex;
justify-content: center;
align-items: center;
flex-direction:column;
text-align: center;
}
/* 좋아하는것 */
.content-box4{
display: flex;
justify-content: space-around;
flex-direction:row-reverse;
height: 600px;
background: #e2e2e2;
}
/* 마지막 부분 */
.footer{
display: flex;
justify-content: space-around;
align-items: center;
height: 400px;
}
.con7{
display: flex;
justify-content: center;
align-items: center;
font-size: 5rem;
letter-spacing:1rem;
}
.con7 a{
cursor: pointer;
text-decoration: none;
color: black;
}
.con8{
display: flex;
justify-content: center;
align-items: center;
flex-direction:column;
text-align: center;
}
다음은 개인 페이지 구현 했는데 팀장님이 AOS cdn알려주셔서 각각 content마다 기능 넣었는데 페이지가 이쁘게 동작해서 만족했다.그리고 "display flex는 진짜 신이라고 생각이 들정도로 많족했다!"
하면 할수록 flex 이해도도 올라가고 또 ㅋㅋㅋ 팀장이 알려주신 구글 확장자 "Pesticide for Chrome"
이거때문에 너무 그냥 css할때 구현하기가 10배이상 증가해서 할맛이 난다라고 해야되나 ㅋㅋㅋ 아주만족해요 팀장님 ㅋㅋㅋ
javascript deep dive
이건 개인공부 입니다
오늘은 데이터 타입에 대해서 9시이후에 시작할려고 합니다.
공부내용은 책 1회독 후에 2회독에서 시작 할려고 합니다.
