코딩/HTML & CSS 검색 결과

해당 글 8건

css만으로 SVG 이미지 애니메이션 효과 적용하기

SVG 코드 확보 이미지를 SVG 확장자로 저장하고 브라우저나 editor로 열어보면 아래와 같은 코드가 확인 되는데, html 페이지에 붙여넣으면 이미지가 그대로 표시된다. 태그는 그래픽 툴에서의 레이어 개념이므로 필요에 따라 삭제해도 무관 여기서는 태그 하나 당 애니메이션을 지정할 수 있으므로 id 또는 class 등 지시자를 지정 포토샵에서 저장한 SVG 파일 내 각각의 레이어가 , , 태그일 수 있다 css 애니메이션 설정 .logo_svg { -webkit-animation: kaboom 2s ease alternate; animation: kaboom 2s ease alternate; } .logo_svg:nth-child(2) { -webkit-animation-delay: 0.1s; ani..
코딩/HTML & CSS 2022. 7. 1. 15:25

글자수 길이 제한

게시판 글들을 리스팅할 때 제목은 길이에 맞게 절삭하고, 뒷부분에 '...' 을 붙이는 것이 일반적이다.PHP 등 개발 코드에서 자르는 경우 데이터 타입(한글/영문/숫자)을 신경 써서 처리하다 보면 제목의 길이가 일정하지 못하고 결과적으로 예쁘게 표시하기 힘들다. .main_box .main_notice li span.text { display:inline-block; width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .main_box .main_notice li span.date { float:right; color:#b3b3b3; font-size:11px; *margin-top:-20px} 상황에 따라 displa..
코딩/HTML & CSS 2016. 8. 22. 17:05

HTML 인코딩 표(HTML Entity) - ＆lt,＆gt, ＆nbsp,＆amp 등

엔터티 (Entity)**엔터티(Entity)**는 앰퍼샌드(&)로 시작하고 세미콜론(;)으로 끝나는 텍스트 조각('문자열')입니다. 엔터티는 예약된 문자(HTML 코드로 해석됨)와 보이지 않는 문자(예, 줄바꿈 없는 공백)를 표시하는 데 자주 사용됩니다. 표준 키보드로 입력하기 어려운 다른 문자 대신 사용할 수도 있습니다. javascript에서 처리DB에 & 기호가 인코딩된 형태로 저장되어 있다고 가정하면, javascript에서 아래와 같이 처리할 수 있습니다다.let str = 'A&B';console.log( decodeURI(str) ); // A&B - 디코딩console.log( str.replace(/&/g, '&') ); // A&B - & 기호만 처리 예약된 HTML 특..
코딩/HTML & CSS 2015. 5. 18. 13:39