안녕하세요 질문드립니다.
239
작성한 질문수 11
안녕하세요. 해당 강의 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;
}
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
172
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
211
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
418
1