본문 바로가기

CSS🔧/css 아이콘5

html/css <i>태그로 아이콘 포인트주기 태그를 선호 하는 이유 ? span보다 가독성 우수 짧은 단어 추후 수정시 태그만 선택 변환가능 아래 문의 작성하기 폼에서 중요한 텍스트에 아이콘포인트를 줘보자! 1. html 에 태그 코드작성 필수입력사항 p태그로 글자를 넣은후 앞과 뒤 위치를 고려해 태그 삽입 2. 개별 css시트 작성 저 별 포인트는 홈페이지 전체에 적용되는 공통클래스가 아닌, 문의하기 페이지에서만 쓰이므로 공통 common 클래스가 아닌 layout css 에 작성해준다. .inquiry_page .inquiry_area .ess { color: #999999; text-align: right; } .inquiry_page .inquiry_area .star { display: inline-block; width: 7px; hei.. 2022. 10. 10.

html 파비콘 브라우저 탭 아이콘 적용 (Favicon) 홈페이지 상단url의 파비콘 아이콘 적용 1. 이미지 변경 png 이미지를 ico 이미지로 128px 128px 크기 변경하여 다운 이미지 변환시 크기가 줄어들수 있음 주의 2. 링크주소 변경 이미지 변환후 이름 변경한 경로 지정 3. 적용확인 구글검색 png to ico 사이트 이용 https://www.freeconvert.com/png-to-ico 2022. 10. 6.

css XEIcon 추가 css에 xeicon 넣어주기 1. xeicon의 get started 에서 링크 겟겟 html head에 폰트아래 코드 붙여넣기 주의 http://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css XEICON 링크 앞에 http: 넣기 2. 아이콘찾기 3. i 태그에 아이콘 이름 html clss 로 지정 html 적용 상기 요금은 부가세가 포함되어 있는 가격입니다. css 적용 .fee_area .fee_wrap .warning i { margin-right: 5px; font-size: 18px; } 4.vertical-align 적용 inline 요소라 간격이 벌어지므로 vertical-align: -3px; 하단링크참조 http://xpressengine.g.. 2022. 10. 5.

css 배경아이콘 sprite 이미지로 적용하기 네비게이션 가변 컨텐츠에 들어갈 아이콘이미지를 배경으로 넣어주자! 빨간 박스 부분에 공통클래스로 삽입 1. sprite 이미지 준비 2. 삽입될 자리에 background로 이미지 지정 .board_pagination_wrap .btn_paging:before{ content: ''; width: 14px; height: 14px; border: 1px solid red; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background: url(../images/sprite_pc.png) no-repeat; } 공통클래스로 준비된 자리 (빨간박스) 에 마지막으로 background: url 로 이미지 경로를 지정해준다.. 2022. 10. 5.

xe 아이콘 적용하기 http://xpressengine.github.io/XEIcon/started.html XEIcon, 문자를 그리다 XEICon은 웹사이트 제작에 최적화된 벡터 그래픽 아이콘 툴킷입니다. 여러분의 아름답고 직관적인 웹페이지 제작을 돕습니다. xpressengine.github.io html 코드복사 http:// 붙여주기 태그 복사 적용 i 태그로 사용 2022. 9. 5.

이전 1 다음

티스토리툴바