퍼블리싱 (57) 썸네일형 리스트형 [CSS] 메인메뉴 이미지로 변경 & SNS 아이콘으로 메뉴를 만들거나 어떤 버튼을 텍스트 대신 이미지로 교체하려고 할때 쓸 수 있는 방법입니다. 일부 메뉴는 텍스트로 들어가고, 몇개의 메뉴(아래 이미지에 있는 sns 메뉴같은)만 이미지로 바꿀때 유용할 것 같다. 텍스트 이미지로 변경 (이미지버튼) 우선 태그를 이용해서 HTML를 만들어 준다. HTML 1 2 3 4 5 6 7 8 9 메뉴01 메뉴02 메뉴03 인스타그램 페이스북 cs CSS 먼저 메뉴를 가로로 일렬로 만들어준다. 1 2 .gnb01 li{float: left;list-style: none;margin: 0 5px} .clearfixed::after{display: block;content: "";clear: both;} cs "clearfixed"안에 내용은 메뉴가 모두 float되어 있기.. [제이쿼리]특정시간에만 버튼(이미지) 활성화 버튼을 특정 시간에만 활성화 시키고 싶을때 또는 특정 시간에만 어떤 이미지를 사용하고 싶을때 사용 할 수 있는 제이쿼리를 만들어 보려고 한다. 원하는 기간에만 특정 이미지로 교체( jquery) 예를 들어 이렇게 9시부터 6시까지만 왼쪽 버튼(이미지)을 활성화 시켜놓다가, 6시가 지나면 비활성 버튼으로 이미지를 교체할 수 있는 방법이다. HTML 1 2 3 4 5 Colored by Color Scripter cs 이미지를 넣은 DIV 블럭을 하나 만들어 준다. JQUERY 현재시간 구하기 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 var Now = new Date(); // 현재 날짜 및 시간 var nowMonth = Now.getMonth() +.. 카톡 오픈그래프 메타태그 및 이미지 사이즈 & 캐시삭제 01. 오픈그래프(OPEN GRAPH) 카카오톡, 페이스북 등의 여러 SNS에 웹사이트를 공유하면 미리보기로 간략한 웹사이트의 정보가 제공 됩니다. 이런 정보를 메타태그를 이용해 미리 설정해주면 원하는 미리보기를 전달할 수 있습니다. 이렇게 META 태그는 해더 안에 넣어주면 링크를 전송시 META안에 정보를 가지고 와서 보여주게 됩니다. 02. 오픈그래프 메타태그 03. 카카오톡 오픈그래프 이미지 사이즈 이미즈 사이즈를 다양한 사이즈를 실험해봤는데, 같은 사이즈, 같은 확장자를 해도 어떤 링크는 이미지가 짤리는 현상을 보였다. 카톡 가이드에 맞춰 만들었을때 오류가 적었다. 이미지 사이즈 800px * 800px 가이드 파일을 다운받으면 이미지 전체크기와 로고 위치와 크기가 설정되어 있어요! 04. 카카.. 동영상<video> 배경색이 브라우저마다 다를때 동영상을 업로드하고 여러 디바이스에서 테스트하는데, 아이폰에서는 잘나오는데 안드로이드 폰에서는 동영상 배경색이 흰색임에도 불구하고 회색으로 나오는 현상이 발생했다. 이렇게 전체 흰색으로 나와야하는데 마음대로 동영상 배경색이 회색으로 나온다 ㅜㅜ 나는 설정한 적도 없는데 그래서 검색해본 결과 > 이렇게 브라우저마다 다른 배경색으로 나오는 걸 볼 수 있다..( 이렇게 다를 수가..) 이런 결과가 나오는 건 브라우저가 동영상을 렌더링하는 방법과 색공간의 차이로 생기는거라고 한다. 결론부터 말하지면 수정이 되었고, 여러 코드들을 넣어보았고 어떤것 때문에 되었는지는 모르겠지만 해결되었다. 사용했던 코드들 01. 자바스크립트로 배경색 지정 02. css 필터로 contrast 올리기 ( 블랙 또는 흰색 배경일 때 .. 아이폰에서 비디오 전체화면으로 넘어가는 이슈 요새 사이트 메인페이지에 동영상으로 gif처럼 넣고 싶은데, pc버전에서는 문제 없이 나오는데 모바일에서 열어보니 몇가지 문제점이 있었다. 먼저 구동하고 싶었던 모습은 - 페이지 오픈시 자동재생 - gif처럼 플레이어 안보이게 재생 우선 아이폰에서는 자체 동영상 플레이어로 넘어가는 현상을 보였다. 그걸 방지할 수 있는 코드 인라인으로(플레이어로 이동 또는 전체화면 모드로 넘어가지 않고) 재생이 된다. video 태그 안에 'playinline' 넣어주면 끝( autoplay / loop / muted를 함께 써주면 자동재생되면서 전체화면으로 넘어가지 않음) -------------------------- 또는 동영상 재생이 문제가 있을 때 쓸 수 있는 방법 (동영상 대신 그때만 gif로 변경해주는 방법이.. 번역하기 옵션 없애는 방법 및 코드 번역하기 옵션 없애는 방법 01. 사이트입장 - 사이트에 메타태그 넣어주기 02. 사용자입장 - 크롬 옵션세팅변경 01. 사이트에 메타태그 넣어주기 메타태그를 사이트 에 넣어주면 끝 02. 크롬 옵션세팅변경 - 브라우저 오른쪽 상단 점버튼 클릭 > 설정 - 고급 > 언어 > 맞춤법 검사 사용 > 비활성화 티스토리/네이버 블로그 복사시 자동 출처 표기방법 가끔 온라인의 글을 참고하기 위해 복사하면 자동적으로 출처가 따라오는 사이트들이 있길래 내 블로그도 적용하면 좋겠다고 생각해서 방법을 찾아보고 공유해용! 01. 티스토리의 관리자 왼쪽메뉴의 플러그 클릭 02. '저작권자 표시' 플러그인 찾기 03. 클릭 후 적용하면 끝 그러면 자동적으로 글을 복사해서 붙여넣기하면 그 밑에 " 출처: https://ddorang-d.tistory.com/21 [또랑또랑] " 요렇게 출처정보가 자동으로 붙어집니당. 01. 블로그 관리 페이지의 왼쪽 메뉴에서 사생활보호 > 콘텐츠 공유설정 클릭 '자동 출처 사용 설정' 에서 사용으로 변경 확인 (요기서 마우스 오른쪽 버튼 금지 설정도 할 수 있었네용) 페이스북 로그인 #_=_ 제거하기 사이트에 페이스북 로그인을 붙였는데, 로그인을 한 이후에 url주소에 저 요성한 특수문자로 리다이렉션이 붙는다. 그래도 데이터만 잘나오면 괜찮다고 생각했는데, 불행이도 일부 콘텐츠가 안나오거나 이상하게 나오는 현상이 보인다. ㅜ 그래서 저 특수문자를 제거해보려한당 검색해보니 나만 발생하는 문제는 아니였던것 같고, 꽤 오래전부터 이런문제가 발생했던것 같은데, 페이스북에서 제공한 해결책으로 해결되지 않는것 같다. 그런데 그냥 심플하게 리다이렉션 된 주소를 다시 바뀌주기면 하면 다시 제대로 돌아온다. 1 2 if (window.location.hash && window.location.hash == '#_=_') { window.location.hash = ''; } 요렇게 넣어주면 끝! 저는 됐는데 안됐다면.. 이전 1 2 3 4 5 6 7 8 다음
