반응형 html and css11 input type password 안 보이는 현상 input type password를 사용하다보면 숨겨진 패스워드 표시가 안 보이는 경우가 있다. 이 경우는 현재 사용중인 폰트가 해당 문자를 지원하지 않아서 발생하는 것으로 input type이 password인것의 font-family를 변경하면 해결된다. input[type=password]{ font-family:"굴림"; } 위와 같이 코드를 넣으면 되며 적용 시키면 palceholder의 폰트가 바뀐것을 알 수 있다. 이 경우에는 placeholder만 원래 쓰던 폰트로 변경을 하면 되는데 코드는 아래와 같다. ::placeholder { font-family: 'NanumSquare', sans-serif; opacity: 1; /* Firefox */ } :-ms-input-placehol.. 2021. 7. 13. Canvas wiper 구현(javascript)-1차 테스트 애니메이션과 관련된 자료를 좀 찾다가 멋진 분을 보았다. https://youtu.be/cpEeqACsF_Q?t=42 구현된 많은게 있었지만 그 중에서 나는 저거를 보고 구현 해보고 싶은 생각이 들었다. 지금까지 계속 관심만 가지고 하지 않던 Canvas쪽을 좀 보면 어느정도 될거 같았는데...결국 잘 되지 않는 중... 그래도 시도하면서 많은것을 알고 지나간다. 테스트한다고 주석 투성이고 미완성이지만 일단 1일차 코드와 현재 상태를 올린다. 저 분은 30분만에 만들었다는데(....) 그리고 보다보니 "일은 배신하지 않는다" 라는 책도 내셨더라...궁금해서 바로 오늘 구매!! 내일 도착하면 신나게 읽어봐야겠다 ㅎㅎ 2021. 5. 14. 위로 튀는 글자, 팝업 텍스트(css - keyframes) keyframes를 활용한 애니메이션으로 글자가 하나씩 위로 팝업을 하고 되돌아오는 효과이다. 여기에서 포인트는 popup anmation의 20%지점에서 top:0px을 넣었다는 점과, animation-direction:alternate를 썼다는 것이다. alternate의 경우에는 애니메이션이 끝나면 반대로 다시 돌아가는 역할을 한다. 세 일 중 아래는 예제로 만든 구동 예시이다. 세일중 글자가 하나씩 팝업 세 일 중 2021. 5. 11. 움직이는 차선 (css, javascript) 아래홈페이지의 첫 페이지에 나오는것을 참조하며 만들어보았다. www.amoeba.co.kr/drive/self amoeba www.amoeba.co.kr 내부에 있는 li tag안에 다른 태그를 넣어서 움직이게 한것을 따라했는데, 나머지 다른 인터렉티브하게 보이는 부분들도 많이 연습하며 시간을 보내봐야겠다. 사용된 전체 코드는 아래에 첨부 When self-driving cars become safer than human-driven cars 2021. 5. 11. 원 움직임 애니메이션 효과 (css-keyframes) css에서 animation이라는 속성을 사용하면 keyframes를 적용할 수 있다. keyframes에서는 각 프레임마다 어떤 변화가 있을지 적으면 되는데, 아래는 서서히 커졌다가 작아지는 keyframes를 작성한 것이다. @keyframes icon-line{ 0%{width:60px; height:60px} 60%{width:80px; height:80px;} 100%{width:44px; height:44px;} } 아래는 keyframes를 적용한 원 크기와 text의 opacity를 바꿔 애니메이션을 표현한 css이다. 영역1 TEXT1 hover text1 TEXT2 hover text2 TEXT3 hover text3 2021. 5. 10. 이전 1 2 다음 728x90
