반응형
CSS에서 *{} 구문으로 백그라운드 핑크색 지정했더니 티스토리도 핑크핑크하네요
HTML코드입니다
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Page Title</title>
<link rel='stylesheet' href='실습5.css'>
</head>
<body>
<div class="container">
<div class="title">
No. 7 짱구
</div>
<div class="thumbnail"> <img src="./짱구.jpeg" /> </div>
<div class="inform"> 짱구 개인공간 <br /> 편하게 팔로우해주세요.</div>
<div class="linkzone">
<div> <a href="https://instagram.jjanggu/" target="_blank" class="button"> 인스타그램 </a> </div>
<div> <a href="https://facebook.jjanggu/" target="_blank" class="button"> 페이스북 </a> </div>
</div>
</div>
</body>
</html>
CSS 코드입니다
*{
background-color: pink;
text-align: center;
box-sizing: border-box;
font-family: sans-serif;
}
.container{
width: 300px;
padding: 20px;
margin: 0 auto;
}
.title{
font-weight: bold;
font-size: 20px;
border: solid 2px white;
border-radius: 30px;
margin-bottom: 30px;
padding: 10px;
background-color: pink;
}
.thumbnail img{
width: 200px;
height: 200px;
border-radius: 100px;
object-fit: cover;
margin-bottom: 20px;
}
.inform{
margin-bottom: 30px;
font-size: 15px;
}
.linkzone{
display: flex;
flex-direction: column;
gap: 10px;
}
.button{
display: block;
border: solid 2px skyblue;
width: 100%;
border-radius: 10px;
border: none;
background-color: skyblue;
text-decoration: none;
color: white;
font-weight: bold;
font-size: 15px;
padding: 12px;
transition: background-color 0.2s;
}
.button:hover {
background-color: deepskyblue ;
}
GPT 없으면 코딩 하는 게 너무 어렵습니다 허허허
JS도 넣어주시고 참 감사한 GPT입니다.
샘 올트먼 님께 경배드립니다
반응형