inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

Tailwind CSS 실전 포트폴리오 퍼블리싱

카드 UI 디자인 - figure 카드 호버 이펙트(group 선택자 사용법)

카드 UI 디자인 첫번째 강의 마이너스 마진 질문

141

nsyunogong99

작성한 질문수 1

1

<figcaption class="bottom-[-220px] absolute bottom-0 bg-black/70 text-white p-6 w-full group-hover:bottom-0">
            <h3 class="capitalize font-semibold">😍 View detail</h3>
            <p class="my-4">
                Mongolia is the world's largest landlocked country that does not border a closed sea, and much of its area is covered by grassy steppe, with mountains to the north and west and the Gobi Desert to the south. Ulaanbaatar, the capital and largest city, is home to roughly half of the country's population.
                Mongolia is the world's largest landlocked country that does not border a closed sea, and much of its area is covered by grassy steppe, with mountains to the north and west and the Gobi Desert to the south. Ulaanbaatar, the capital and largest city, is home to roughly half of the country's population.
            </p>
            <a class="bg-blue-400 block text-center p-2 rounded-md hover:bg-blue-500" href="#none">Learn More</a>
        </figcaption>

figcaption 태그의 마이너스 마진값이 p 태그 텍스트 길이에 따라 달라지는 부분을 p 태그 컨텐츠의 길이에 상관없에 h3 태그만 hover 상태가 아닐때 보이도록 하는 방법은 없을까요?

HTML/CSS tailwindcss

답변 1

1

코딩웍스(Coding Works)

예제는 bottom을 기준으로 했지만 top을 기준으로 하면 p태그의 텍스트 길이와 관계 없이 할 수 있습니다.

top-[100%] 라면 부모요소의 가장 아래에 붙으니까 top의 좌표를 적당히 조절하시며 됩니다.

예를 들어 top-[95%] 이렇게 h3가 보일 정도로 조절해보세요.

해보시면 아시겠지만 bottom을 기준으로 하는 것이 더 편하실거에요.

연애인 사주는 그냥 넣어도 상관없나요?

0

34

1

14강. 업체 연결이 필요하신 분은 개인톡으로 문의해주세요.

0

35

1

인프당 무당 캐릭터 뽑는 프롬프트

0

41

2

10월 15일 삭제예정 강의 문의

0

41

1

강의가 중복됐어요

0

55

1

결제가 이루어지는 방식에 대한 문의

0

63

1

강의제목에 10/15일 삭제라고 나와있는데,

0

48

1

선생님 강의자료를 받을수 없어요! 메일보냈어요.

0

57

2

1강 동영상 재생 오류

1

67

2

헤더에서 empty column이 삭제가 안되고, 헤더 레이아웃을 동영상처럼 선택하는 옵션이 안나오는데 어떻게 하나요?

0

43

1

Composition단계에서 `Layer`는 누가 만드는지

0

44

1

Strict Mode 예시 질문!

0

63

2

해당 플러그인을 설치했는데 추가 지원 안될 수 있다고 다른 플러그인을 깔아보라는데 어떻게 해야하나여?

0

66

2

만일 실물을 택배로 배송해야 할 경우 주소지 입력하는 방법이 궁금해서요.

1

92

4

설명이 잘못된거같습니다.

1

79

2

31강 학습자료에 프롬프트가 엉뚱한것이 있어요

1

66

1

bitnami 설치

0

40

0

강의 소스 코드는 어디서 볼수 있나여?

1

70

1

자료집 관련

0

68

2

13. (App 2) 기본기 훈련 에서

0

98

1

17강 강의에 목데이터 첨부파일이 없습니다.

2

90

2

2. 어떤 도구를 사용하는 것이 가장 유리할까? 강의 중

0

65

1

14. 네비게이션 - 반응형 상단 네비게이션 <toggle 이후 md 이상 에서 메뉴 사라짐 현상> 간단 대응

1

122

2

테일윈드 @layer utilities를 활용하는 경우

1

197

1