카드 UI 디자인 첫번째 강의 마이너스 마진 질문
110
작성한 질문수 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 상태가 아닐때 보이도록 하는 방법은 없을까요?
답변 1
1
예제는 bottom을 기준으로 했지만 top을 기준으로 하면 p태그의 텍스트 길이와 관계 없이 할 수 있습니다.
top-[100%] 라면 부모요소의 가장 아래에 붙으니까 top의 좌표를 적당히 조절하시며 됩니다.
예를 들어 top-[95%] 이렇게 h3가 보일 정도로 조절해보세요.
해보시면 아시겠지만 bottom을 기준으로 하는 것이 더 편하실거에요.
part3. spy 쪽 / part3,part4 강의자료
0
32
2
최종 코드
0
40
2
Open AI 결제
0
40
2
figma 파일을 받을 수가 없어요
0
48
1
다운로드 연결이 되지 않을 때는 어떻게 해야할까요?
0
37
1
Visual Studio Code 대신 Pycharm 써도 되나요?
0
42
2
커서, 클로드, 피그마는 모두 유료버전을 사용해야하나요?
0
56
1
구글 서치콘솔 도메인 소유권 확인 실패
0
39
2
antigravity로 하던 작업 이제 visual code로 하면 되는 거죠?
0
59
1
다음 강의 얼른 올려주세요
0
44
2
일반 강의와 차이점?
1
53
1
중요하진 않지만 설명하신부분에서 안된부분..
1
37
1
안녕하세요, 강좌 5의 피그마 파일은 어디서 볼 수 있나요?
0
65
2
stopPropagation()에 대해서 질문 있습니다.
0
50
2
뉴스페이퍼 싱글템플릿 모바일 화면 디자인 질문
0
41
2
노션에 20.Contact가 없어요
0
47
2
검색엔진 차단 noindex
0
51
2
파트9 강의는 언제 오픈하시나요
0
51
2
ZIP 파일
0
55
2
26강 13F 강의 불일치 및 질문 요청
0
69
3
state 객체로 묶기
0
47
1
XAMPP에서 Apache, DB 재기동 시 접속안되는 문제
0
42
2
14. 네비게이션 - 반응형 상단 네비게이션 <toggle 이후 md 이상 에서 메뉴 사라짐 현상> 간단 대응
1
77
2
테일윈드 @layer utilities를 활용하는 경우
1
164
1