HTML, CSS5 [CSS, HTML] 별점 모양 css와 HTML 코드만 사용해 별점 표시 모양을 만들기 점수를 %로 입력하면 너비로 환산해서 표기 HTML 아래 width 부분에 별점을 줄 점수 비율을 입력해주면 된다 CSS .stararea { width: 100px; height: 20px; margin: 0 auto 10px; position: relative; } .stararea span { width: 20%; background-color: #f8a504; height: 20px; display: block; position: relative; z-index: 1; } .stararea::after { width: 100px; height: 20px; background: url(/src/lib/img/star_bar.svg) no-re.. 2023. 1. 9. 텍스트에 그라데이션 넣기 텍스트에 그라데이션을 넣는 CSS를 작성해보겠습니다 완성하면 아래의 텍스트처럼 표시됩니다 HTML 삽입 미리보기할 수 없는 소스 이렇게요! 3번 라인에서 그라데이션 컬러를 지정해줍니다. to bottom 대신 to right, to right bottm, to left top 등으로 방향을 정해줄 수 있습니다. 4번 라인에서는 폰트의 색을 transparent로 지정해 투명하게 표시되도록 합니다. 5번 라인에서는 배경색을 표시할 구역을 text로 지정했습니다. 2022. 6. 13. 팝업 모달 만들기 완성하면 아래 모양처럼 보이는 팝업 창입니다 각 위치별 클래스 이름은 사진과 같습니다 ===================================== //슬픈 이모티콘 : fontawesome의 라이브러리 활용 지원되는 파일 형식이 아닙니다 bmp, dng, jpeg, jpg, mpo, png, tif, tiff, webp 파일만 가능합니다 완성! 2022. 6. 13. 티스토리 기본 HTML 본문 바로가기 메뉴 Pinterest Facebook Twitter Instagram POWERED BY TISTORY 검색 더보기 Pinterest Facebook Twitter Instagram 수정 삭제 () 2022. 6. 8. 사용 그림 2022. 3. 1. 이전 1 다음 728x90
