HTML & CSS8 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. [CSS] position: absolute 가운데 정렬 시키기 left: 50%; top: 50% 준 후에 transform을 이용해 요소 크기 만큼 보정 하기 .contents { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } 높이값은 지정하고 좌우만 가운데 정렬할 경우. .contents { position: absolute; left: 50%; top: 300px; transform: translate(-50%, 0); } 2023. 3. 13. 이전 1 2 다음
