본문 바로가기

css trick & base7

라운드 마스킹 border-radius 위아래형 이미지 아닌 css로만 왼쪽은 위 라운드 / 오른쪽은 아래 라운드로 있을때 어떻게 해야할까?이미지로 깔려면 100%?? 로해야하는데저 이미지가 계속 바뀌는 이미지라서 저렇게 통째로 자르면 안된다===>왼쪽은 그냥 일반적으로 보더레디어우스 사용해서 깔고  오른쪽은 저런모양으로 오른쪽에 깔면된다!! 신기방기 See the Pen round masking only css by uni (@agosto) on CodePen. 2024. 6. 13.
flex gap을 써서 간격 조절하는법 1. flex써서 %로 간격을 맞출경우 부모에게 gap을 줄 경우2. width: calc(33.333% - 13.4px);20px(gap) * 2(3개일때 2군데 여백) / 3열  => 40/3=13.333 (올림 해준다)     See the Pen flex gap % by uni (@agosto) on CodePen. 2024. 6. 7.
grid masonry 일정하지 않은 비율을 가져올떄 사용 *부모 grid-template-columns: repeat(3, 1fr); /* 3칸 */ grid-template-rows: repeat(4, 1fr); /* 4줄 */ *자식grid-column: span 3; /* 3칸을 차지하겠다 */grid-row: span 2; /* 2줄을 차지하겠다 */   See the Pen CSS Grid by uni (@agosto) on CodePen. 2024. 5. 27.
css로 마스크 입히는법 (들어가는 이미지 크기가 일정하지 않은 비율일때) 1. 이미지를 백그라운드로 넣었을때 => 이미지 크기 꽉차게 2. 이미지 태그로 넣었을때 => 이미지가 마스크 이미지에 맞게 찌그러진다  https://codepen.io/SitePoint/pen/YqByJGSee the Pen mask by uni (@agosto) on CodePen. 2024. 5. 16.
flex 말줄임 width값 못잡을때? / flex gap 자식들 간격 어떻게? 1. flex-shrink, flex-grow의 쓰임새?난 쪼그라 들지 않겠다!!! => flex-shrink: 0;여백이 남으면 그 남은 여백을 가지겠다 => flex-grow: 1;아이콘같은 거는 위드값이 줄어도 크기가 안쪼그라 들어야해서 flex-shrink를 써야하고위드값이 100%에서 자식들이 25%가 3개가 있을때 오른쪽에 나머지 여백이 남는다 그러면 그 여백을 자식들이 가질려면 flex-grow: 1; 을 써주면된다  2. 말줄임표 줄때 위드값이 벗어나면?말줄임을 주는 놈에게 => width:100%; min-width:0;말줄임을 주는 부모에게 => width: 100%; (위드값이 있어야함!!)말줄임을 주는 부모의 부모에게 => width: 100% (위드값이 있어야함!!)부모가 인라인으.. 2024. 5. 11.
인풋 체크박스, 라디오 공통 만들기, 주민등록번호 앞자리 1. 라벨안에 인풋을 넣으면?인풋, 라벨 아이디를 안맞쳐도 된다!!!https://www.w3schools.com/howto/howto_css_custom_checkbox.asp How To Create a Custom Checkbox and Radio ButtonsW3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.www.w3schools.com 2. 체크박스하나있는데 라벨에 들어가는 내용이 많다? 스크립트.. 2024. 5. 11.

티스토리툴바