- 사진 아이콘 사용하기 

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
    integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  

 

- HTML 요소 

  <!--  바운스할 요소 -->
<div class="bounce">
    <i class="fa fa-camera-retro fa-lg"></i>
  </div>

 

- CSS 요소

div {
      margin-top: 100px;
      margin-left: 100px;
    }
    
    /* 0.5 초씩 바운스 효과 */
    .bounce { 
      position: relative;
      /* 파폭 */
      -moz-animation: bounce 0.5s infinite linear;
      /* 크롬 */
      -webkit-animation: bounce 0.5s infinite linear;
      -o-animation: bounce 0.5s infinite linear;
      animation: bounce 0.5s infinite linear;
    }

    /* 
      바운스의 높이 
      0% 일 때, 0px 
      50%일 때, -5px 
      70%일 때, -50px
      100%일 때, 0px 
      */
    @-webkit-keyframes bounce {
      0% {
        top: 0;
      }

      50% {
        top: -5px;
      }

      70% {
        top: -50px;
      }

      100% {
        top: 0;
      }
    }

    @-moz-keyframes bounce {
      0% {
        top: 0;
      }

      50% {
        top: -5px;
      }

      70% {
        top: -50px;
      }

      100% {
        top: 0;
      }
    }

    @-o-keyframes bounce {
      0% {
        top: 0;
      }

      50% {
        top: -5px;
      }

      70% {
        top: -50px;
      }

      100% {
        top: 0;
      }
    }

    @-ms-keyframes bounce {
      0% {
        top: 0;
      }

      50% {
        top: -5px;
      }

      70% {
        top: -50px;
      }

      100% {
        top: 0;
      }
    }

    @keyframes bounce {
      0% {
        top: 0;
      }

      50% {
        top: -5px;
      }

      70% {
        top: -50px;
      }

      100% {
        top: 0;
      }
    }

 

- 결과화면

 

See the Pen bounce by Nami (@NamuNami) on CodePen.

블로그 이미지

미나미나미

댓글을 달아 주세요


See the Pen FullScreen YouTube Video Background In Pure CSS by Nami (@NamuNami) on CodePen.




크롬 자동재생 방어,막기 없애버리기 ( + 보너스 유튜브(youtube) api  사용기)




위에 영상이 제대로 자동재생이 되지 않는다면. 크롬에서 자동 재생을 막아놓은 상황입니다.


크롬(chrome) 66이상 버전에서는 자동 재생의 관한 부분을 모두 막아 버리게 됩니다.


자동재생이 가능한 경우는 사용자가 해당 사이트를 5회 이상, 방문 중 70% 이상의 확률로 중요한 동영상을 재생한적이 있어여 합니다.


50% 미만으로 떨어지면, 자동재생 또한 비활성이 됩니다.


이렇게 되면, 자동재생이 되지 않는다네요!


그래서 전, 가끔 필요해서 이 기능을 풀어버리겠습니다.


아이유!!!!!!!!티져!!!!!!!!!!!!



chrome://flags/#autoplay-policy으로 이동합니다.


빨간 네모색 테두리 안에서 정책으로 바꿔주시고 

자동으로 크롬창이 다시 생성되면서

자동재생이 실행이 될겁니다.











도움이 되셨다면, 구독과 좋아요.... 아니아니 ...

공감 버튼 꾸욱 눌러주세요 ~~




블로그 이미지

미나미나미

댓글을 달아 주세요

@media query(미디어 쿼리)와 screen(화면) 크기


우리는 인터넷을 하나의 화면에서만 사용하지 않는다. 여러 화면에서 정보를 예를 들어 아래의 세 가지의 화면을 보자. 화면의 크기에 따라 네모 안에 있는 부분의 변화가 있다. 아마 티스토리를 반응형을 사용하시는 분들이라면 이 기능이 비슷하게 가지고 계실 것입니다.


1. 일반적 모니터 화면


2. (예를 들어) 태블릿 화면


2. 모바일 화면

 



뭐... 여기서 더 들어가볼까요?


