커뮤니티
로그인
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
카카오톡 공유할 때 나오는 이미지가 안 나옵니다. 확인 한번 부탁드려요!
나만의 프로필 링크 페이지 만들기
1주차
북마크
김*웅
댓글
2
추천
0
조회수
15
조회수
15
답변 완료

<!DOCTYPE html>

<html>

<head>

<meta property="og:title" content="김기웅">

<meta property="og:description" content="안녕">

<meta property="og:image" content="hi.png">

<title>김기웅 - 프로필 링크</title>

<style>

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

* {

font-family: "Pretendard",serif;

}

body {

background-color: #44398a;

}

.profile {

width: 100px;

height: 100px;


border-radius: 100%;


border : 2px solid white;


background-image: url('hi.png');

background-position: center;

background-size: cover;

}

.main {

color : white;

font-size : 20px;


margin-top: 30px;

margin-bottom: 10px;

}

.sub {

color : white;

font-size: 20px;


margin-top : 0px;

}

.wrap {

width: 300px;

margin: 30px auto 0px auto;


display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

}

.wrap > a {

width : 300px;

height: 50px;


background-color: white;

border-radius: 8px;


margin-bottom: 10px;

font-size: 14px;

font-weight: bold;

color: #44398a;


display: flex;

flex-direction: column;

justify-content: center;

align-items: center;


text-decoration: none;


box-shadow: 3px 3px 5px 0px black;

}

.wrap > a:hover {

background-color: #f2f2f2;

}

</style>

</head>

<body>

<div class="wrap">

<div class="profile"></div>

<h1 class="main">김기웅</h1>

<p class="sub">안녕!</p>

<a target="_blank" href="https://www.instagram.com/giung842/">인스타그램</a>

<a target="_blank" href="https://www.facebook.com/kim.giung/">페이스북</a>

<a target="_blank" href="https://www.naver.com/">네이버</a>

<a target="_blank" href="https://www.youtube.com/">유튜브</a>

</div>

</body>

</html>

취소
 공유
취소
댓글 0
댓글 알림
나의얼굴