일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
Tags
- 화살표2개
- accordian
- CustomHook
- twoarrow
- transition
- debouncing
- react
- 함수형프로그래밍
- 부모요소의 패딩 무시
- es6
- parent padding
- 제어컴포넌트
- Carousel
- ?? #null병합연산자
- 서초구보건소 #무료CPR교육
- alias설정
- createPortal
- ㅡ
- ignore padding
- DOM
- BFC
- 문제해결
- 리액트
- 부모패딩
- BlockFormattingContext
- vite
- useQueryClient
- tailwindCSS
- 조건부스타일
- QueryClient
Archives
- Today
- Total
프론트엔드 첫걸음
height 100%를 쓰는 이유 본문
너무나도 기본중의 기본인데 나처럼 확실하게 모르고 있었던 사람 있으리라 생각하며 기록으로 남긴다.
See the Pen hegiht 100%가 필요한 이유 by JEONG (@cona) on CodePen.
grandParent에 height 100px을 지정해주었다.
parent에 height 100%가 없다면 child는 height 30%해줘도 부모의 height를 모르기때문에 30%가 적용되지 않는다.
parent에 height:100% 을 사용하지 않고, child div에서 grandParent div의 높이를 상속받고 싶다면 relative를 사용하면 된다.
See the Pen height 100% 없이 relative로 부모 높이 상속받기 by JEONG (@cona) on CodePen.
relative absolute 헷갈린다면 아래 정리 참고
https://creamilk88.tistory.com/197
'개발 공부 > CSS' 카테고리의 다른 글
이미지를 parent 요소의 패딩 무시하고 화면을 가득 채우도록 만들기 (0) | 2024.03.20 |
---|---|
scrollHeight사용해서 accordian의 transition 효과 구현하기 (0) | 2023.11.02 |
svg 아이콘 색바꾸기 어떻게 하나요? (0) | 2023.09.25 |
길이가 각각 다른 list item 중앙 정렬 (0) | 2023.09.21 |
clip-path transition (0) | 2023.08.29 |