퍼블리싱 팁 대방출

웹퍼블리셔 경력자가 정리한 실무에서 사용하는 코딩 메모장

 

• 폰트 x 라인하이트 구하기 : http://pxtoem.com/
• 어플에서 새창으로 열리는 이슈
  a href="javascript:void(0);" -> a onclick="return false;"
• 메일: <a href="mailto:test@www.co.kr">test@www.co.kr</a>
• 전화: <a href="tel:02-123-123">02-123-123</a> 
• 커서 방지: cursor: text;
• 다운로드: download="" 
• 얼럿창
  <a href="javascript:void(0);" onclick="alert('준비중입니다.')"></a>
• 스와이퍼 다음 슬라이드 노출
  loopAdditionalSlides : 1,
• 다중 탭 내에 스와이퍼 (참고: https://sir.kr/qa/364981)
  observer: true;
  observeParents: true;
• 스와이퍼 방향 반대로
  <div class="swiper-container" dir="rtl"> 
• 페이지 이동 소스
  <META http-equiv="Refresh" content="0;URL=/product/project.html?cate_no=120">
• 테이블 초기화
  table { width:100%; border-collapse: collapse; border-spacing: 0;}
• 스크롤 이동
  var offset = $("#div").offset();
  $('html, body').animate({scrollTop : offset.top}, 400);
  return false
• 로드되기 전에 / 후에
  $(document).ready(function(){
  $(window).on("load", function(){ 
• 유튜브 자동재생 (음소거만 가능)
  ?rel=0&amp;autoplay=1&amp;mute=1 
• input 가운데 맞추기, 브라우저 호환 
  input[type=text]{line-height:60px;}
  input::placeholder,
  input:-mos-input-placeholder,
  input::-webkit-input-placeholder,
  input:-ms-input-placeholder{opacity:1;color:#000;}
  input[type=text]::-ms-clear { display:none; } 
• 1줄 이상 말줄임표 ... 표시
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
• 2줄 이상 말줄임표 ... 표시
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;
• HTML 검사: https://validator.w3.org/nu/ 
• CSS 검사: http://www.css-validator.org/validator.html.ko#validate_by_uri+with_options 
• 특수문자 코드: https://entitycode.com/
• CSS 모양 참고
  http://css3generator.com/ 
  https://css-tricks.com/the-shapes-of-css/
  https://stackoverflow.com/questions/7433454/html-css-hexagon-with-image-inside 
• 폰트 설명
  https://www.font.co.kr/webfont/os_support.asp 
• 폰트 변환
  https://onlinefontconverter.com/ 
  https://www.fontconverter.org/
• 주소 줄이는 사이트: https://bitly.com/
• 스크롤 효과: https://michalsnik.github.io/aos/ 
• 퍼블리싱 스킬: http://heroyooi.ivyro.net/admin/jQuery/index.html
• 글자 타이핑 효과: https://gahyun-web-diary.tistory.com/2
• jQuery easing 효과: https://superkts.com/jquery/@easingEffects 
• 익스에서 background-image fixed 움직이는 문제
  https://stackoverflow.com/questions/27966735/why-does-a-fixed-background-image-move-when-scrolling-on-ie 
• 패럴랙스 참고 사이트
  https://speckyboy.com/css-javascript-parallax-scrolling/
• jQuery 플러그인 효과 
  https://m.blog.naver.com/PostView.nhn?blogId=pcwpower&logNo=220488446989&proxyReferer=https:%2F%2Fwww.google.com%2F