개요웹개발을 할때 svg 아이콘이 필요하면 유튜브에서 사용하는 svg 태그를 가져다 사용하고 있는데 유튜브에 존재하는 모든 svg를 미리 분류해두고 싶어 php를 사용해 유튜브 페이지의 전체 html에서 svg 태그만 추출하기 위해 php로 태그 추출기를 만들어보았다.코드(.*?)/is";preg_match_all($pattern, $html, $matches);// 결과 처리$output = implode("\n", $matches[0]);// 파일로 저장file_put_contents('output.html', $output);echo "태그 추출이 완료되었습니다.";사용 예시input.html 위 html을 php 파일과 같은 경로에 input.html로 저장하..

See the Pen Star Rating by 김채민 (@aleph-kim) on CodePen.

개요프로젝트를 진행하며 flickity 라이브러리를 사용하여 만든 노래 슬라이드를 코드펜에 정리해보았다.codepen See the Pen song card slide by 김채민 (@aleph-kim) on CodePen.

코드 See the Pen Untitled by 김채민 (@aleph-kim) on CodePen.출처https://cloud-library.tistory.com/entry/CSS%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EA%B0%84%EB%8B%A8%ED%95%9C-%ED%83%80%EC%9D%B4%ED%95%91-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98

개요임파님의 블로그를 보면 오늘의 명언이 나오는데 나도 이 기능을 적용시켜보고 싶어 찾아보니 마음에 드는 글이 없어 직접 만들어 포스팅을 하게 되었다.주의사항html, css, js에 대한 기초 지식이 없을 경우 진행이 어려울 수 있습니다.블로그 스킨에 따라 css가 깨질 수 있습니다.기능 적용 방법1. js 파일 업로드업로드 경로: 티스토리 블로그 관리 -> 스킨 편집 -> html 편집 -> 파일 업로드 -> 추가파일 내용/*** 랜덤 띵언을 제공하는 API URL* @constant {string}*/const DDING_API_URL = "https://korean-advice-open-api.vercel.app/api/advice";/*** API에서 랜덤 띵언을 가져와 HTML을 업데이트하는 ..

Unibeautify 확장자 설치 settings.json 파일 수정 파일 최하단에 아래 코드 추가 "files.associations": { "**/*.html": "html", "**/templates/**/*.html": "django-html", "**/templates/**/*": "django-txt", "**/requirements{/**,*}.{txt,in}": "pip-requirements" }, "emmet.includeLanguages": { "django-html": "html" }, "unibeautify.enabled": true, "[django-html]": { "editor.formatOnSave": true, // 파일 저장 시 auto formatting "editor..

코드 /** * 객체를 HTML 형식의 문자열로 출력하는 함수 * @param object $obj 출력할 오브젝트 객체 * @param int $depth 출력할 데이터 깊이 * @return string HTML 형식으로 출력된 문자열 */ function dumpObject($obj, $depth = 999) { Yii::import('system.utils.CVarDumper'); echo CVarDumper::dumpAsString($obj, $depth, true); exit; } 예시 // 출력할 객체 생성 $obj = array( 'test1' => 'test1', 'test2' => 'test2', 'test3..

코드 // js 로드 후 생성된 html이라 on 이벤트가 감지되지 않을 때 사용 $(document).on('click', '.태그', function () { console.log('click event'); });