인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

투티니ෆ님의 프로필 이미지
투티니ෆ

작성한 질문수

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)

CSS 호버이펙트 - 클립패쓰(Clip-path) 이미지 오버레이(2)

안녕하세요 질문드립니다.

작성

·

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;

}

투티니ෆ님의 프로필 이미지
투티니ෆ
질문자

엄허 너무 감사드립니다ㅠㅠㅠㅠㅠㅠ 바로 제대로 돌아왔네요 !! 
감사합니당 :)

투티니ෆ님의 프로필 이미지
투티니ෆ

작성한 질문수

질문하기