우리가 잘 알고 있는 다음과 네이버는 각각 모바일용(m.daum.net, m.naver.com)과 일반(naver.com ,daum.net)이 각각 URL을 통해서 redirect를 통해 유지하고 있지만, 비용과 모바일용을 재구축한다는 점에서 시간이 들어간다는 점을 해결하기 위해서 스크린의 크기에 따른 대응을 통한 반응형을 구축한다는 점의 경제적인 면에서 대단히 효율적이다. 

그래서 화면의 크기에 따른 기초적인 것을 설명하고자 합니다.

(설명글 쓰끼 너무 힘들어요…. 내용은 많이 빈약한 거 많이 알아요…. ㅠㅠ)


그리고 들어가기전에  IE8(익스플로어 8 이하 부터는 @media query 적용되지 않습니다.


IE8 이하에서는 추가적으로 script를 추가하여서 어느 정도 @media 쿼리를 사용할 수 있습니다.


1. https://code.google.com/archive/p/css3-mediaqueries-js/ 를 통해서 css3-mediaqueries.js 직접 추가


2. src를 통한 연결을 css3-mediaqueries.js과 연결


이렇게 추가하시면 IE6, IE5에서 어느 정도 작동한다고 하네요.


아래에 소스코드를 통해서 가로의 화면 크기 변화에 따른 배경화면을 봐꿔 보겠습니다.

(그리고, 전체 소스 코드에서 body 부분 주석을 해제 후 사용해주세요.)


그리고, JS 파일은 화면의 크기를 알아낼 수 있는 코드입니다.


See the Pen @media - onresize by Nami (@NamuNami) on CodePen.





블로그 이미지

미나미나미

댓글을 달아 주세요

[css] font-family 속성

[CSS] 2016. 12. 29. 16:54

font-family : 글꼴 집합?


글꼴들의 우선 순위가 지정하여 font 없을 경우 차선택을 할 수 있도록 유도하는 것.

font-familyfamily-name과 generic family로 나누어집니다.



family-name

 

 지정한 폰트가 컴퓨터 시스템에 없을 경우에 시스템이 적절한 폰트를 선택할 수 있도록 대비

 serif(삐침이 있는 명조계), sans-serif(삐침이 없는 고딕계 폰트), monospace(고정폭을 가진 폰트), fantasy(꾸밈계 폰트), cursive(필기체 폰트)로 다섯 종류


 generic -family

 
 font-family에서 우선 순위 높은 글꼴 중 없을 경우 generic family를 선언하면 유사 계열 적절한 폰트로 대체 된다. 예를 font-family :  고딕, sans-serif로 선언한 경우 고딕 없는 경우 sans-serif의 유사 계열 폰트로 적절하게 바꾸어 준다.


■ 구글 무료 폰트 : https://fonts.google.com/


그러면 구글 폰트 요소를 추가하는 방법을 알아보겠습니다.


1. https://fonts.google.com/earlyaccess에서 원하는 폰트를 찾아주세요



2. 원하는 폰트 url를 알아주시고 <head> </head>에 이렇게 추가해주세요 

   (link 하나당 = 1 font)



3. css에서 지정 또는 <head> </head> 부분에 추가해주세요


4. 확인해보겠습니다.

See the Pen Font-family by Nami (@NamuNami) on CodePen.


블로그 이미지

미나미나미

댓글을 달아 주세요

[css] :before :after

[CSS] 2016. 12. 28. 23:58

 가상 클래스 :before | :after


:before (익스플로러 8, CS2) | ::before(익스플로러 9 이상,CS3)

 다른 선택자의 뒤에 함께 쓰여 원하는 텍스트 및 스타일 넣거나 지정할 때 사용

See the Pen yVdmMv by Nami (@NamuNami) on CodePen.


 

:after (익스플로러 8, CS2) | ::before(익스플로러 9 이상,CS3)

 뒤에 추가하는 것이 차이점  

See the Pen JbQgZg by Nami (@NamuNami) on CodePen.



블로그 이미지

미나미나미

댓글을 달아 주세요