220616 - css (box-sizing, float, column, transition, transform, animation)
box-sizing : 박스 너비 기준 content-box : (기본값) 크기 변경, 기존 width/height + 외부에 padding, border, margin 더함 border-box : 처음 설정된 크기 유지, padding 등은 테두리 안쪽으로 추가됨 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 박스 너비 기준 정하기 .box{ width: 300px; height: 150px; margin: 10px; padding: 30px; } .box1{ box-sizing: content-box; border: 2px solid rgb(255, 180, 180); background-co..
220615 - css - 그라데이션, 레이아웃, 테두리
그라데이션 radial-gradient : 원형 그라데이션 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 그라데이션 #box{ height: 300px; /*width: 기본값(화면 전체)*/ background: rgb(255, 150, 150) ; /*그라데이션 지원 X 국가에서는 단일색 배경*/ /* background: -webkit-linear-gradient(45deg, rgb(255, 150, 150), #fff); background: -moz-linear-gradient(45deg, rgb(255, 150, 150), #fff); background: -o-linear-gradient(45deg, rg..
