커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
수업 다 듣고 템플릿 수정해가면서 추가공부하고 있습니다.
undefined주차
임*준
댓글
5
・
추천
0
・
조회수
13
조회수
13
답변 완료
'스파르타 프로필' 템플릿을 수정해가면서 추가 공부 중입니다.
프로필 사진명은 Origianl.png 인데 일부분이 확대되어 표시되는 오류가 자꾸 나옵니다.
아래처럼 원래 크기로 보이게 하고 싶은데 어떻게 하나요?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:title" content="Day Break 미라클 모닝">
<meta property="og:description" content="매일 성장하고자 하는 사람입니다.">
<meta property="og:image" content="Original.png">
<script type="text/javascript" src="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/free/sparta.js"></script>
<title>Day Break 프로필</title> <!-- 인터넷 창 제목 수정 -->
<style>
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
* {
font-family: "Pretendard",serif;
}
body {
background: linear-gradient(180deg, #FFFCFD 0%, #FFE2E8 100%);
height: 100vh;
}
.profile {
width: 139px;
height: 71px;
background-image: url('Original.png');
background-position: center;
}
.main {
color : #000000;
font-size: 22px;
size : 20px;
margin-top: 30px;
margin-bottom: 10px;
}
.sub {
color : #000000;
font-size: 14px;
font-weight: 400;
size : 14px;
margin-top: 0px;
margin-bottom: 30px;
}
.wrap {
width: 300px;
margin: 30px auto 0px auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.bigbutton {
width: 320px;
height: 59px;
border-radius: 8px;
background-color: white;
margin-bottom: 16px;
font-size: 14px;
font-weight: bold;
color:#000000;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-decoration: none;
box-shadow: 0px 4px 16px rgba(232, 52, 78, 0.2);
}
.buttons > a {
width: 152px;
height: 59px;
border-radius: 8px;
font-size: 15px;
font-weight: bold;
color:#FFFFFF;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
text-decoration: none;
box-shadow: 0px 4px 16px rgba(232, 52, 78, 0.2);
margin: 0px 8px 17px 8px;
}
.dding {
background-color: #FF773C;
}
.online {
background-color: #e8344e;
}
.hang {
background-color: #f50000;
}
.chang {
background-color: #0f16ae;
}
.buttons {
display: flex;
}
.wrap > a:hover {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<div class="wrap">
<div class="profile"></div>
<h1 class="main">Day Break</h1><!-- 사진 바로 밑 수정 -->
<p class="sub">함께 해서 더 멀리 가는 사람</p><!-- 사진 바로 및 설명 수정 -->
<a class="bigbutton"target="_blank" href="https://spartacodingclub.kr/community/blog/hanghae99-dobrain-interview">🌕 세상을 바꾸는 '달나라 병원' 두브레인 인터뷰</a>
<a class="bigbutton"target="_blank" href="https://youtu.be/pV5OlyZoRb0">🔴 코디딕이 돌아왔다!</a>
<div class="buttons">
<a class="dding" target="_blank" href="https://ddingdong.spartacodingclub.kr/">띵동코딩</a>
<a class="online"target="_blank" href="https://spartacodingclub.kr/sparta_online">스파르타 온라인</a>
</div>
<div class="buttons">
<a class="hang" target="_blank" href="https://hanghae99.spartacodingclub.kr/">항해99</a>
<a class="chang"target="_blank" href="https://chang.spartacodingclub.kr/">{창}</a>
</div>
</div>
</body>
</html>
댓글 알림
