hi098123 Tistory Tip
썸네일 이미지

developer.mozilla.org 이용하기

Mozila Mozilla Foundation은 파이어폭스 브라우저를 제작한 비영리 재단입니다. MDN Mozilla는 특히 MDN이라는 엄청난 웹 문서 사이트를 운영하고 있습니다. Mozilla Developer Network의 약자로 Mozilla가 운영하는 개발 네트워크 라는 뜻이며 대부분의 프론트엔드(HTML, CSS, JS) 자료가 매우 잘 설명되어있습니다. 설명의 깊이가 깊어 초보일때 보는것과 잘 알고 보는 것과 같은 문서를 읽어도 얻는게 다를만큼 좋은 문서가 매우 많습니다. 초보자도 쉽게 기능을 사용할 수 있으며, 고수라면 성능 차이와 실행과정등도 이해할 수 있게 소개되어 있습니다. 마지막에 지원 브라우저 또한 표시됩니다. 한번도 못 들어 봤을 법한 신규 JS API(예: 브라우저에서 컴퓨터..
썸네일 이미지

caniuse.com 이용하기

caniuse 이름만 보면 알수있듯 "내가 사용할 수 있나?"를 알아보는 사이트입니다. 원하는 검색어를 입력 하면 프론트(HTML, CSS, JS)의 브라우저 지원을 알아볼 수 있습니다. 예시 검색어인 rgba로 CSS style인 rgba는 IE9 이상에서만 지원한다는 점을 알 수 있습니다. 브라우저 지원을 고려할 때 확인해보면 좋습니다. https://caniuse.com/#search=rgba Can I use... Support tables for HTML5, CSS3, etc About "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile..

CSS 색상 변경하기

CSS에서 색상은 color로 설정한다. 색상을 나타내는 방법은 크게 3가지가 있다. HEX color rgb rgba 투명도를 나타내는 Alpha값은 IE9 이상부터 지원합니다. 지원 브라우저 확인 방법 코드 예시 CSS에서 설정 html{color:#333}/*검은계열색*/ html의 글자 색상을 선택 만약 옵션이 겹친다면, CSS의 우선순위에 따라 옵션이 설정된다. html내에서 설정 aaa 123 p태그 글자 색상을 하늘색 계열로 설정한다. 배경색을 수정하고 싶다면 background-color에 값을 변경해주면 된다. Alpha 값 안내 HEX에서 #1234 4번이 Alpha값이다. 이렇게 설정시 #11223344 와 동일한 값을 가진다. #12345678 78이 Alpha값이다. Alpha값이..
썸네일 이미지

티스토리 댓글에 링크달기

이전에 작성한 글이 있어서 링크를 겁니다. hi098123.tistory.com/215 티스토리) 댓글에 링크 달기 댓글에 링크를 달 수 없을까? 아래와 같이 간단한 소스로 만들수있다. newTab (새탭으로 열기 true,false) comm 값 (CSS selector와 같은 방식으로) whitelist 값 (자바스크립트 배열 [] 로) 변형해줘야됩니다. 3 hi098123.tistory.com 페이지 하단에 아래의 script를 넣으면 댓글에 링크가 걸립니다. 아래의 whitelist설정에 따라 자신의 블로그 링크만 링크가 걸립니다. (function() { var newTab=true; // 새 탭으로열기 true, false var comm=document.querySelectorAll(".co..
썸네일 이미지

크롬 input 테두리 제거하기

input태그인 검색기능에서 활성화시 테두리가 뜬다. 모든 테두리 제거방법 이렇게 크롬에서 테두리가 뜨는데 간단하게 CSS설정만으로 테두리를 제거해줄 수 있다. *,*:focus,*:hover{outline:none;} 이렇게 outline값을 none로 설정하게되면 테두리가 제거된다. 왜 이렇게 테두리가 뜨나요? 크롬이 80버전에 들어가면서 outline이 설정되는것이 크롬브라우저의 기본 style(css)로 설정되어있습니다. 따라서 최신 크롬 버전을 사용하시는 경우 버튼(button), 입력(input) 태그 등에서 활성화시 테두리가 표시됩니다. 위 사진은 티스토리 설정에서 해당 코드를 입력한 모습 설정후 활성화가 되었음에도 테두리는 표시되지 않습니다.
썸네일 이미지

검색, 댓글에 문구 입력해두기 - placeholder

검색과 댓글에 글을 미리 입력하려면 방법이 있습니다. HTML의 placeholder를 이용하는 방법인데요 placeholder="입력해둘 문장" input태그나 textarea태그에 이렇게 입력하시면 됩니다. 아래는 검색창에 궁금한게 있나요? 라고 표시됩니다. input 태그는 한줄 작성용도이고 textarea는 여러줄 작성이 가능한데 textarea에서 띄어쓰기를 하려면 으로 한줄을 띄우실 수 있습니다.

Material Design 스킨

Material Design은 최신 UI 디자인 스타일로 모바일에서 최적화된 디자인입니다. 코드 최적화등 많은 장점이 있습니다. 당연히 SEO와 애드센스등 최적화가 되어있습니다. 아래의 소개페이지에서 자세한 설명과 함께 여러 기능을 사용하는 방법, 주의사항 등을 안내합니다. 스킨 소개 페이지 스킨 소개 확인하기 특징/장점 특징/장점 확인하기 구입하기 구입하러 가기 문의사항이 있으시면 아래에 댓글로 남겨주세요

다음 검색 플러그인 제거하기

위 사진과 같이 드래그시 일반적으로는 다음검색이 뜹니다. 플러그인 -> 드래그 검색 -> 해제하면 완료 이제는 드래그 해도 다음검색이 뜨지 않습니다. 티스토리 블로그에서 드래그 했을때 다음 검색이 뜨는게 기본값이지만 저는 불편하고 지저분해 보여서 항상 제거하는 플러그인입니다.