<!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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="myjs.js"></script>
</head>
<body>
<body>
<div id="all_of_bokchi">
<div>
<a href="https://philosopher-chan.tistory.com/421?category=817602" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e2/Mola_ramsayi.jpg" width="300" height="300">
</a>
</div>
<div id="body">
<p class="bg-primary why_bokchi">왜 개복치인가?</p>
<ul class="list_title list_one">
<li>자주아파요</li>
<li>약골이라서</li>
</ul>
<p class="bg-success what_hobby">취미가 머에여</p>
<ul class="list_title list_two">
<li>달리기</li>
<li>넷플릭</li>
</ul>
<p class="bg-warning what_interest">요즘 뭐가 관심있나여</p>
<ul class="list_title list_three">
<li>음??? ㅇㅅㅇ</li>
</ul>
</div>
<div class="footer">
<p>
연락처에요~ naver@naver.com / 010-1111-2222
</p>
</div>
</div>
</body>
</html>
</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;
}
.list_title {
display: none;
}
p {
font-size: 15px;
font-weight: bold;
padding: 10px;
margin-top: 10px;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 50px;
background-color: black;
color: white;
text-align: center;
}
$(document).ready(function(){
$(".why_bokchi").click(function(){
if($(".list_one").css("display") == 'none'){
$(".list_one").show();
} else{
$(".list_one").hide();
}
});
$(".what_hobby").click(function(){
if($(".list_two").css("display") == 'none'){
$(".list_two").show();
} else{
$(".list_two").hide();
}
});
$(".what_interest").click(function(){
if($(".list_three").css("display") == 'none'){
$(".list_three").show();
} else{
$(".list_three").hide();
}
});
});