728x90 300x250 SMALL Front-end319 css 도넛 모양 bullet 만들기 html 도넛모양 bullet css h3 { padding-left: 18px; font-weight: 600; position: relative; } h3::before { content: ""; display: inline-block; vertical-align: middle; width: 4px; height: 4px; border: 2px solid #435df6; position: absolute; left: 0; top: 6px; border-radius: 100%; margin-left: 4px; } 결과 css로 만드는 도넛 모양 불릿은 boder-radius를 이용해서 원을 만들고 border 값을 두껍게 주면 간단하게 만들 수 있습니다. 2021. 11. 4. css flex 코딩 align-content align-content flex-wrap:wrap:을 설정해서 여러 줄이 되었을 때 수직 방향을 정렬하는 속성입니다. stretch .container { display: flex; flex-wrap: wrap; align-content: stretch; height: 100vh; background: gainsboro; } flex-start .container { display: flex; flex-wrap: wrap; align-content: flex-start; height: 100vh; background: gainsboro; } flex-end .container { display: flex; flex-wrap: wrap; align-content: flex-end; height: 100v.. 2021. 11. 3. css flex코딩 align-items align-items 는 세로로 정렬하는 속성입니다. stretch(default값) .container{ display:flex; align-items: stretch; height:100vh; background: gainsboro; } end .container { display: flex; align-items: end; height: 100vh; } start .container { display: flex; align-items: start; height: 100vh; background: gainsboro; } center .container { display: flex; align-items: center; height: 100vh; background: gainsboro; } baseli.. 2021. 11. 2. flex 코딩 정렬 flex-direction, justify-content, flex-wrap 기본html 1번째 item Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, dicta similique? Corrupti placeat culpa, modi assumenda itaque, voluptate sequi, vero rerum dicta alias voluptates vitae quod veniam obcaecati facere. Earum. 2번째 item vero rerum dicta alias voluptates vitae quod veniam obcaecati facere. Earum. 3번째 item Harum, dicta similique? Corrupti placeat culpa, modi assumenda it.. 2021. 11. 1. 이전 1 ··· 54 55 56 57 58 59 60 ··· 80 다음 728x90 반응형 LIST