728x90 300x250 SMALL Front-end319 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. Sass variable(Scss 변수) Sass에서 변수를 사용하기 위해서는 $로 시작해야 하며 변수 값으로 올 수 있는 것은 문자, 숫자(px, em포함), 컬러(#1c6eff)가 있다. 1. SCSS 변수 사용예시 SCSS $font-stack: Helvetica, sans-serif; /* font-stack 변수선언 */ $primary-color: #333; /* primary-color 변수선언 */ body { font: 100% $font-stack; color: $primary-color; } CSS body { font: 100% Helvetica, sans-serif; color: #333; } 위와 같이 sass 변수를 사용하면 일괄적으로 관리하고 변경 가능하기 때문에 색상이 수정 되더라도 변수값만 수정 하면 되고 같은 .. 2021. 12. 27. Chain Reaction 연계반응 부모 엘리먼트에 마우스를 hover 했을때 자식인 버튼이 변경되는 코드 See the Pen Chain Reaction by kim oya (@ttuttu) on CodePen. 2021. 12. 25. 가상 클래스 순서 링크 관련의 네 가지 클래스를 한꺼번에 정의할 경우 :link부터 정의해서 :visited, :hover, :active 순서대로 정의한다. 이 순서가 바뀌면 제대로 적용되지 않는다. 2021. 12. 24. 이전 1 ··· 43 44 45 46 47 48 49 ··· 80 다음 728x90 반응형 LIST