joyful

img {transform:translateY(100%); animation:애니메이션명 2.2s infinite linear} 문제 이미지에 transform 속성과 aos를 모두 선언했더니, 애니메이션이 제대로 동작하지 않음.  해결transform 속성과 aos를 따로 넣어주면 해결. transform은 이미지에 선언, aos는 이미지를 담고 있는 부모 박스에 선언 img {transform:translateY(100%); animation:애니메이션명 2.2s infinite linear}  원인aos에서의 transfrom 값과 애니메이션 설정을 위한 transform 값이 서로 충돌함.

문제모바일에서 동영상 사이 경계선이 계속 보임 해결/* inline 이미지 -> block 으로 만들기 */img { dispaly : block;}/* img 담고 있는 부모 박스에 font-size: 0선언 */.img-box { font-size: 0;} 원인inline요소는 기본적으로 font-size 스타일을 가지고 있음따라서 이미지가 inline, inline-block인 경우 여백이 생기는 브라우저 이슈가 있음이 때 두 가지 방법 중 택하여 사용하면 해결!1. img를 block 처리2. img의 부모 박스에 font-size: 0 처리   문제위 방법을 써도 경계선이 보임 해결/*동영상의 크기를 부모박스보다 크게 넣어서 부모 박스의 ove..

줄바꿈 관련 속성 중 word-wrap과 word-break가 종종 헷갈리곤 했는데,둘의 차이를 정확하게 짚고 넘어가보겠습니다.   웹에서는 언어를 크게 2가지로 분류합니다. 아시아 언어(CJK = China, Japan, Korea) : 음절, 문자로 줄바꿈비아시아 언어(언어, 숫자, 영어, 베트남어 등) : 공백으로 줄바꿈 언어별로 문자가 다르게 랜더링 되기 때문에 해당 언어의 줄바꿈을 설정 할 때 word-wrap과 word-break 중 적절한 것으로 사용하면 됩니다.  word-wrap- 비아시아 언어의 줄바꿈을 제어- 속성값: normal: 기본값break-word: 글자가 길어지면 강제로 끊어서 줄 바꿈 처리 → 단어의 기준을 글자로 바꿈 word-..

width와 max-width 속성은 비슷해보여서 혼동하는 경우가 많고, 그 용도의 차이점을 제대로 이해하기 어렵습니다. 하지만 두 속성은 엄연한 차이가 있고, 이를 완벽히 파헤쳐보겠습니다! width: 속성을 100%로 설정할 경우 요소의 크기를 부모요소 크기에 맞춰 100%로 유지합니다. max-width: 속성을 100%로 설정할 경우 요소의 기본 크기 이상으로는 크기가 조절되지 않습니다. 단, 그 기본크기가 부모 요소보다 큰 경우 부모 요소의 크기로 재설정됩니다. 가로너비가 720px인 이미지를 사용한 여섯가지 예시를 정리해보겠습니다. 1. 가로 너비 값을 아무 것도 지정하지 않은 경우 : 창의 크기를 줄여도 이미지 크기에 아무런 변화도 없습니다. See the Pen width, max-widt..