inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

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

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

display:flex하면 h태그랑 p태그가 같은 줄로 붙어버려요

490

pororo556

작성한 질문수 4

1

강의 2:00부분에서  display:flex 이거 적용하면 선생님꺼랑 다르게 되요

.hexagon .caption {
  position: absolute;
  width: inherit;
  height: inherit;
  color: #fff;
  transition: 0.5s;
  display: flex;
}

 

 

 

 

이런식으로 h태그랑 p태그가 나란히 배치되어 버려요.

<!DOCTYPE html>
<html lang="en">
<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">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="frame">
    <div class="hexagon">
      <div class="shape">
        <div class="caption">
          <h2>Photographer</h2>
          <p>
            As in other arts, the definitions of amateur and professional are not entirely categorical.
          </p>
        </div>
        <img src="images/artist-01.jpg">
      </div>
    </div>
    <div class="hexagon">
      <div class="shape">
        <div class="caption">
          <h2>Musician</h2>
          <p>
            A composer is a musician who creates musical compositions.
          </p>
        </div>
        <img src="images/artist-02.jpg">
      </div>
    </div>
    <div class="hexagon">
      <div class="shape">
        <div class="caption">
          <h2>Sculptor</h2>
          <p>
            Sculpture is the branch of the visual arts that operates in three dimensions..
          </p>
        </div>
        <img src="images/artist-03.jpg">
      </div>
    </div>
  </div>
</body>
</html>
 
 
/* Google Web Font */
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500&display=swap');

*{
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
 
}

a{
  text-decoration: none;
  color: inherit;
}


.frame {
  display: flex;
  gap: 40px;
}
.hexagon {
  width: 400px;
  height: 450px;
  position: relative;
}
.shape {
  clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0 70%, 0 30%);
  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: #fff;
  transition: 0.5s;
  display: flex;
}
뭘 잘못한걸까요 ㅠㅠ
 

jquery javascript HTML/CSS

답변 1

0

코딩웍스(Coding Works)

이 부분은 영상이 잘못된 부분 때문에 그렇습니다.

pororo556 님께서 잘못하신게 아닙니다.

CSS 호버이펙트 - 클립패쓰(Clip-path) 이미지 오버레이(1) 영상의 5분 29초에 .caption 밑에 h2와 p태그를 부모요소 div로 감싸주는 부분 설명이 짤리고 진행되서 애먹으신거에요. 완성본 다운로드해서 코드 보시면 .caption 밑에 h2와 p태그를 부모요소 div로 감싸져 있습니다.

곧, 아래 코드처럼 해주셔야 영상처럼 결과물을 만드실 수 있어요.

<div class="caption">

       <div>

            <h2>Photographer</h2>

            <p>

              As in other arts, the definitions of amateur..........

            </p>

      </div>

</div>

이건 저의 실수이니 죄송합니다.

아래 이미지를 보시면  .caption 밑에 h2와 p태그를 부모요소 div로 감싸지 않고 같은 결과를 만드는 방법도 적어 놓았습니다. 

공부하시는데 혼란을 드려서 죄송합니다.ㅠㅠ

pointer-event:none;

1

73

1

실전 반응형 웹사이트 이미지 다운

1

77

2

87.JavaScript & jQuery - 유효성 체크 애니메이션 로그인폼(3)

1

64

2

목소리 좀 키워주세요.

1

131

2

PDF파일은 어디있나요?

1

182

2

실전 반응형 웹사이트

1

155

2

강의 내용 pdf가 제공되나요?

1

171

1

flex 가 부트스트랩 5 에 추가되었는데 float 를 실무에서 아직 많이 사용하나요 ?

1

217

1

다크모드 버튼 만들때 왜 <button> 이 아닌 <div> 를 사용하나요 ?

1

192

1

실전퍼블리싱 카테고리 탭메뉴 안에 Slick.js가 안먹힙니다ㅠㅠ

1

386

2

scss에 active 적용하는 방법

1

320

1

반응형이 안먹힐때 뭐가 문제일까요?? ㅜㅠ

1

1183

2

실전 넷플릭스 6 footer부분

1

267

2

.dark 적용 하는 법

1

210

1

JavaScript & jQuery - 검색창 확장하기(3)에서

1

303

2

포트폴리오 CSS Grid 반응형 레이아웃에서

1

292

1

폰트어썸 4.7 아이콘

2

475

1

넷플릭스 공식사이트 수업 header

1

234

1

JavaScript & jQuery - 푸터 패밀리사이트 셀렉트 커스텀 스타일(2)

1

553

2

loginForm input type=email, password 위치 css 오류

2

415

1

이미지 전환 후 잔상 효과

1

1308

4

안녕하세요. jquery 슬라이더에 대해 질문 있습니다.

1

295

1

btn 을 block 이 아닌 inline-block 으로 바꾸신 이유가 궁금합니다

1

487

1

flex나 grid 로 구현하는것과 비교하면 어떤가요?

1

417

1