CSS 썸네일형 리스트형 <CSS> @keyframes 애니메이션 나는 처음에 동적으로 움직이는 애니메이션 효과는 스크립트로만 처리를 해줄 수 있는 줄 알았는데 CSS 코드 만으로 충분히 애니매이션 효과가 가능하다. mdn을 뒤져보면 @keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } } 이런 식으로 기본적인 정의가 되어있다. 간단히 정리를 하면 slidein 이라는 블록에 애니메이션 효과를 맥이는 것인데 @keyframes 뒤에 본인이 스타일먹일 블록명 from >> 시작할 때의 스타일 to >> 끝났을 떄의 스타일 정도로 기초를 잡고 나도 처음 써봐서 구글링해서 나온 코드를 기반으로 한번 적용된 화면을 보자 See the Pen MWKBRmJ.. 더보기 [CSS] 컨텐츠 길이 초과되었을 때 ...으로 나타내기 (text-overflow:ellipsis)(overflow: hidden) 학원에서 진행중인 프로젝트에서 블록안에 텍스트 내용이 오버 되었을 떄 ...으로 처리하는 부분에서 막혀봤어서 한 번 정리해보려 한다. See the Pen vYLKwXQ by Sang Hoon Jeong (@DevilFront) on CodePen. 이건 기본적으로 영역밖을 초과한 내용에 한해서 안보이게 하는 overflow:hidden 을 사용해준 상태다. 아래는 내가 작성하고 끝났다라고 1차적으로 생각하게 만든 상태다. 무언가 이상한 것을 느낄수 있을 것이다. See the Pen vYLKwxv by Sang Hoon Jeong (@DevilFront) on CodePen. 아래를 보면 ...으로 표시 되는 부분이 내가 생각한 내용이랑 다르다는 것을 볼 수 있을 것이다. 예를 들어 나는 마르고... .. 더보기 [HTML/CSS] 블록배치 방법 <flex> 우리는 CSS를 이용해서 기존의 HTML로 만든 블록들을 우리 마음대로 배치하고 움직일 수 있어야 한다. 비록 아직 기본중의 기본만 겨우 구사 할 수 있지만 블록들을 이쁘게 꾸미고 색깔을 이쁘게 주는것보다는 먼저 내가 원하는곳에 블록들을 마음대로 배치 할 수 있어야 한다고 생각한다> 더보기 이전 1 다음
