HTML & CSS9 [front] CSS만으로 자연스러운 하위 요소 나타내기 (fade-in) 원하는 결과: 위와 같이 button에 마우스를 hover하면 button의 하위요소를 자연스럽게 fade-in, fade-out하려고 한다. All 김철수@도메인.com 김영희@도메인.com 바둑이@도메인.com 우선 하위요소인 .all-recipient는 다음과 같이 opacity: 0와 visibility: hidden를 이용해 보이지 않도록 처리한다.div.all-recipient { position: absolute; z-index: 2; ... opacity: 0; visibility: hidden; transition: opacity ease 0.3s;}.btn-show-all:hover div.all-recipient { .. 2025. 3. 14. inline-block 사이 간격 발생 (margin: 0) 에 display: inline-block를 적용했는데 margin: 0 임에도 사이 여백이 발생한다. 원인은 태그 사이 줄바꿈, 공백이 빈칸(whitespace)으로 파싱되는 문제이다. 태그 사이 줄바꿈, 공백을 제거하면 아래와 같이 된다. 다만 이 경우, 코드 가독성을 심하게 해치게 되는데.. > 해결방법 1. [HTML] 빈 공간 주석처리 닫는 태그부터 다음 여는 태그 전까지를 주석처리한다. 2. [HTML] 닫는 태그 '>'를 줄바꿈하기 3. [CSS] container의 font-size: 0 설정 .div-wrapper { font-size: 0px; } 4. inline-block 대신 float, flex 사용 - 단, 가운데 정렬한다면 float은 추가 설정이 필요하고, flex의 경우 .. 2023. 4. 12. [CSS]animation을 적용하는 예시 'float'이라는 위아래로 가볍게 움직이는 애니메이션 만들기 키프레임 정의 @-webkit-keyframes float { 0%,100% { top:10px; } 50% { top:30px; } } @keyframes float { 0%,100% { top:10px; } 50% { top:30px; } } CSS 적용하기 - 3초 동안 무한 반복. 시간당 속도 옵션은 ease float { webkit-animation: 3s arrow infinite ease; animation: 3s arrow infinite ease; } 1. linear : 애니메이션 효과가 처음부터 끝까지 일정한 속도로 진행됩니다. 2. ease : 기본값으로, 애니메이션 효과가 천천히 시작되어, 그다음에는 빨라지고, 마지막.. 2023. 3. 15. [CSS] 영상을 배경으로 쓸 때 화면 가득 채우기 height에 100%을 주면 최대 크기에서 좌우 여백이 생기고 width에 100%를 주면, 창 좌우 폭을 줄이면 상하 여백이 생긴다. video 태그에 아래 속성을 넣어주면 된다.. 한참 헤맸는데,, video { object-fit: cover; width: 100%; height: 100vh; } 2023. 3. 14. 이전 1 2 3 다음
