반응형 📍 Front-End/🜸 HTML & CSS7 [CSS] <tr>태그에서 display: 'block' 적용시 발생하는 문제 리액트로 태그 내에 data를 뿌려주는 도중 상태 값에 따라 특정 태그에 display: none 또는 display: block이 적용되도록 코드를 작성했다 예시 ) 내용1 내용2 내용3 내용4 display: ${(props) => (props.isHidden ? `none` : `block`)}; 그런데 display: block이 적용된 row의 태그가 아래처럼 와장창 깨져버렸다. 빨간색 outline 처리된 부분이 하나의 태그인데 태그 내의 들이 제각각인걸 볼 수 있다 해결법 해결법은 매우 간단했다. display: block 대신 display: '' 이렇게 아무것도 지정하지 않으면 테이블이 깨지지 않고 원래대로 돌아온다. 이제 태그 내의 태그가 깨지지 않고 정렬을 잘 지키고 있는 것을 확인할.. 2022. 2. 15. [CSS] 브라우저 스타일 초기화 각 브라우저별로 기본으로 적용되는 스타일이 있다 body 전체에 margin이 생기는 경우가 그 대표적인 예인데 복잡하게 코드로 작성할 필요 없이 간단한 복붙으로 스타일을 초기할 수 있는 방법이 있다 1. 아래 사이트 접속 jsDelivr - A free, fast, and reliable CDN for Open Source Supports npm, GitHub, WordPress, Deno, and more. Largest network and best performance among all CDNs. Serving more than 80 billion requests per month. Built for production use. www.jsdelivr.com 2. 복사 둘 중 하나를 선택하면 되는.. 2021. 6. 24. [CSS] 모바일 웹에서 높이(height) 100% 채우기 스크롤 없이 높이가 100% 꽉 차 있는 모바일 웹 제작 중 ! 일단 모바일 화면을 만들어야 되니 meta 태그를 추가 body에 height를 100vh로 지정하면 높이가 꽉 찬 view를 만들 수 있다 height : 100vh; 이렇게 간단하게 끝날 줄 알았는데... 실제 서버에 배포 후 휴대폰으로 확인해보니 스크롤이 있고 위아래로 아주 자유자재 잘 움직인다 🤣 내가 원한 건 스크롤 없이 높이가 100% 꽉 찬 view인데!!! ❓ 원인 웹 브라우저와 달리 모바일 브라우저에서는 최상단의 url 주소창과 최하단의 브라우저 버튼 까지를 view port로 인식한다. 그렇기 때문에 , 태그에 height : 100vh;를 지정할 경우 실제 콘텐츠를 나타내는 영역에 모바일 화면의 전체 사이즈의 높이로 계.. 2021. 6. 17. 이전 1 2 다음 반응형
