자기소개 페이지 만들기(3)
-필요한 것 공부(이미지에 그림자 넣기, 글꼴 변경 등)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>아우디팀_자기소개_정진엽</title>
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
<style>
*{
font-family: 'Jua', sans-serif;
}
.item1{
background-color: #73F1E8;
border-radius: 20px;
flex-grow:2;
letter-spacing: 1px;
line-height: 40px;
font-style: normal;
font-weight : bold;
box-shadow: 10px 10px 10px 1px #d8d8d8;
margin-right: 50px;
padding-left : 30px;
width : 600px;
}
.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;
width: 260px;
box-shadow: 10px 10px 10px 1px #d8d8d8;
}
.item3{
#background-color: aqua;
background-size : cover;
background-position: center;
border-radius: 20px;
flex : 1 1 0;
text-align :center;
font-weight : bold;
#box-shadow: 0px 0px 10px 0px #d8d8d8;
}
.item4{
#background-color: aqua;
background-size : cover;
background-position: center;
border-radius: 20px;
flex : 1 1 0;
text-align :center;
font-weight : bold;
#box-shadow: 0px 0px 10px 0px #d8d8d8;
}
.item5{
#background-color: aqua;
background-size : cover;
background-position: center;
border-radius: 20px;
flex : 1 1 0;
text-align :center;
font-weight : bold;
#box-shadow: 0px 0px 10px 0px #d8d8d8;
}
.item6{
#background-color: aqua;
background-size : cover;
background-position: center;
border-radius: 20px;
flex : 1 1 0;
text-align :center;
font-weight : bold;
#box-shadow: 0px 0px 10px 0px #d8d8d8;
}
.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;
background-color: grey;
border-radius:20px;
width: 1350px;
font-size : 25px;
font-weight: bold;
box-shadow: 10px 10px 10px 10px #d8d8d8;
}
.footer {
grid-area: footer;
font-size: small;
font-weight: 100;
text-align: center;
margin-top: 15px;
color: #c6c6c6;
}
.img{
filter:drop-shadow(10px 6px 6px #c3c3c3);
width:200px;
height:250px;
border-radius : 20px;
}
.st{
text-align: center;
}
</style>
</head>
<body link="#ff0000" alink="#00ff00" vlink="#0000ff">
<h5>자기소개_정진엽</h5>
<div class="container1">
<div class="item1">
<h1 class="st">🚨T.M.I ZONE🚨</h1>
😀MBTI : ENTJ-T<br>
😁장점 : 포기를 잘 안한다. 상황판단이 빠르다. 처세에 능하다.<br>
🤝협업 스타일 : 상황에 맞게 내가 이끌어야 한다면 이끌고, 그렇지 않다면 따른다.<br>
🏰궁극적 목표 : 건강하게 개발을 오래할 수 있는 개발자가 되는 것.<br>
🖥블로그 주소 : <A href="https://pocachips.tistory.com/" target="_blank">티스토리 - https://pocachips.tistory.com/</A><br>
<div class="add">   <A href="https://velog.io/@_pocachip" target="_blank">VELOG - https://velog.io/@_pocachip</A><br>
 <A href="https://blog.naver.com/yeobdol" target="_blank">네이버 블로그 - https://blog.naver.com/yeobdol</A><br></div>
🤷취미 : 여행, 축구, 웨이트, 전시감상, 커피, 글쓰기, 보드(스노우, 웨이크, 크루즈),<br>
     등산, 달리기, 주짓수, 복싱, 태권도, 피아노, 트럼펫, 사진, 음악 감상, 음주(위스키),<br>
     싸이클, 수영, 수집(신발, 축구유니폼, 옷), 공연관람
</div>
<div class="item2">
</div>
</div>
<br>
<div class="container2">
<div class="item3">
<img class="img" src="https://postfiles.pstatic.net/MjAyMjA4MjhfMjk2/MDAxNjYxNjQ2MjY0NDg3.ubPr51kLcI0hbUsW5Jne-TZYKDMm-UJ8GUub2N_B26gg.JgXiVFnGeg5c9se2qHsp11pUZH9xDpi0Cp8GbA7ebhEg.JPEG.yeobdol/IMG_0175.jpg?type=w580"><br>
✈여행을 좋아하구요
</div>
<div class="item4">
<img class="img" src="https://postfiles.pstatic.net/MjAyMjA4MjhfNzIg/MDAxNjYxNjQ2MjY0Njkx.Lw4eS8osES_e4OOvorOhftcNabAB-28h1TEjIH-bijQg.Gs1f9xxFpep9Yj4abiJ1fLwNPcyGAJF2EAnetl1GFxsg.PNG.yeobdol/IMG_5192.png?type=w580"><br>
💻<A href="https://www.instagram.com/_pocachip/" target="_blank">SNS</A>도 열심히 합니다!
</div>
<div class="item5">
<img class="img" src="https://postfiles.pstatic.net/MjAyMjA4MjhfNjQg/MDAxNjYxNjQ2MjY0NjI2.OSIA4jkjweGFPkml1gRIjk4rUsNo6xT78TF5jmmqK7gg.k0081GZealC93LAmE9hG2hwNzuAJOhmE58Z1Nw25Dh8g.JPEG.yeobdol/IMG_5191.jpg?type=w580"><br>
👟수집하는 것을 즐기구요
</div>
<div class="item6">
<img class="img" src="https://postfiles.pstatic.net/MjAyMjA4MjhfMTc4/MDAxNjYxNjQ2MjY0NTA0.gNvnPXU_gcVrZNcvoF3tAYhNx0TfenAihkYRyL6OPr0g.6NIAt8TzGfncpJmUJQBFsy8JVkIsZZKu-BTV3mwwqrcg.JPEG.yeobdol/IMG_1229.jpg?type=w580"><br>
⛰최근에는 등산에 빠졌어요!
</div>
</div>
<p>
<div class="main">
🔊저를 한마디로 소개하자면 딱히 잘하는 것은 없지만 못하는 것도 없는 사람입니다.<br>
🔊한 분야에 깊게 빠지기 보다는 여러가지 다 해보고 죽자는 마인드로 열심히 사는 사람입니다.<br>
🔊개발공부를 이제 막 시작했는데 늦었다고 생각 안합니다.<br>
🔊정신과 육체가 건강하고 발전을 멈추지 않는 개발자가 되는 것이 저의 꿈입니다!
</div>
<div class="footer">copyright 2022. JEONG JINYEOB All rights Reserved. </div>
</body>
</html>
I love pocachip.