animation-delay 엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정 animation-direction 애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정 animation-duration 한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정 animation-iteration-count (en-US) 애니메이션이 몇 번 반복될지 지정. infinite로 지정하여 무한히 반복한다. animation-name (en-US) 이 애니메이션의 중간 상태를 지정. animation-play-state (en-US) 애니메이션을 멈추거나 다시 시작 animation-timing-function (en-US) 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정 animation-..
유튜브 웹소스를 가져와 적용시킬때 모바일에서는 레이아웃이 깨지는 경우가 있는데 컨테이너 또는 블록(div)를 만들고 그공간에 아래와 같은 소스를 적용시켜 모바일 사이즈를 조절할 수있다. .video-container { text-align: center; position: relative; padding-bottom: 56.25%; padding-top: 300px; height: 0; overflow: hidden; margin: 10px 10px 30px 10px; } position은 위치에 대한 명령. 다른 요소들과 겹치지 않게 상대적인 위치를 지정하는 relative선언. 유튜브 프레임의 사이즈를 조절하는 방법은 높이를 고정시키고 padding-bottom으로 전체적인 프레임 사이즈 비율을 깨주..
:nth-child() : 앞에서 부터 센다. :nth-last-child() : 뒤에서 부터 센다. :nth-child( 2n+1 ) //여기서 2는 n의 정수(0, 1, 2, 3, … 차례대로 대입이 된다.) // 1,3,5,7,9 홀수로 선택자가 적용 :nth-child( 2n+2 ) //여기서 2는 n의 정수(0, 1, 2, 3, … 차례대로 대입이 된다.) // 0,2,4,6,8 짝수로 선택자가 적용
1. 이미지로 텍스트 채우기 h1{ background-image: url('images/flower.jpg'); background-clip: text; color: transparent; background-color: white; } 2. 텍스트에 획 추가 text-stroke텍스트 에 획이나 윤곽선을 추가하는 속성을 사용하여 텍스트를 더 읽기 쉽고 가시적으로 만듭니다 . /* 🎨 Apply a 5px wide crimson text stroke to h1 elements */ h1 { -webkit-text-stroke: 5px crimson; text-stroke: 5px crimson; } 3. 텍스트 강조 h1 { text-emphasis: "⏰"; } 4. span태그 사용하지 않고 강조하..
flex Container display, flex-flow(단축속성), flex-direction, flex-wrap, justify-content, align-content, align-items display:flex - flex아이템들은 가로 방향으로 배치되고, 자신이 가진 내용물의 width 만큼차지(inline요소들처럼) height는 컨테이너의 높이만큼 늘어난다. display:flex 와 display:inline-flex 차이 - flex : block요소와 같은 성향(수직쌓임) / inline-flex : inline요소와 같은 성향(수평쌓임) - Container의 수직과 수평 쌓임의 차이 intes에 영향을 주지 않는다. flex-flow (단축속성) - flex itens의 주축을..
