자기소개 페이지 만들기 (1)
-프레임 만들기
-필요한 것 공부(flex 구글링, 스파르타웹개발 종합반 강의)
*code
<html lang="en">
<head>
<meta charset="UTF-8">
<title>아우디팀_자기소개_정진엽</title>
<style>
.item1{
background-color: mediumaquamarine;
flex-grow:2;
}
.item2{
text-align: center;
background-image :url("https://postfiles.pstatic.net/MjAyMjA4MjdfMjQ3/MDAxNjYxNTY3MjY2Mzkw.5K6mObyWzUGc2-9arMdmUUxuia-lRp63GGjDcpvlLjIg.KNESPUj1XRPpsCWF0q0X5z1PWk6L8NMmHNyclm2iXm0g.JPEG.yeobdol/IMG_3566.JPG?type=w580");
background-size : cover;
background-position: center;
border-radius: 20px;
flex-grow:1;
}
.item3{
background-color: aqua;
background-size : cover;
background-position: center;
border-radius: 20px;
}
.item4{
background-color: aqua;
background-size : cover;
background-position: center;
border-radius: 20px;
}
.item5{
background-color: aqua;
background-size : cover;
background-position: center;
border-radius: 20px;
}
.item6{
background-color: aqua;
background-size : cover;
background-position: center;
border-radius: 20px;
image
}
.container1{
display:flex;
flex-flow: row wrap;
border: 1px solid black;
height: 500px;
}
.container2{
display:flex;
flex-flow: row wrap;
border: 1px solid black;
height: 300px;
justify-content: space-around;
}
.add{
padding-left:6.1em
}
.main{
border: 2px solid black
}
</style>
</head>
<body>
<h1>자기소개_정진엽</h1>
<div class="container1">
<div class="item1">
<h1>T.M.I zone</h1>
MBTI : ENTJ-T<br>
장점 : 포기를 잘 안한다. 상황판단이 빠르다. 처세에 능하다.<br>
협업스타일 : 상황에 맞게 내가 이끌어야 한다면 이끌고, 그렇지 않다면 따른다.<br>
궁극적목표 : 건강하게 개발을 오래할 수 있는 개발자가 되는 것.<br>
블로그주소 : 티스토리 - https://pocachips.tistory.com/<br>
<div class="add">VELOG - https://velog.io/@_pocachip<br>
네이버 블로그 - https://blog.naver.com/yeobdol<br></div>
취미 : 여행, 축구, 웨이트, 전시감상, 커피, 글쓰기, 보드(스노우, 웨이크, 크루즈),<br>
   등산, 달리기, 주짓수, 복싱, 태권도, 피아노, 트럼펫, 사진, 음악 감상, 음주(위스키),<br>
   싸이클, 수영, 수집(신발, 축구유니폼, 옷), 춤(?)
</div>
<div class="item2">
<h1>사진 들어갈 곳</h1>
</div>
</div>
<br>
<div class="container2">
<div class="item3">
<img src="https://postfiles.pstatic.net/MjAyMjA4MjdfMjQ3/MDAxNjYxNTY3MjY2Mzkw.5K6mObyWzUGc2-9arMdmUUxuia-lRp63GGjDcpvlLjIg.KNESPUj1XRPpsCWF0q0X5z1PWk6L8NMmHNyclm2iXm0g.JPEG.yeobdol/IMG_3566.JPG?type=w580" width="50px" height="50px"><br>
여행을 좋아하구요
</div>
<div class="item4">
<img src="https://postfiles.pstatic.net/MjAyMjA4MjdfMjQ3/MDAxNjYxNTY3MjY2Mzkw.5K6mObyWzUGc2-9arMdmUUxuia-lRp63GGjDcpvlLjIg.KNESPUj1XRPpsCWF0q0X5z1PWk6L8NMmHNyclm2iXm0g.JPEG.yeobdol/IMG_3566.JPG?type=w580" width="50px" height="50px"><br>
SNS도 열심히 합니다!
</div>
<div class="item5">
<img src="https://postfiles.pstatic.net/MjAyMjA4MjdfMjQ3/MDAxNjYxNTY3MjY2Mzkw.5K6mObyWzUGc2-9arMdmUUxuia-lRp63GGjDcpvlLjIg.KNESPUj1XRPpsCWF0q0X5z1PWk6L8NMmHNyclm2iXm0g.JPEG.yeobdol/IMG_3566.JPG?type=w580" width="50px" height="50px"><br>
수집하는 것을 즐기구요
</div>
<div class="item6">
<img src="https://postfiles.pstatic.net/MjAyMjA4MjdfMjQ3/MDAxNjYxNTY3MjY2Mzkw.5K6mObyWzUGc2-9arMdmUUxuia-lRp63GGjDcpvlLjIg.KNESPUj1XRPpsCWF0q0X5z1PWk6L8NMmHNyclm2iXm0g.JPEG.yeobdol/IMG_3566.JPG?type=w580" width="50px" height="50px"><br>
최근에는 등산에.....
</div>
</div>
<p>
<div class="main">
저를 한마디로 소개하자면 딱히 잘하는 것은 없지만 못하는 것도 없는 사람입니다! 한 분야에 깊게 빠지기 보다는 여러가지<br>
다 해보고 죽자는 마인드로 열심히 사는 사람입니다. 개발공부를 이제 막 시작했는데 늦었다고 생각 안합니다! 정신과 육체가 <br>
건강한 개발자가 되는 것이 저의 꿈입니다!
</div>
</body>
</html>
I love pocachip.