<!DOCTYPE html>
<html>
<head>
<title>나에 대해</title>
<!-- 합쳐지고 최소화된 최신 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- 부가적인 테마 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- 합쳐지고 최소화된 최신 자바스크립트 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="myprofilecss.css">
</head>
<body>
<div id="all_of_bokchi">
<div>
<a href="https://philosopher-chan.tistory.com/422?category=817602" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e2/Mola_ramsayi.jpg" width="300" height="300">
</a>
</div>
<div>
<p class="bg-primary">왜 별명이 개복치인가요?</p>
<ul class="ul_list">
<li>자주 아파서</li>
<li>나름 약해요</li>
</ul>
<p class="bg-success">왜 별명이 개복치인가요?</p>
<ul class="ul_list">
<li>넷플릭스 보기요</li>
<li>운동인데 달리기에요</li>
</ul>
<p class="bg-danger">취미가 뭐에용?</p>
<ul class="ul_list">
<li>여행입니당.</li>
</ul>
</div>
<div class="footer">
<p>연락처에요 뿌우^^ / abc@naver.com / 010-1111-2222</p>
</div>
</div>
</body>
</html>
#all_of_bokchi {
width: 500px;
margin:auto;
}
img{
display: block;
margin-left: auto;
margin-right: auto;
border: 1px solid black;
border-radius: 30px;
margin-top: 30px;
}
p {
padding: 10px;
margin-top: 10px;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 50px;
background-color: black;
color: white;
text-align: center;
}
.ul_list {
display: none;
}