<body>
<div class="main-bg">
<div class="main-introduction">
<h1>Frontend Student Developer, <span style="font-size: larger; color: rgb(165, 255, 252);">Dan</span></h1>
<p>
Always considering improvements, growing, code.
</p>
<p>
Recently fell in love with developing.
</p>
<button class="showmoreBtn">Show More</button>
</div>
<div>
< img src="img/phone.png" alt="phone" class="phone">
</div>
</div>
</body>
div,
input,
textarea {
box-sizing: border-box;
}
body {
margin: 0;
}
html {
line-height: 1.15;
/*기본 행간 높이*/
}
* {
margin: 0;
padding: 0;
}
.main-bg {
background: rgb(2, 0, 36);
background: linear-gradient(180deg, rgba(2, 0, 36, 1) 0%, rgba(172, 224, 255, 1) 0%, rgba(106, 166, 241, 1) 0%, rgba(73, 73, 182, 1) 100%);
width: 100%;
height: 1000px;
}
.main-introduction {
color: white;
width: 40%;
padding: 10px;
position: relative;
left: 100px;
top: 100px;
}
.main-introduction h1, p{
margin-bottom: 10px;
}
.showmoreBtn {
width: 100px;
margin-left: 5px;
padding: 13px;
border-radius: 20px;
background: rgb(98, 98, 98);
color: white;
border: none;
box-shadow: 3px 3px 3px black;
transition-duration: 0.3s;
cursor: pointer;
}
.showmoreBtn:active {
margin-left: 5px;
margin-top: 5px;
box-shadow: none;
}
.phone {
width: 30%;
position: relative;
left: 1000px;
}
숙제하다가 심심해서 버튼에 누를 때 효과를 줘봤는데.. 버튼을 누를 때마다 옆의 스마트폰 이미지도 똑같이 해당 효과가 적용됩
니다. 이미지 클릭시엔 변동없고 버튼을 누를 때만 :active에 적은 코드가 같이 적용됩니다.
크롬 개발자도구로 디버깅해봤는데 현재 phone쪽에 적용되는 css 코드들은 아무런 문제가 없었습니다. 느낌이 아 이게 마진상쇄인가! 싶긴 했는데
버튼, 버튼을 포함한 div, phone이미지 그 어떤것도 상하 테두리가 겹치는게 없는 것 같아 아닌듯 합니다.
어떤 게 문제였고 해당 해결방안이 어떻게 해결한건지 궁금합니다.
