IT/CSS8 CSS 체크박스, 라디오 커스텀 스타일 실무에서 자주 사용하는 체크박스, 라디오 커스텀 스타일입니다. See the Pen 체크박스, 라디오 버튼 커스텀 디자인 by wisesilver (@wisesilver) on CodePen. 2020. 7. 7. CSS flex, grid 속성 쉽게 이해하기 flex, grid 속성에 대해 작성된 글입니다. flex 본문 바로가기 grid 본문 바로가기 CSS flex 1. 기본 구성 플렉스 박스(flex box)는 플렉스 컨테이너(flex container)와 플렉스 요소(flex item)로 구성됩니다. 플렉스 요소에 width, height 속성을 추가합니다. Colored by Color Scripter cs /* CSS */ .item { width: 100px; height: 100px; } cs 2. flexbox flex는 단일 레이아웃 방향이므로 flex 항목은 행 또는 열로 정렬됩니다. 기본값은 rows입니다. 컨테이너 요소에 display: flex 속성을 추가합니다. display 1. flex : block 특성의 컨테이너를 정의합니다.. 2020. 7. 3. 잘 모를 수 있는 CSS 속성 place-Items: center, diplay: grid 조합 두 개 속성을 조합하면 요소를 가로 및 세로로 가운데에 맞출 수 있습니다. CSS is awesome Yes, this is a hero section made for fun. See more Colored by Color Scripter cs /* CSS */ .hero { display: grid; place-items: center; } cs margin: auto, display: flex 조합 이 방법도 마찬가지로 가로 및 세로 가운데에 맞출 수 있습니다. cs /* CSS */ .parent { width: 300px; height: 200px; background: #ccc; display: flex; } .child { wi.. 2020. 7. 3. CSS 한줄, 여러줄 말줄임 표시하기 실무에서 자주 사용하는 CSS 말줄임(...) 표시하는 방법에 대해 알아봅시다. 한 줄 .text { text-overflow: ellipsis; white-space:nowrap; overflow:hidden; } cs 여러 줄 예를 들어 3줄 이상 말줄임 처리를 하고 싶다면 3줄에 해당하는 높이를 height 값으로 넣고, -webkit-line-clamp에 라인 수를 넣으면 됩니다. 참고로 IE에서는 말줄임(...) 표시는 안되고, 설정한 라인 수 이상일 경우 숨김 처리됩니다. .box { display: -webkit-box; height: 60px; word-wrap: break-word; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-o.. 2020. 6. 28. 이전 1 2 다음
