작성
·
212
1
안녕하세요. 해당 강의 2분 25초까지 따라 실습하다가.. 제 코드가 자꾸 무슨 문제인지 결과물이 강사님 결과물이랑 다르게 보여서
코드를 첨부드립니다. ㅠㅠ
보시면 아시겠지만 강사님 코드랑 동일하게 코딩을 했는데
.caption 밑의
h2, p 태그 부분이 자꾸 나란히 붙어있어서 여쭤봅니다.
(미리 답변 감사합니다 ^^)
/* Google Web Fonts CDN */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700,900&display=swap');
/* FontAwesome CDN 4.7*/
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
/* XEICON CDN */
@import url('http://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css');
/* 사파리 인풋스타일 제거 */
input:checked[type="checkbox"] {
background-color:rgb(255, 255, 255);
-webkit-appearance:checkbox;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="image"],
input[type="tel"],
input[type="submit"],
button,
select,
textarea{
-webkit-border-radius:0;
-webkit-appearance:none;
}
/* reset CSS */
h1,h2,h3,h4,h5,h6 {
font-weight: 500;
margin-top: 0;
}
/* CSS */
* {
box-sizing: border-box;
}
body {
font-family: 'Noto Sans', sans-serif;
background-color: #fff;
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
}
.frame {
display: flex;
gap: 40px;
}
.hexagon {
/* border: 1px solid #000; */
width: 400px;
height: 450px;
position: relative;
}
.shape {
clip-path: polygon(50% 0, 100% 26%, 100% 71%, 50% 99%, 0 73%, 0 27%);
/* border: 1px solid rgb(255, 26, 26); */
width: inherit;
height: inherit;
position: absolute;
}
.shape img {
width: inherit;
height: inherit;
object-fit: cover;
object-position: right;
}
.hexagon .caption {
position: absolute;
width: inherit;
height: inherit;
color: white;
transition: 0.5s;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.hexagon .caption h2 {
font-size: 3em;
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>css 호버이펙트 - clip-path 이미지 오버레이(1)</title>
<link rel="stylesheet" href="../css/style33.css">
<!-- jQuery CDN -->
<script src="https://code.jQuery.com/jquery-3.5.1.min.js"></script>
<script src="../js/jquery.scrollTo.min.js"></script>
</head>
<body>
<div class="frame">
<div class="hexagon">
<div class="shape">
<div class="caption">
<h2>Photographer</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam optio debitis aliquid, voluptatem quis nostrum!
</p>
</div>
<img src="../images/artist-01.jpg">
</div>
</div>
<div class="hexagon">
<div class="shape">
<div class="caption">
<h2>Musician</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam optio debitis aliquid, voluptatem quis nostrum!
</p>
</div>
<img src="../images/artist-02.jpg">
</div>
</div>
<div class="hexagon">
<div class="shape">
<div class="caption">
<h2>Sculptor</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam optio debitis aliquid, voluptatem quis nostrum!
</p>
</div>
<img src="../images/artist-03.jpg">
</div>
</div>
</div>
</body>
</html>
답변 1
0
플렉스로 가로배치(row) 되어서 그렇습니다.
세로(column)으로 바꿔주어야 합니다.
.hexagon .caption {
position: absolute;
width: inherit;
height: inherit;
color: white;
transition: 0.5s;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
엄허 너무 감사드립니다ㅠㅠㅠㅠㅠㅠ 바로 제대로 돌아왔네요 !!
감사합니당 :)