animation CSS- 애니메이션을 사용하면 요소를 한 스타일에서 다른 스타일로 점진적으로 변경할 수 있다. - CSS 애니메이션을 사용하려면 먼저 애니메이션에 대한 몇가지 키 프레임 keyframes 을 지정해야한다. - 키프레임(keyframe)은 특정 시간에 요소의 스타일을 유지한다. animation 속성 값animation-name@keyframes 애니메이션의 이름을 지정합니다.animation-duration애니메이션이 한 주기를 완료하는 데 걸리는 시간을 지정합니다.animation-timing-functich애니메이션의 속도 곡선을 지정합니다.ex) linear, ease, ease-in ..animation-delay애니메이션 시작 지연을 지정합니다.animation-iterat..
Frontend/HTML, CSS,Java Script
Grid CSScolumn Gap 이랑 Row Gap을 합쳐서 써주면 gap: 00px; 으로 나타낼 수 있다. * grid-template-columns .container { grid-template-columns: 40px 50px auto 50px 40px;} 공백으로 구분된 값 목록으로 그리드의 열과 행을 정의한다. 값은 트랙 크기를 나타내고 그 사이의 공간은 grid line 격자선을 나타낸다. 40px50pxauto50px40px * repeat .container { grid-template-columns: repeat(5, 10px)} 10px10px10px10px10px * 1fr fr = fraction 1fr은 사용 가능한 공간의 1 부분이다. (사용 가능한 공간에 대한 비율..
미디어 쿼리 미디어 쿼리는 화면 해상도, 기기 방향 등의 조건으로 HTML에 적용하는 스타일을 전환할 수 있는 CSS3의 속성중 하나입니다. 반응형 웹 디자인에서는 미디어 쿼리를 사용해 적용하는 스타일을 기기마다(화면 크기마다) 전환 할 수 있습니다. * 조건이 만족 될 때 스타일 적용하기 @media (조건) { 스타일 } @media (max-width: 1000px) { .video-grid { grid-template-columns: 1fr 1fr 1fr 1fr; }} @media (max-width: 751px) and (max-width : 999px) { .video-grid { grid-template-columns: 1fr 1fr 1fr; ..
display 속성 ( block, inline, inline-block) display 속성은 요소가 차지하는 영역에 관한 정보를 나타냅니다. 각 속성에 따라 서로 다른 요소들이 배치되는 모습이 달라집니다.block block 특징 - 항상 줄바꿈이 발생합니다. - 가로폭(width)는 화면 전체를 차지합니다. - width, height, margin, padding 속성을 지정할 수 있습니다. - block요소 안에는 inline 요소를 포함할 수 있습니다. - 대표적인 block요소 -> , , , inline inline 특징 - 줄바꿈 없이 다른 요소들과 한 줄에 배치될 수 있습니다.- width, height를 지정할 수 없습니다. - inline 요소는 content의 너비만큼 가..
position 속성은 웹 문서 안 요소들을 어떻게 배치할 것인지를 정하는 속성이다. position 속성을 이용하면 텍스트나 이미지를 원하는 위치로 배치할 수 있고 어떤 방식으로 놓을지를 결정할 수 있다. position : static | relative | absolute | fixed | sticky static은 요소를 문서 흐름에 맞춰 배치 relative는 이전 요소(주로 부모 요소)에 자연스럽게 연결하여 위치를 지정absolute는 원하는 위치를 지정해 배치 fixed 지정한 위치에 고정하여 배치 sticky는 위치에 따라서 동작방식이 달라짐. 요소가 임계점(scroll 박스 기준) 이전에는 relative와 같이 동작. 그 이후에는 fixed와 같이 동작. static을 제외한 나..
