반응형

IT/CSS

[css] easing 의 종류 및 사용방법

easing이란? - 애니메이션 을 자연스럽게 만든다. - 짧게 유지할 수 있는 경우를 제외하고 ease-in 또는 ease-in-out 애니메이션을 피해야함 (사용자에게 갑갑한 느낌을 줄수 있음) 키워드 - ease : 시작과 종료를 부드럽게 - linear : 일정 - ease-in : 서서히 시작 - ease-out : 서서히 종료 - ease-in-out : 서서히 시작하여 서서히 종료 - cubic-bezier(x1,y1,x2,y2) : 3차 배지에 곡선의 P1과 P2를 (x1,y1,x2,y2)로 지정 - easeInQuad - easeOutQuad - easeInOutQuad - easeInCubic - easeOutCubic - easeInOutCubic - easeInQuart - ease..

2020.01.23 게시됨

IT/CSS

float 속성

레이아웃을 정렬하는 방법에대해 알아볼까합니다. 좌우 정렬을 위한 속성으로는 세가지가 있는데요. 첫번째, 이번글의 주제인 float입니다. 두번째, inline-block이 있고요. 세번째, flex가 있습니다. 이 셋 모두 css에서 좌우정렬이나 배치를 할 수 있는 속성입니다. 그중 제가 현재 가장 많이 사용하고 있는 float에 대해 설명할까 합니다. float는 레이아웃 정렬을 위해 제가 가장 많이 사용하는 속성인데요 속성 값으로 lfet(왼쪽띄움);right(오른쪽띄움);none(기본) 이 있습니다. 사용방법 안녕하세요 반갑습니다 - 예제 https://codepen.io/seozzz/pen/yLBRWqE 이렇게 좌우정렬이 되는데요 여기서 반드시 whidth 값이 존재해야 합니다. 그리고 주의할 점..

2019.12.11 게시됨

IT/CSS

ie 호환방법

ie10까지는 css3가 잘 적용됩니다. 하지만 9부터는 망가지기 시작하는데요. ​ 첫번째 방법은 아래와 같이 @midia를 따로 사용하여 각각의 css를 적용합니다. /*ie9/ie10 */ @media screen and (min-width:0\0) { span{width:15px;} } /* ie8/ie9/ie10 */ @media screen\0 { span{width:15px;} }/ie7/ie6 */ @media \0screen\,screen\9 { span{width:15px;} } /* ie8 */ @media \0screen { span{width:15px;} } /* ie6/7이하 */ @media screen\9{ span{width:15px;} } 두번째 방법으로는 밑에와 같이 이용..

2019.12.11 게시됨

IT/CSS

css 원하는 부분 선택자

#1,4,7,10.... .boards_cont ul li:nth-child(-3n + 4 ) #4,7,10.... .boards_cont ul li:nth-child(3n + 4 ) #홀수선택 .boards_cont ul li:nth-child(even) #짝수선택 .boards_cont ul li:nth-child(odd) .boards_cont ul li:nth-child(2n) #4번째 부터 .boards_cont ul li:nth-child(n+4) #1번째 부터 19번째까지 .boards_cont ul li:nth-child(-n+18) #4번째 부터 19번째까지 .boards_cont ul li:nth-child(n+4):nth-child(-n+19) #2의 배수 .boards_cont ul..

2019.12.11 게시됨

반응형