카드 UI 디자인 첫번째 강의 마이너스 마진 질문
127
작성한 질문수 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을 기준으로 하는 것이 더 편하실거에요.
푸터에 있는 카테고리 폰트 컬러 어떻게 바꾸나요?
0
14
1
장치 의존성과 CSR
0
22
1
순수 함수 / 순수 컴포넌트
0
15
1
css box-sizing 관련 질문
0
28
2
여태 만들던걸 다른 도메인으로 옮길 수도 있을까요?
0
20
1
node.js 설치 (LTS버전)
0
24
1
Cursor & Antigravity 소개 및 설치
0
30
2
뉴스페이퍼 테마 관련
0
32
1
지우지 말아야할걸 지운상태로 저장해버렸어요....
0
31
1
24번 수업에 나온 창은 무슨 프로그램인가요
0
32
1
Desktop모드-header영역 제작에서 제공해드린 폰트와 이미지
0
26
1
span 태그에 여백이 들어간 것 같은데 왜 그런건가요?
1
53
5
타입스크립트 autoComplete?
0
38
1
1-2 주가 데이터 수집 (OHLCV) 강의 질문 드려요
0
42
2
뉴스페이퍼 스킨을 꼭 사야하나요? 링크주소도 못찾겠어요
0
43
2
자료실
1
39
2
저는 일단 워드프레스로 블로그를 만들어 보려고
0
27
2
cafe24에서 했다가 fastcomet으로 변경하려 하는데요 문제가 생겼습니다
0
31
2
자바스크립트 입문 강의
0
28
1
html / css 기초는 있습니다..
0
50
2
ReactScriptExample 관련 질문
0
40
1
class 이름을 section__title이라고 짓는 것에 대해서
0
52
2
14. 네비게이션 - 반응형 상단 네비게이션 <toggle 이후 md 이상 에서 메뉴 사라짐 현상> 간단 대응
1
99
2
테일윈드 @layer utilities를 활용하는 경우
1
180
1





