개발자의 끄적끄적

[html/css] css text-overflow example / css 말줄임표 표시 방법 html 에서 글자수가 길어서 뒤에 말줄임표를 붙여야 하는경우 아래 나와있는 css 속성을 추가하시면 말줄임표 추가가 가능합니다! text-overflow: ellipsis; 참고들 하세요!

[html/css] css prevent mouse event example / css 마우스 이벤트 방지 설정하는 방법 html 에서 특정 태그에 마우스 이벤트가 동작하지 않도록 설정을 해야 하는 경우가 있습니다. 강제로 동작을 방지하는 경우일 텐데요. 그럴때는 아래 css 속성을 해당 태그에 추가하시면 됩니다. style='pointer-events: none' 환경에 따라 100프로 동작하지 않는 경우도 있다고 하니 참고들 하세요!

[html/css] css hide scroll bar example / css 스크롤바 숨기는 방법 특정영역에서 상하 스크롤은 동작하지만, 스크롤바는 숨기고 싶은 경우가 있습니다. 그럴때는 아래와 같이 하시면 됩니다. 예를들어 scroll_div 라는 아이디를 가지는 div 가 있다고 가정하고, 테스트 영역입니다. 위 div 영역의 스크롤바를 숨기고 싶으면 아래와 같이 css 를 추가하시면 됩니다. #scroll_div { -ms-overflow-style: none; /* Explorer */ scrollbar-width: none; /* Firefox */ } #scroll_div::-webkit-scrollbar { display: none; /* Chrome */ } 위 내용대로 css 를 추가..

[html/css] html 테이블 텍스트/버튼 동시사용시 깨짐 해결 방법 html 에서 테이블을 이용하여 데이터를 표기하다 보면 텍스트와 버튼을 혼용하는 경우가 있습니다. 버튼때문에 텍스트의 위치가 td 안의 영역중 최상단에 붙어서 깨져보이게 되는데요. 그럴때는 아래 속성을 이용하시면 됩니다! display: flex; justify-content: space-between; align-items: center 예를 들어 아래와 같이 텍스트와 버튼이 같이 사용된 td 가 있다고 가정하고, qwdqwdqwdqwdqwd wdqdqwd 이걸 높낮이 중앙 정렬을 하고 싶으면 아래와 같이 처음에 언급된 속성을 가지고 있는 div 를 하나 만들어서 묶어 주면 됩니다! qwdqwdqwdqwdqwd wdqdqwd

[html] MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled 에러 해결방법 페이지에 css 와 js 등 리소스를 로드해서 사용하려고 하다보면 아래와 같은 오류가 발생하는 경우가 있습니다. MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled 위와 같은 오류의 원인은 2가지입니다. 1. 해당위치에 파일을 찾지 못한다. 2. 로드된 파일의 타입이 정의되어 있지 않다. 1번의 경우는 말그대로 경로가 잘못되었거나, 파일이 없는 경우입니다. 2번의 경우는 이..

[html/css] css animation library / css 애니메이션 라이브러리 wickedCSS css 를 이용하여 홈페이지를 작업하다 보면 애니메이션이 요구 되는 경우가 상당히 많습니다! 직접 구현하고 소스를 참고할 수도 있지만, 라이브러리를 사용하는것도 많은 도움이 될 수도 있습니다. WickedCss 라는 애니메이션 라이브러리를 찾아서 공유해보려고 합니다! 사이트 들어가면 데모도 확인할 수 있으니 들어가보시고 참고하세요! wickedCss library site : http://kristofferandreasen.github.io/wickedCSS/ Wicked CSS3 Animations kristofferandreasen.github.io

[html/css] css 프레임워크 사이트 모음 [링크] css 를 사용하다보면 반응형 작업을 할때 프레임웍을 잘 사용하는것도 도움이 많이 됩니다. 그중에서 여러가지 프레임웍에 대한 간략한 소개와 프레임워크명 / 링크 등이 잘정리되어있는 사이트가 있어서 공유하려고 합니다! 아래 링크 들어가셔서 확인해보시고 많은 도움 되셨으면 좋겠네요! 참고들 하세요! css 프레임워크 모음 사이트 : https://funyphp.com/archive/html/49?page=3 즐거운 코딩 생활 java, php, javascript, jquery, ajax, html, css, frontend, 그누보드, 스킨, 플러그인, 팁 funyphp.com

[html/css] html video tag no download example / html 비디오 태그 다운로드 방지 설정 방법 html 에서 video 태그를 이용하여 영상을 표시하다보면 컨트롤바를 이용합니다. 그 컨트롤바의 내용중 다운로드버튼을 숨기고 싶은경우에는 아래나와있는 옵션을 추가하시면 됩니다. controlsList="nodownload" 옵션이 추가된 video 태그는 아래와 같습니다! 참고들 하세요!