728x90 300x250 SMALL Front-end/CSS65 css 삼각형 그리기 삼각형을 그릴때는 border와 border 사이의 경계선으로 만들 수 있습니다. border가 다른 방향의 border를 만났을때 끝 부분을 확대해서 보면 삼각형 모양으로 끝납니다. 이렇게 삼각형 모양이 나옵니다. 그래서 삼각형 모양을 표시할 부분만 놔두고 나머지는 투명처리를 해서 만들 수 있습니다. html Triangle css .link .btn { position: relative; display: block; padding: 0 3rem 0 0; color: #5C5C5C; font-size: 14px; width:30px; } .link .btn:after { content: ''; position: absolute; right:0; top: 50%; display: block; transf.. 2022. 1. 13. css Counter 사용방법 counter 함수를 사용하기 위해서는 먼저 counter-reset 속성을 사용해서 초기화 해야 한다. (초깃값 0) body{ counter-reset: my-counter; /* counter 이름 'my-counter'으로 지정 초깃값 : 0 */ } counter() 함수는 'counter(name)'와 'counter(name, style)' 이렇게 두 가지 형태로 사용할 수 있다, 기본값은 (십진수 decimal) html counter 예제 counter 예제 counter 예제 counter 예제 counter 예제 css ol > li::before { counter-increment: my-counter; /* my-counter 값을 1씩 증가 */ content: counter(m.. 2022. 1. 12. css order 속성 css의 order 속성은 flex나 grid 속성에서 엘리먼트의 배치 순서를 지정하는 속성입니다. 사용법은 z-index를 생각하면 이해하기 쉽습니다. 기본값은 order:0 이고 음수 양수를 지원하고 오름차순 정렬됩니다. 만약 order 갑이 같으면 순서대로 표시됩니다. html order0 order1 order2 order3 order test css .wrap {display:flex; list-style:none;flex-direction: column;} .wrap li:nth-child(1){ order:0;} .wrap li:nth-child(2){ order:1;} .wrap li:nth-child(3){ order:2;} .wrap li:nth-child(4){ order:3;} or.. 2021. 12. 30. Chain Reaction 연계반응 부모 엘리먼트에 마우스를 hover 했을때 자식인 버튼이 변경되는 코드 See the Pen Chain Reaction by kim oya (@ttuttu) on CodePen. 2021. 12. 25. 이전 1 ··· 4 5 6 7 8 9 10 ··· 17 다음 728x90 반응형 LIST
