inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

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

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

99

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을 기준으로 하는 것이 더 편하실거에요.

6-6 실습 문의

0

17

2

섹션5 노션링크 는 따로 없나요?

0

22

2

Part 4에서 강의 연관 노션 정보들이 워드파일에 없습니다.

0

29

2

첨부자료 Part 4 코드 확인 부탁드리겠습니다.

0

23

2

선생님 각 강좌마다 예시로 보여주시는 웹페이지들은 어디서

0

21

1

퍼플렉시티 최소 결제단위 50달러로 바뀐 것 같습니다.

0

44

2

claude plugin 방법 자세히 부탁드려요

0

39

2

강의에 적용한 스크립트를 받아 볼수 있을까요?

0

38

2

최근 코테, 과제 테스트 트렌드

0

64

2

노션 25 인터렉션 구현 파트 안 보입니다!

0

36

2

파트3 13F부분도 짤린거같은데 확인해주세요

0

38

2

Gemini로 진행가능 여부 궁금합니다.

0

58

2

뉴스페이퍼 싱글템플릿 디자인 관련 상담 요청

0

25

2

프롬프트 11 진행 완료

0

41

2

파트3 수급 부분

0

41

2

tailwind css 적용 잘 안되면 참고하세요.

0

23

1

claude cowork에서 작업하는거와 차이는?

0

39

2

섹션3 Shadcn/ui 생성 시

0

94

1

background vs background-color

0

23

1

오타?

0

27

1

figma variable 반응형 디자인 결과물 공란

0

59

2

렌더링 차단 리소스 javascript 실행에 관련해서 질문 있습니다.

0

46

2

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

1

63

2

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

1

155

1